Payment initialization on the client-side

Notice that a pure client-side payment initialization is possible yet a special care must be taken. Your project identity could be used from any web-site to initiate payments without any additional checks or verifications from the Unlimint Game Services side. At the moment we’re working on an option to disable that kind of payment orders in the Project settings.

If your sales use cases are not filled, use the server-side payment initialization with Unlimint Game Services API instead.

Step 1. Embed the Checkout Form

To get started, include the following script tag on your website - always load it directly from https://cdn.pay.super.com:

<script src="https://cdn.pay.super.com/paysdk/latest/paysuper.js"></script>

Step 2. Provide parameters

Simple Checkout

To create a Checkout Form for one-time payments it’s enough to have a Project ID and an acceptable price and currency.

Use this sample code to create a Unlimint Game Services object with the required parameters for a simple checkout:

const paySuper = new PaySuper({
    project: '5cd5624a06ae110001509186',
    amount: 10,
    currency: 'USD'
});

Products Checkout

If you’re selling such products such as key-activated products, virtual items or in-game currency, you can use this sample code with a defined product parameter:

const paySuper = new PaySuper({
    project: '5dcd11bc218dc30001d7098f',
    products: ['5dcdb885218dc30001d73c27'],
    type: 'key'
});

const paySuper = new PaySuper({
    project: '5dcd11bc218dc30001d7098f',
    products: ['5dcdb73d218dc30001d73c25', '5dcdb841218dc30001d73c26'],
    type: 'product'
});

const paySuper = new PaySuper({
    project: '5dcd11bc218dc30001d7098f',
    products: ['5e292ba2769774c7377b739e'],
    type: 'product'
});

Full list of Unlimint Game Services parameters

Remember to use your IDs for the project and products. You can find your IDs in your merchant account on the Unlimint Game Services Projects. Open your Project settings page, select the Product tab and click on the Product name. Copy the Project and Product IDs from the page URL.

Step 3. Display the Checkout Form

This example offers a sample code that displays a Unlimint Game Services Checkout Form with a BUY button.

<script>
function buyItems() {
    const paySuper = new PaySuper({
        project: '5cd5624a06ae110001509186',
        amount: 10,
        currency: 'USD'
    });

    paySuper.renderModal();
}
</script>

<button onclick="buyItems()">BUY</button>

<script>
function buyItems() {
    const paySuper = new PaySuper({
        project: '5cd5624a06ae110001509186',
        amount: 10,
        currency: 'USD'
    });

    paySuper.renderPage();
}
</script>

<button onclick="buyItems()">BUY</button>

Step 4. Handle the purchase events

paySuper.on('paymentCompleted', function() {
      // You can show a message that the payment is completed
})

Full events list in the expected order of execution

Next steps

After the payment

After a successful payment, you have to fulfil the customer’s purchase. You can use webhooks or the Transactions to accomplish the purchase.

Testing the Checkout

Verify that your integration with Unlimint Game Services Checkout works correctly. Our offered test cards can be used to create payments that produce defined responses for you to test your integration code.

Customizing the Checkout

Learn about the different ways you can customize your Checkout.

Questions?

Not a developer?