ホステッドチェックアウト

ポップアップ SDK

ホステッド JavaScript SDK から RANTAN Checkout を開きます。

Checkout V2 SDK はセッション専用の RANTAN Checkout ポップアップを開きます。iframe 埋め込みではなく、ポップアップまたは直接遷移向けです。

#ホステッド SDK を読み込む

RANTAN アプリドメインから Checkout スクリプトを読み込みます。変更できない RantanCheckout グローバルが公開されます。

HTML

<script src="https://app.rantan.xyz/checkout-v2.js"></script>

#Checkout ポップアップを開く

ポップアップブロックを避けるため、ユーザー操作内で open を呼び出します。サーバーが作成した sessionId が必要です。

Browser

<button id="buy">Buy with RANTAN</button>
<script src="https://app.rantan.xyz/checkout-v2.js"></script>
<script>
  document.querySelector("#buy").addEventListener("click", async () => {
    const result = await RantanCheckout.open({
      productId: 123,
      sessionId: "c8a9d48e-68b2-48dd-a754-75635cae71d6",
      clientReferenceId: "order_20260730_001",
    });

    // UI notification only. Verify this session from your backend.
    await fetch("/api/orders/20260730_001/verify", { method: "POST" });
  });
</script>

#オプション

オプション	必須	説明
`productId`	必須	セッションに固定された RANTAN 商品 ID。
`sessionId`	必須	サーバーで作成した Checkout Session UUID。
`clientReferenceId`	任意	ブラウザ側でも照合する販売者注文参照。
`timeoutMs`	任意	待機時間（ミリ秒）。既定 30 分、最大 60 分。
`closeOnComplete`	任意	完了後もポップアップを残す場合は false。
`onComplete / onClose / onTimeout`	任意	完了、閉じる、タイムアウト用の任意 UI コールバック。

#直接 URL を作る

RantanCheckout.url(options) はウィンドウを開かずホステッド URL を返します。ページ遷移やリンクに利用できます。

Hosted URL

https://app.rantan.xyz/checkout/123?session_id=c8a9d48e-68b2-48dd-a754-75635cae71d6

#完了結果

SDK は resolve の前に event.origin、ポップアップ、プロトコル、商品、セッション、任意の注文参照を確認します。

postMessage

{
  "type": "rantan:checkout:complete",
  "version": "v2",
  "product_id": 123,
  "purchase_id": "bfaf2aa4-dd86-4356-92db-ae0431806867",
  "status": "completed",
  "client_reference_id": "order_20260730_001",
  "checkout_session_id": "c8a9d48e-68b2-48dd-a754-75635cae71d6"
}

#SDK エラー

コード	説明
`CHECKOUT_SESSION_REQUIRED`	サーバーが作成した sessionId がありません。
`CHECKOUT_ALREADY_OPEN`	同じ Checkout Session がすでに開いています。
`CHECKOUT_CLOSED`	完了前に購入者がポップアップを閉じました。
`CHECKOUT_TIMEOUT`	完了前に制限された待機時間が終了しました。