How to create site with top-up page template

How it works

Top-up is a solution that makes it easy to sell in-game items on your game’s site. The user can make purchases after authorization on the site, which is completed with their ID from the game. Additional user verification with standard authorization methods (via email and password, phone number or social network) is not required. The solution allows you to exclude the commission of mobile platforms for transactions within the game.

If you want to offer top-up without selling items within the game, you can avoid creating an in-game store. Instead, create a site with the implemented top-up solution for the game, which you can promote through advertising across various services.

To use the top-up solution, you'll need to join Xsolla Partner Network.

User flow

  1. The user goes to the site where the top-up solution is implemented.
  2. The user enters their ID from the game in a special field. If you have user ID validation set to this step, Xsolla sends a validation webhook to verify the user ID is valid. If the validation is passed, the user can proceed with the payment. Otherwise, the user receives an error message.
  3. The user chooses items and proceeds to the payment step.
  4. The user chooses a payment method and pays for the items. If you have user ID validation with default settings, after choosing a payment method Xsolla sends a validation webhook to verify the user ID is valid. If the validation is passed, the user can proceed with the payment. Otherwise, the user receives an error message.
  5. The user pays for the items. If the payment is successful, Xsolla sends you a webhook about the successful payment.
  6. The user sees the purchased goods in their account in the game.

How to get it

  1. In your Publisher Account, go to Site Builder and click Create site.

  1. Choose a Top-up page template.

By default, Header, Top-up, Store, and Footer blocks are added to this template.

  1. In the Top-up block, set the User ID instructions toggle to On and add steps and images to help users find their ID in a game.

  1. If necessary, you can add additional blocks using the corresponding button in Builder.

  1. In the side menu, edit the content for each added block, select a global theme and configure SEO and language settings. In Builder, you can load images and videos into blocks and edit texts that will be shown to users.

  1. To add items to a specific account in the game, go to Publisher Account > Project settings > Webhooks and set a validation webhook and a webhook for the successful payment.

  1. Enable user ID validation.

  1. Click Publish.

Notice
If site publication is not available, make sure all the required conditions are met:
  • There are no empty sections in Builder (marked with a red dot).
  • The Licensing Agreement with Xsolla has been signed.
  • A section for user authorization has been added to the site (if there is a Store block on the site).

  1. Make changes to the domain (optional). To do this, go to Site Builder and click Configure. In the Domain section, edit the Xsolla domain name or use your own domain.

  1. Set up automatic adding of purchased items to the user’s account in the game. You must do this every time after a webhook is received for a successful payment.

  1. Join Xsolla Partner Network. Partner Network will monitor sales activity through tracking links and automatically transfer revenue share from attributed sales to the influencers that drive them.

User ID validation

By default, user validation ID happens after a user chooses a payment method. If you want to set it to after they enter an ID, do the following:

  1. Go to Publisher Account > Site Builder > your site > Top-up.
  2. In the User ID input block, set the User ID validation toggle to On and enter the validation webhook URL in the respective field.

Notice
Webhook URL has to start with https://. Using http:// will lead to an error.

To validate user ID:

  1. Search for a user by their ID passed in the webhook.
  2. Depending on the result, send one of the status codes:
    • 200 (with additional information) or 204 (without additional information) — if a user is found;
    • 455 — if a user ID is not found.

Copy
Full screen
Small screen
    "http_status_code": 200
    {
      "status": "success"
      "user": {
        "id": 1234567,
        "name": "Xsolla User",    
        "level": "80",
      }
    }

    Description of parameters for the 200 status code:

    ParameterDescription
    user.idUser ID. Required.
    user.nameUser name. If passed, it will be displayed instead of user.id.
    user.levelUser level.

    If the validation is passed, the user can proceed with the top-up payment. Otherwise, the user receives an error message.

    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.
    Rate this page
    Rate this page
    Is there anything we can improve?

    Don’t want to answer

    Thank you for your feedback!
    Last updated: September 15, 2021

    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!