Quickstart

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 (public key and secret key) from Tokenz. You can find your credentials on the Development page on the dashboard.

For more details on how Tokenz Checkout works, please see Tokenz 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", "<YOUR_SECRET_KEY>")

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.

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
                }
            },
            },
            {
            "product": {
                "label": "エメラルドの荷車",
                "description": "100+10",
                "images": [],
                "quantity": 1,
                "price": {
                    "currency": "JPY",
                    "amount": 1600
                }
            }
            }
        ],
        "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 Tokenz 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>