How to implement the sale of Metaframe virtual currency in your UI

You can sell virtual currency without using the Metaframe widget. For example, if you want to implement your own store UI or use a different authorization service. To do this, you need to implement the logic for purchasing, virtual currency auto top-up, and showing user balance using the Metaframe API.

Prerequisites

Before you start, make the necessary project settings:

1. Create a project.
2. Create virtual currency packages in Publisher Account.
3. Obtain the necessary IDs and secret key. To do that, contact your Customer Success Managers, email to csm@xsolla.com, or integration@xsolla.com. Provide the following information from Publisher Account:

• Merchant ID, that can be found:
  • Next to the name of your company.
  • In the Company settings > Company section.
  • In the URL in the browser address bar on any Publisher Account page. The URL has the following format: https:​//publisher.xsolla.com/merchant ID/Publisher Account section.

• Project ID, that can be found next to the name of the project.

• A secret key to sign project webhooks, that can be found in the Project settings > Webhooks section.

• API key, that is shown in Publisher Account only once when it is created and must be stored on your side. You can create a new key in the following sections:
  • Company settings > API keys.
  • Project settings > API keys.

The Xsolla team provide you with the following information necessary for further configuration:

• Host ID
• Xsolla account OAuth 2.0 client ID
• Xsolla account OAuth 2.0 client secret key

Get server token

The server token is required to obtain the user access token and for auto top-up.

On the back end of your application, implement a method to get the server JSON Web Token (JWT) using the Generate JWT API call. The request must contain the following parameters:

• grant_type is the JWT type, pass the client_credentials value.
• client_secret is the secret key that is received from Xsolla.
• client_id is the client ID received from Xsolla.

Get user access token

The user authorization token is required to generate a payment token and to request the user’s virtual currency balance.

If you are using your own authorization system you can get a suitable authorization token using:

• access token of social network
• custom ID — user ID generated on your server

Get token during social login

1. Set up user authorization via a social network in your Publisher Account:

1. 1. Open your project in Publisher Account.
   2. Click Login in the side menu.
   3. Click Create Login project.
   4. Select Standard Login project and click Create and set up. Once your new Login project is created, you can see the page with Login project settings.
   5. In the Login methods block, select Social login and click Configure.
   6. Connect social networks that you use for social login in your application.
   7. Click the name of your Login project in breadcrumb trail to return to the Login project page.
   8. Go to the Security block and select the JWT signature section.
   9. Select RS256 as the signature generation algorithm and click Save changes.

2. In the client side of your application, implement receiving and refreshing a token using the Auth via access token of social network API call.

Get token with custom ID

On the back end of your application, implement a method to get and refresh the token using the Auth by custom ID API call. The request must contain the X-Server-Authorization: <server_JWT> header, where <server_JWT> is the server JWT obtained in the previous step.

Manage virtual currency with API calls