集成结账

集成我们无缝的结账解决方案，让您的用户在亚太地区畅享多种支付方式。

先决条件

在进行集成之前，请确保您已从 Tokenz 获取 API 凭证（私钥）。您可以在控制台的 Developers → API keys 页面找到这些凭证。

有关 Tokenz Checkout 的更多信息，请参见 Checkout。

配置服务器

python

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")

创建结账会话

在您的服务器上添加一个端点来创建结账会话。结账会话控制您的客户在 Tokenz 托管的支付页面上看到的内容，例如商品、订单金额、货币和可用的支付方式。

定义商品

始终将与产品库存的敏感信息（如价格和库存）保存在您的服务器上，以防止客户在客户端篡改数据。在创建结账会话时，定义产品信息。

税费。 本快速入门（及其示例载荷）基于 Merchant of Record（MoR）模式——即 Tokenz 账户的默认模式：Tokenz 会自动计算并代收税费，您只需为每个商品设置 taxCategory。如果您的账户被特别配置为 Payment Gateway 模式，则每个 Checkout Session 都必须额外包含顶层 tax 对象（以最小货币单位表示，例如 "tax": { "amount": 0, "currency": "USD" }）；缺少该字段的请求会被拒绝并返回 order.tax-required。如果不确定您的账户使用哪种模式，请与您的 Tokenz 联系人确认。

提供成功和取消的 URL

指定成功和取消页面的 URL，确保这些页面是公开可访问的，以便 Tokenz 可以将客户重定向到它们。您也可以使用同一个 URL 来处理成功和取消状态。

[可选] 定义可用的支付方式

指定为此结账向您的客户提供的支付方式列表。如果未提供支付方式或发送了空列表，则所有可用的支付方式都将显示给客户。

将客户重定向到 Tokenz 结账页面

创建会话后，将客户重定向到响应中返回的结账页面的 URL。

python

@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)

建立结账页面

添加成功页面

为结账会话 successUrl 创建一个成功页面，向您的客户显示订单确认信息或订单详细信息。客户成功完成结账后，Tokenz 将重定向到此页面。

html

<!DOCTYPE html>
<html>
<head>
  <title>感谢您的订单！</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section>
    <p>
      感谢您的惠顾！如果您有任何问题，请发送电子邮件至
      <a href="mailto:orders@example.com">orders@example.com</a>。
    </p>
  </section>
</body>
</html>

添加待处理付款页面

对于异步支付方式（如便利店支付或银行转账），支付可能会处于待处理状态，时间从几分钟到几天不等。

为 pendingUrl 添加一个页面。当客户关闭异步支付的说明页面后，Tokenz 会重定向到此页面。

html

<!DOCTYPE html>
<html>
<head>
  <title>感谢您的订单！</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section>
    <p>
      您的支付正在处理中！我们会在完成后第一时间通知您。
      如果您有任何问题，请发送电子邮件至
      <a href="mailto:orders@example.com">orders@example.com</a>.
    </p>
  </section>
</body>
</html>

添加取消页面

为 cancelUrl 添加另一个页面。当客户在结账中点击返回按钮时，Tokenz 会重定向到此页面。

html

<!DOCTYPE html>
<html>
<head>
  <title>结账已取消</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section>
    <p>忘记添加商品到购物车了？继续购物，然后回来支付！</p>
  </section>
</body>
</html>

添加结账按钮

最后，添加一个页面来显示客户订单的预览。允许他们审核或修改订单—当他们被重定向到结账页面后，订单即为最终确定，除非创建新的结账会话，否则无法修改订单。

在您的订单预览页面中添加一个按钮。当您的客户点击此按钮时，他们会被重定向到 Tokenz 托管的支付页面。

html

<!DOCTYPE html>
<html>
  <head>
    <title>购买新产品</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="Treasure chest" />
        <div class="description">
          <h3>宝箱</h3>
          <h5>¥1,000</h5>
        </div>
      </div>
      <form action="/create-tokenz-checkout" method="POST">
        <button type="submit" id="checkout-button">结账</button>
      </form>
    </section>
  </body>
</html>