Client-side payment initialization

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 PaySuper 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 PaySuper 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 PaySuper 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 PaySuper 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 PaySuper parameters

Remember to use your IDs for the project and products. You can find your IDs in your merchant account on the PaySuper 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 PaySuper 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 PaySuper 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?

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 PaySuper 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 PaySuper even better.


Not a developer?

Our engineers will help you integrate PaySuper into your existing e-commerce platform, a website or a game in the best possible way. If you want something very special and crazy custom yet don’t have a suitable programmer available nearby - talk to us! We won’t let down a PaySuper user. We will try to help you in every possible way. We can even hire a programmer for you!