Set up Metaframe and add it to web application
Set up Metaframe in Publisher Account
To make basic Metaframe setup:
- Open your project in Publisher Account.
- In the side menu, click Metaframe.
- Click Create Metaframe.
Notice
The Create Metaframe button is available only after signing the licensing agreement.
- Click the Enable Metaframe toggle.
- In the Login project field, select the Login project you set up in the previous step.
For detailed information on setting up advanced Metaframe features, see:
Integrate Metaframe into web application
To add Metaframe to your application:
- Open your project in Publisher Account.
- In the side menu, click Metaframe.
- Click Copy script code.
- Add the script to your code in one of the following ways:
- Insert the script into the head or body of HTML file before your application is initialized as shown in the example below.
Copy
- html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Integration example</title>
</head>
<body>
<script src="https://cdn.xsolla.net/metaframe-web-wallet-widget-prod/container/v1/metaframe.js"></script>
<script>
window.metaframe.create({
loginProjectId: '00000000-0000-0000-0000-000000000000',
merchantId: 000001,
projectId: 000001,
orbsApiHostId: '00000000-0000-0000-0000-000000000000',
isMobile: false,
});
</script>
<script src="YOUR_APPLICATION_HERE.js"></script>
</body>
</html>
- Create a script element inside your application’s JS code and call the
window.metaframe.createmethod after loading the script as shown in the example below. This allows the Metaframe script to be loaded dynamically.
- Create a script element inside your application’s JS code and call the
Copy
- javascript
const metaframeScript = document.createElement("script");
metaframeScript.src = "https://cdn.xsolla.net/metaframe-web-wallet-widget-prod/container/v1/metaframe.js";
metaframeScript.onload = () => {
window.metaframe.create(
{
loginProjectId: '00000000-0000-0000-0000-000000000000',
merchantId: 000001,
projectId: 000001,
orbsApiHostId: '00000000-0000-0000-0000-000000000000',
isMobile: false,
}
);
};
document.body.appendChild(metaframeScript);
Was this article helpful?
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.Found a typo or other text error? Select the text and press Ctrl+Enter.
