Integrate checkout

Integrate our seamless checkout solution and empower your players with payment methods across APAC.

Prerequisites

Before you can have a working integration, make sure you have the API credentials (secret key) from Tokenz. You can find your credentials under Developers → API keys on the Tokenz Dashboard.

For more details on how Tokenz Checkout works, please see Checkout.

Set up the server

import os
from flask import Flask, request, redirect
from flask_cors import CORS
import requests

# Replace the keys with yours
SECRET_KEY = os.environ.get("SECRET_KEY", "secret_test_YOUR_KEY_HERE")

app = Flask(__name__, static_url_path="")
CORS(app)

root = "../client/build"


@app.route("/", methods=["GET"])
def index():
    return redirect("http://localhost:3080")

Create a Checkout Session

Add an endpoint on your server that creates a Checkout Session. A Checkout Session controls what your customer sees on the Tokenz-hosted payment page, such as line items, the order amount, currency, and available payment methods.

Define the line items

Always keep sensitive information about your product inventory, like price and availability, on your server to prevent customer manipulation from the client. Define product information when you create the Checkout Session.

Tax. This quickstart (and its example payloads) documents the Merchant of Record (MoR) model — the default for Tokenz accounts — where Tokenz computes and collects tax automatically and you only set each item's taxCategory. If your account is specially configured for the Payment Gateway model, every Checkout Session must additionally include a top-level tax object in minor units (for example "tax": { "amount": 0, "currency": "USD" }); requests without it are rejected with order.tax-required. If you're unsure which model your account uses, check with your Tokenz contact.

Supply success and cancel URLs

Specify URLs for success and cancel pages—make sure they're publicly accessible so Tokenz can redirect customers to them. You can also handle the successful and canceled states with the same URL.

[optional] Define available payment method(s)

Specify the list of payment methods offered to your customer for this checkout. If the payment methods are not provided or an empty list is sent, all available payment methods will be displayed to the customer.

Redirect the customer to the Tokenz checkout

After creating the session, redirect your customer to the checkout page's URL returned in the response.

@app.route("/create-tokenz-checkout", methods=['POST'])
def create_tokenz_checkout():
    CALLBACK_URL_PREFIX = request.headers['referer']

    headers = {"Authorization": f'Bearer {SECRET_KEY}'}
    print(headers)

    payload = {
        "amount": {
            "currency": "JPY",
            "amount": 5200
        },
        "itemDetails": [
            {
              "product": {
                  "label": "ひとにぎりのエメラルド",
                  "description": "80+8",
                  "images": [
                      "https://images.ctfassets.net/z82qbo7cv7ia/1dWPbk5Qx2M1Qikj6Knyuc/e37b2c26829c0d30793a348ae3adb3b0/fake-pass.webp"
                  ],
                  "quantity": 3,
                  "price": {
                      "currency": "JPY",
                      "amount": 1200
                  },
                  "taxCategory": "DIGITAL_GOODS_AND_SERVICES"
              }
            },
            {
              "product": {
                  "label": "エメラルドの荷車",
                  "description": "100+10",
                  "images": [],
                  "quantity": 1,
                  "price": {
                      "currency": "JPY",
                      "amount": 1600
                  },
                  "taxCategory": "DIGITAL_GOODS_AND_SERVICES"
              }
            }
        ],
        "customerInfo": {},
        "successUrl": "http://localhost:9000/success",
        "pendingUrl": "http://localhost:9000/pending",
        "cancelUrl": "http://localhost:9000/cancel"
    }

    res = requests.post(
        "https://api.tokenz.one/v1/checkoutsession", json=payload, headers=headers
    )
    
    session = res.json()

    return redirect(session["url"], 303)

Build your checkout

Add a success page

Create a success page for the URL you provided as the Checkout Session successUrl to display order confirmation messaging or order details to your customer. Tokenz redirects to this page after the customer successfully completes the checkout.

<!DOCTYPE html>
<html>
<head>
  <title>Thanks for your order!</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section>
    <p>
      We appreciate your business! If you have any questions, please email
      <a href="mailto:orders@example.com">orders@example.com</a>.
    </p>
  </section>
</body>
</html>

Add a processing payment page

For asynchronous payment methods, like convenience store payment or bank transfer, the payment might be in a processing state for a few minutes up to a few days. Add a page for the pendingUrl. Tokenz redirects to this page after the customer closes the instructions page for asynchronous payments.

<!DOCTYPE html>
<html>
<head>
  <title>Thanks for your order!</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section>
    <p>
      Your payment is being processed! We will let you know as soon as it is completed.
      If you have any questions, please email
      <a href="mailto:orders@example.com">orders@example.com</a>.
    </p>
  </section>
</body>
</html>

Add a canceled page

Add another page for cancelUrl. Tokenz redirects customers to this page when they click the back button during checkout.

<!DOCTYPE html>
<html>
<head>
  <title>Checkout canceled</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section>
    <p>Forgot to add something to your cart? Shop around then come back to pay!</p>
  </section>
</body>
</html>

Add a checkout button

Finally, add a page to show customers a preview of their order. Allow them to review or modify their order—as soon as they land on the Checkout page, the order is final, and they can't modify it without creating a new Checkout Session.

Add a button to your order preview page. Customers are redirected to the Tokenz-hosted payment page when they click this button.

<!DOCTYPE html>
<html>
  <head>
    <title>Buy cool new product</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section>
      <div class="product">
        <img src="https://images.ctfassets.net/z82qbo7cv7ia/1dWPbk5Qx2M1Qikj6Knyuc/e37b2c26829c0d30793a348ae3adb3b0/fake-pass.webp" alt="ひとにぎりのエメラルド" />
        <div class="description">
          <h3>ひとにぎりのエメラルド</h3>
          <h5>1,200円</h5>
        </div>
      </div>
      <form action="/create-tokenz-checkout" method="POST">
        <button type="submit" id="checkout-button">Checkout</button>
      </form>
    </section>
  </body>
</html>