チェックアウトの連携

シームレスなチェックアウトソリューションを連携し、各国の最適な支払い方法でお客様をサポートしましょう。

前提条件

連携を実装する前に、Tokenz から API クレデンシャル (秘密キー) を取得していることを確認してください。クレデンシャルは Tokenz Dashboard の Developers → API keys でご確認いただけます。

Tokenz チェックアウトの仕組みの詳細については、Tokenz チェックアウトでご確認ください。

サーバーのセットアップ

python

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

# ご自身のキーに置き換えてください
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")

Checkout Session の作成

サーバーに Checkout Session (チェックアウトセッション) を作成するエンドポイントを追加します。 Checkout Session では、Tokenz がホストする支払いページでお客様に表示される項目、注文金額、通貨および利用可能な支払い方法を管理します。

項目の定義

お客様によるクライアント側からの操作を防ぐため、商品の価格や在庫などの機密情報は、必ずサーバー側に保管してください。 Checkout Session の作成時に商品情報を定義します。

税について。 このクイックスタート（およびサンプルペイロード）は、Tokenz アカウントのデフォルトである Merchant of Record（MoR）モデルを前提としています。MoR では Tokenz が税を自動的に計算・徴収するため、各商品の taxCategory を設定するだけで済みます。アカウントが特別に Payment Gateway モデルに設定されている場合は、すべての Checkout Session にトップレベルの tax オブジェクト（最小通貨単位、例："tax": { "amount": 0, "currency": "USD" }）を追加で含める必要があり、含めない場合は order.tax-required エラーで拒否されます。お使いのアカウントのモデルが不明な場合は、Tokenz の担当者にご確認ください。

成功 URL とキャンセル 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)

チェックアウトの構築

成功ページを追加する

Checkout Session の successUrl として指定した URL に表示する成功ページを作成し、注文確認メッセージや注文の詳細をお客様に表示します。お客様がチェックアウトを正常に完了すると、このページにリダイレクトされます。

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 にページを追加します。お客様が非同期型の支払いに関する説明ページを閉じると、このページにリダイレクトされます。

html

<!DOCTYPE html>
<html>
<head>
  <title>ご注文ありがとうございます。</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section>
    <p>
      お客様のお支払いは現在処理中です。処理が完了次第お知らせいたします。
      If you have any questions, please email
      <a href="mailto:orders@example.com">orders@example.com</a>.
    </p>
  </section>
</body>
</html>

キャンセルページを追加する

cancelUrl にページを追加します。お客様がチェックアウトで戻るボタンをクリックすると、このページにリダイレクトされます。

html

<!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>

チェックアウトボタンを追加する

最後にお客様の注文のプレビューを表示するページを追加します。お客様が注文の確認や修正をできるようにします。チェックアウトページに行くと、注文は確定し、新しい Checkout Session を作成しない限り注文を修正することはできません。

注文プレビューページにボタンを追加します。お客様がこのボタンをクリックすると、Tokenzがホストする支払いページにリダイレクトされます。

html

<!DOCTYPE html>
<html>
  <head>
    <title>クールな新商品を購入するt</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">チェックアウト</button>
      </form>
    </section>
  </body>
</html>