Payment initialization with token

Payment initialization with token


A token is an encrypted string that represents certain details of your customer (such as the user ID, email and others), a game and purchase parameters.

You can create a token before your customer intents to pay and use it in the future payments. For instance, you can create the token after a user has signed up or has logged in to your website or a game client. When your customer wants to pay for something you redirect them to the PaySuper-hosted Checkout Form to instantly complete a purchase.

Token-based features

  • Instantly redirect to a Checkout Form: Once you have created a token that stores the necessary customer data, you don’t need to request that data again from the customer. Instead you can display the PaySuper Checkout Form so the customer can conveniently confirm the purchase. This is useful when you can identify a customer in your system.

  • The pre-filled information in a Checkout Form: The Checkout Form is pre-filled with the applicable information about your customer that it can get from the token.


You can follow these steps to create a Checkout Form:

Step 1. Create a token on your server

Send the POST /api/v1/tokens to receive an encrypted string. Learn more about the full list of parameters.

Remember to add a Header X-API-SIGNATURE with the Project’s Secret key found on the Project webhooks page.

Your Secret keys carry many privileges, so be sure to keep them secure! Do not share your Secret API keys in publicly accessible areas such as GitHub, client-side code, and so forth.

Run the script and view the response data:

Or try it with cURL to interact with the API over HTTP from your console:

curl -X POST -H 'X-API-SIGNATURE: YOUR_SECRET_KEY' -d '{
 "settings": {
    "project_id": "YOUR_PROJECT_ID",
    "amount": 10,
    "currency": "USD",
    "type": "simple"
 },
 "user": {
   "id": "58799f2c2564296bd2cb",
   "address": {
      "city": "Almere",
      "country": "NL",
      "postal_code": "1326 PA",
      "state": "Flevoland"
   },
   "email": {
      "value": "user.email@example.com",
      "verified": true
   }
 }
}' 'https://api.pay.super.com/api/v1/tokens'

Step 2. Create a Checkout Form with a token

Open a Checkout Form by URL

Retrieve the response parameter payment_form_url from the previous step. It is the URL of PaySuper-hosted payment form.

When your customer is ready to start a payment you can redirect the user to the URL in a new browser window.

Retrieve the response parameter payment_form_url from the previous step. It is the URL of a PaySuper-hosted payment form.

Embed the Checkout Form as an inline iframe by URL:

<iframe src="{payment_form_url}"></iframe>

Retrieve the response parameter with id from the previous step. It is the ID of the created order.

Use this code sample to open the Checkout Form as a standalone web-page with PaySuper JS SDK and replace YOUR_ORDER_ID in the formUrl with id value:

<script>
function buyItems() {
    const paySuper = new PaySuper({
        formUrl: 'https://order.pay.super.com/?order_id=YOUR_ORDER_ID'
    });

    paySuper.renderPage();
}
</script>

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

Note that the parameters used in the POST /api/v1/tokens request override the corresponding parameters in an order object.

Client-side payment initialization

To integrate a Checkout Form you can follow the client-side payment initialization but instead pass a token parameter when creating a PaySuper object.

If your token contains user and order parameters then you can create a Checkout Form instance with just a single parameter:

const paySuper = new PaySuper({
   token: '5cd5620f06ae110001509185'
});

Server-side payment initialization

To integrate a Checkout Form you can follow the server-side payment initialization with the token parameter.

If your token contains the user and order parameters then you can request a Checkout Form URL with just a single parameter:

Run the script and view the response data:

Or try it with cURL to interact with the API over HTTP from your console:

curl -X POST -H 'Content-Type: application/json' -d '{
    "token": "YOUR_TOKEN"
}' 'https://checkout.pay.super.com/api/v1/order'

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!