メタフレームをセットアップしてウェブアプリケーションに追加する
パブリッシャーアカウントでメタフレームを設定する
メタフレームの基本的な設定を行います：
- パブリッシャーアカウントのプロジェクトで、メタフレームセクションに移動します。
- 「メタフレームを作成する」をクリックします。
注意
「メタフレームを作成する」ボタンは、ライセンス契約への署名 を行った後でのみ使用できます。
- 「メタフレームを有効にする」トグルをクリックします。
- 「ログインプロジェクト」フィールドで、前の手順で設定したログインプロジェクトを選択します。
高度なメタフレーム機能のセットアップの詳細については、以下を参照してください：
メタフレームをウェブアプリケーションに統合する
メタフレームをアプリに追加するには：
- パブリッシャーアカウントのプロジェクトで、メタフレームセクションに移動します。
- 「スクリプトコードをコピー」をクリックします。
- 次のいずれかの方法でスクリプトをコードに追加します：
- 下の例に示すように、アプリケーションを初期化する前にHTMLファイルの先頭または本文にスクリプトを挿入します。
Copy
- html
1<!doctype html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8" />
6 <title>Integration example</title>
7</head>
8
9<body>
10 <script src="https://cdn.xsolla.net/metaframe-web-wallet-widget-prod/container/v1/metaframe.js"></script>
11 <script>
12
13 window.metaframe.create({
14
15 loginProjectId: '00000000-0000-0000-0000-000000000000',
16 merchantId: 000001,
17 projectId: 000001,
18 orbsApiHostId: '00000000-0000-0000-0000-000000000000',
19 isMobile: false,
20 isCollapsed: false,
21 layoutSettings: {
22 desktop: {
23 widgetMarginTop: 16
24 },
25 mobile: {
26 widgetMarginTop: 72
27 },
28 },
29
30 });
31
32 </script>
33 <script src="YOUR_APPLICATION_HERE.js"></script>
34</body>
35
36</html>
- 下記の例のように、アプリケーションのJSコード内にスクリプト要素を作成し、スクリプトを読み込んだ後に、
window.metaframe.createメソッドを呼び出します。これにより、メタフレームスクリプトを動的に読み込むことができます。
- 下記の例のように、アプリケーションのJSコード内にスクリプト要素を作成し、スクリプトを読み込んだ後に、
Copy
- javascript
1const metaframeScript = document.createElement("script");
2
3metaframeScript.src = "https://cdn.xsolla.net/metaframe-web-wallet-widget-prod/container/v1/metaframe.js";
4
5metaframeScript.onload = () => {
6
7 window.metaframe.create(
8
9 {
10 loginProjectId: '00000000-0000-0000-0000-000000000000',
11 merchantId: 000001,
12 projectId: 000001,
13 orbsApiHostId: '00000000-0000-0000-0000-000000000000',
14 isMobile: false,
15 isCollapsed: false,
16 layoutSettings: {
17 desktop: {
18 widgetMarginTop: 16
19 },
20 mobile: {
21 widgetMarginTop: 72
22 },
23 },
24 }
25
26 );
27
28};
29
30document.body.appendChild(metaframeScript);
お知らせ
window.metaframe.create メソッドパラメータの詳細については、メタフレームのメソッドとイベントを探索するセクションを参照してください。この記事は役に立ちましたか？
ご意見ありがとうございました！
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。誤字脱字などのテキストエラーを見つけましたか？ テキストを選択し、Ctrl+Enterを押します。
