Set up Metaframe and add it to web application

Set up Metaframe in Publisher Account

To make basic Metaframe setup:

  1. In your project in Publisher Account, go to the Metaframe section.
  2. Click Create Metaframe.
Notice
The Create Metaframe button is available only after signing the licensing agreement.
  1. Click the Enable Metaframe toggle.
  2. 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:

  1. In your project in Publisher Account, go to the Metaframe section.
  2. Click Copy script code.
  3. Add the script to your code in one of the following ways:
    1. Insert the script into the head or body of HTML file before your application is initialized as shown in the example below.
Copy
Full screen
Small screen
  • 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,
            isCollapsed: false,
            layoutSettings: {
                desktop: {
                    widgetMarginTop: 16
                },
                mobile: {
                    widgetMarginTop: 72
                },
            },

        });

    </script>
    <script src="YOUR_APPLICATION_HERE.js"></script>
</body>

</html>
    1. Create a script element inside your application’s JS code and call the window.metaframe.create method after loading the script as shown in the example below. This allows the Metaframe script to be loaded dynamically.
Copy
Full screen
Small screen
  • 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,
            isCollapsed: false,
            layoutSettings: {
                desktop: {
                    widgetMarginTop: 16
                },
                mobile: {
                    widgetMarginTop: 72
                },
            },
        }

    );

};

document.body.appendChild(metaframeScript);
Note
For a detailed description of the window.metaframe.create method parameters, see Explore Metaframe methods and events section.
Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Last updated: December 13, 2024

Found a typo or other text error? Select the text and press Ctrl+Enter.

Report a problem
We always review our content. Your feedback helps us improve it.
Provide an email so we can follow up
Thank you for your feedback!