Payment initialization on the client-side
The client-side payment initialization makes it possible to integrate a Checkout Form into your website using only frontend code.
It’s easy to embed Unlimint Game Services JS SDK with just a few lines of Javascript code to start a payment process and display a purchase status finally without any server-side code.
HOW IT WORKS
Try out the payment sample or see the code on GitHub.
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.gameservices.unlimint.com
:
<script src="https://cdn.gameservices.unlimint.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'],
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 a successful payment, you have to fulfil the customer’s purchase. You can use webhooks or the Transactions to accomplish the purchase.
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.
Learn about the different ways you can customize your Checkout.
Questions?
Sales
Our salespeople are pleasant and friendly. Leave your contact details, and we’ll be back to you in no time.
Support
We are always happy to help with a code, improve a guide or consider a feature.
GitHub
The Unlimint Game Services Checkout Form, the JS SDK and even the server are available as a source code on our GitHub. You’re welcome to explore the code and help us make Unlimint Game Services even better.