Inline Checkout

Inline checkoutは、安全な決済フォームをページレイアウトに直接埋め込みます。モーダルとして開くoverlay checkoutとは異なり、inline checkoutはページの一部になります。レイアウトを自由に制御でき、checkoutフォームの横に独自の注文概要を表示できます。

仕組み

Inline checkoutは、ページ上のコンテナに安全なDodo Payments frameをレンダリングします。frameは顧客情報と決済情報の収集を処理します。ページには商品、合計金額、その他の情報を表示します。SDKを使用すると、ページとcheckout frameが相互に通信できます。 checkoutが完了すると、Dodo Paymentsは決済、またはサブスクリプション商品の場合はサブスクリプションを作成し、アクセスをプロビジョニングできるようwebhookを送信します。

Inline checkout frameは、すべての機密性の高い決済情報を安全に処理します。これにより、追加の認証を取得しなくてもPCI complianceを確保できます。

優れたInline Checkoutの条件

顧客は、誰から購入するのか、何を購入するのか、いくら支払うのかを把握できる必要があります。実装には次の要素を含める必要があります。

必須要素がラベル付けされたInline checkoutの例 — Example inline checkout layout showing required elements

Recurring information: 継続課金の場合は、請求頻度と更新時の支払総額を表示します。trialの場合は、trial期間を表示します。
Item descriptions: 購入内容の説明。
Transaction totals: 通貨を含む小計、税額合計、総合計。
Dodo Payments footer: Dodo Paymentsの情報、販売条件、privacy policyを含む、完全なinline checkout frame。
Refund policy: Dodo Paymentsの標準refund policyと異なる場合は、自社のrefund policyへのリンク。

footerを含む完全なinline checkout frameを常に表示してください。法的情報を削除または非表示にすると、compliance要件に違反します。

Customer Journey

checkout flowはcheckout sessionの設定によって異なります。sessionの設定によっては、顧客にすべての情報を1ページで表示することも、複数のステップに分けて表示することもできます。

Customer opens checkout

checkout URLを渡してinline checkoutを開きます。checkout.breakdownなどのSDK eventsを使用して、ページ上の情報を表示・更新します。

Customer enters their details

Inline checkoutでは、まず顧客にメールアドレスの入力、国の選択、必要に応じたZIPまたは郵便番号の入力を求めます。このステップで、税額と利用可能な決済方法の判定に必要な情報をすべて収集します。顧客情報を事前入力し、保存済みの住所を表示することで、操作を簡略化できます。

Customer selects payment method

情報の入力後、利用可能な決済方法と決済フォームが表示されます。顧客の所在地に応じて、クレジットカードまたはデビットカード、PayPal、Apple Pay、Google Pay、その他の現地の決済方法などが表示されます。利用可能な場合は保存済みの決済方法を表示して、checkoutを迅速化します。

Checkout completed

Dodo Paymentsは、成功する可能性を最大限に高めるため、各決済をその取引に最適なacquirerへルーティングします。顧客には、構築したsuccess workflowが表示されます。

Dodo Payments creates the payment or subscription

Dodo Paymentsは決済、またはサブスクリプション商品の場合はサブスクリプションを作成し、アクセスをプロビジョニングできるようwebhookを送信します。顧客が使用した決済方法は、更新またはサブスクリプションの変更に備えてfileに保存されます。

クイックスタート

SDKをインストールし、inline mode用に初期化して、コンテナ要素でcheckoutを開きます。

import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.checkout.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

ページに対応するidを持つコンテナ要素があることを確認してください: <div id="dodo-inline-checkout"></div>。

ステップごとのIntegration

Install the SDK

npm、yarn、またはpnpmでインストールします。

npm install dodopayments-checkout

yarn add dodopayments-checkout

pnpm add dodopayments-checkout

Initialize the SDK for Inline Display

SDKを初期化し、displayType: 'inline'を指定します。checkout.breakdown eventをリッスンして、リアルタイムの税額と合計金額でUIを更新します。

import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    if (event.event_type === "checkout.breakdown") {
      const breakdown = event.data?.message;
      // Update your UI with breakdown.subTotal, breakdown.tax, breakdown.total, etc.
    }
  },
});

Create a Container Element

checkout frameを挿入するHTML要素を追加します。

<div id="dodo-inline-checkout"></div>

Open the Checkout

DodoPayments.Checkout.open()を呼び出し、コンテナのcheckoutUrlとelementIdを渡します。

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.checkout.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

Test Your Integration

開発serverを起動します。

npm run dev

checkout flowをテストします。
- inline frameにメールアドレスと住所情報を入力する
- カスタム注文概要がリアルタイムで更新されることを確認する
- test credentialsを使用して決済flowをテストする
- redirectが正しく動作することを確認する

onEvent callbackにconsole logを追加した場合、ブラウザのconsoleにcheckout.breakdown eventsが記録されます。

Go Live

productionの準備ができたら、次の操作を行います。

modeを'live'に変更します。

DodoPayments.Initialize({
  mode: "live",
  displayType: "inline",
  onEvent: (event) => {
    // Handle events
  }
});

checkout URLをbackendのlive checkout sessionを使用するよう更新する
productionで完全なflowをテストする

完全なReactの例

この例では、inline checkoutの横にカスタム注文概要を実装し、checkout.breakdown eventを使用して両者を同期する方法を示します。

"use client";

import { useEffect, useState } from 'react';
import { DodoPayments, CheckoutBreakdownData } from 'dodopayments-checkout';

export default function CheckoutPage() {
  const [breakdown, setBreakdown] = useState<Partial<CheckoutBreakdownData>>({});

  useEffect(() => {
    // 1. Initialize the SDK
    DodoPayments.Initialize({
      mode: 'test',
      displayType: 'inline',
      onEvent: (event) => {
        // 2. Listen for the 'checkout.breakdown' event
        if (event.event_type === "checkout.breakdown") {
          const message = event.data?.message as CheckoutBreakdownData;
          if (message) setBreakdown(message);
        }
      }
    });

    // 3. Open the checkout in the specified container
    DodoPayments.Checkout.open({
      checkoutUrl: 'https://test.checkout.dodopayments.com/session/cks_123',
      elementId: 'dodo-inline-checkout'
    });

    return () => DodoPayments.Checkout.close();
  }, []);

  const format = (amt: number | null | undefined, curr: string | null | undefined) => 
    amt != null && curr ? `${curr} ${(amt/100).toFixed(2)}` : '0.00';

  const currency = breakdown.currency ?? breakdown.finalTotalCurrency ?? '';

  return (
    <div className="flex flex-col md:flex-row min-h-screen">
      {/* Left Side - Checkout Form */}
      <div className="w-full md:w-1/2 flex items-center">
        <div id="dodo-inline-checkout" className='w-full' />
      </div>

      {/* Right Side - Custom Order Summary */}
      <div className="w-full md:w-1/2 p-8 bg-gray-50">
        <h2 className="text-2xl font-bold mb-4">Order Summary</h2>
        <div className="space-y-2">
          {breakdown.subTotal != null && (
            <div className="flex justify-between">
              <span>Subtotal</span>
              <span>{format(breakdown.subTotal, currency)}</span>
            </div>
          )}
          {breakdown.discount != null && breakdown.discount > 0 && (
            <div className="flex justify-between">
              <span>Discount</span>
              <span>{format(breakdown.discount, currency)}</span>
            </div>
          )}
          {breakdown.tax != null && (
            <div className="flex justify-between">
              <span>Tax</span>
              <span>{format(breakdown.tax, currency)}</span>
            </div>
          )}
          <hr />
          {(breakdown.finalTotal ?? breakdown.total) != null && (
            <div className="flex justify-between font-bold text-xl">
              <span>Total</span>
              <span>{format(breakdown.finalTotal ?? breakdown.total, breakdown.finalTotalCurrency ?? currency)}</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

API Reference

Initialize

Initializeを1回呼び出してSDKを設定します。

interface InitializeOptions {
  mode: "test" | "live";
  displayType?: "overlay" | "inline";
  onEvent: (event: CheckoutEvent) => void;
}

DodoPayments.Initialize(options);

Option	Type	Required	Description
`mode`	`"test" \| "live"`	Yes	Environment mode。
`displayType`	`"inline" \| "overlay"`	Yes	checkoutを埋め込むには`"inline"`に設定する必要があります。
`onEvent`	`function`	Yes	checkout eventsを処理するcallback function。

Open Checkout

コンテナでcheckout frameを開きます。

export type FontSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
export type FontWeight = "normal" | "medium" | "bold" | "extraBold";

interface CheckoutOptions {
  checkoutUrl: string;
  elementId: string;
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
    manualRedirect?: boolean;
    payButtonText?: string;
    fontSize?: FontSize;
    fontWeight?: FontWeight;
  };
}

DodoPayments.Checkout.open(options);

Option	Type	Required	Description
`checkoutUrl`	`string`	Yes	create checkout session APIから取得したcheckout session URL
`elementId`	`string`	Yes	checkoutをレンダリングするDOM要素の`id`
`options.showTimer`	`boolean`	No	session timerを表示または非表示にします。デフォルトは`true`です。`false`に設定すると、sessionの有効期限が切れたときに`checkout.link_expired` eventを受け取ります。
`options.showSecurityBadge`	`boolean`	No	security badgeを表示または非表示にします。デフォルトは`true`です。
`options.manualRedirect`	`boolean`	No	`true`の場合、自動redirectを防止します。Checkoutは決済結果を含む`checkout.status`と、開くURLを含む`checkout.redirect_requested`を発行するため、navigationを処理します。
`options.payButtonText`	`string`	No	pay buttonのカスタムテキスト
`options.fontSize`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	No	checkoutのglobal font size
`options.fontWeight`	`"normal" \| "medium" \| "bold" \| "extraBold"`	No	checkoutのglobal font weight

Close Checkout

checkout frameをプログラムで削除し、event listenersをクリーンアップします。

DodoPayments.Checkout.close();

Check Status

checkout frameが現在挿入されているか確認します。

const isOpen = DodoPayments.Checkout.isOpen();
// Returns: boolean

Events

SDKはonEvent callbackを通じてリアルタイムeventsを提供します。inline checkoutでは、checkout.breakdownがUIの同期に特に役立ちます。

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    switch (event.event_type) {
      case "checkout.opened":
        // Frame has loaded
        break;
      case "checkout.form_ready":
        // Form is ready for user input
        break;
      case "checkout.breakdown":
        // Prices, taxes, or discounts updated
        break;
      case "checkout.customer_details_submitted":
        // Customer details submitted
        break;
      case "checkout.pay_button_clicked":
        // Customer clicked pay button
        break;
      case "checkout.redirect":
        // Checkout will redirect
        break;
      case "checkout.error":
        console.error("Error:", event.data?.message);
        break;
      case "checkout.link_expired":
        // Session expired (only when showTimer is false)
        break;
    }
  }
});

Event	Description
`checkout.opened`	checkout frameが読み込まれた
`checkout.form_ready`	formがユーザー入力を受け付ける準備が完了した。loading stateを非表示にするために使用します
`checkout.breakdown`	価格、税額、またはdiscountが更新された
`checkout.customer_details_submitted`	顧客情報が送信された
`checkout.pay_button_clicked`	顧客がpay buttonをクリックした。analyticsとconversion funnelのtrackingに役立ちます
`checkout.redirect`	checkoutがredirectする（例: bank pageへ）
`checkout.error`	checkout中にerrorが発生した
`checkout.link_expired`	checkout sessionの有効期限が切れた。`showTimer`が`false`に設定されている場合のみ受信

Checkout Breakdown Data

checkout.breakdown eventは、価格と税額の情報を提供します。

interface CheckoutBreakdownData {
  subTotal?: number;          // Amount in cents
  discount?: number;          // Amount in cents
  tax?: number;               // Amount in cents
  total?: number;             // Amount in cents
  currency?: string;          // e.g., "USD"
  finalTotal?: number;        // Final amount including adjustments
  finalTotalCurrency?: string; // Currency for the final total
}

eventはcheckout frameの読み込み時、および価格が再計算されるたびに発生します。たとえば、顧客が国を選択した場合や、税額が変わる郵便番号を入力した場合などです。 Field Details:

Field	Description
`subTotal`	discountまたは税金を適用する前の全line itemsの合計
`discount`	適用されたすべてのdiscountの合計額
`tax`	計算された税額。ユーザーが住所fieldを操作すると動的に更新されます
`total`	sessionのbase currencyでの`subTotal - discount + tax`の結果
`currency`	標準の小計、discount、税額に使用されるISO currency code（例: `"USD"`）
`finalTotal`	顧客に実際に請求される金額。基本的な価格内訳に含まれない追加のforeign exchange調整や現地の決済方法手数料が含まれる場合があります
`finalTotalCurrency`	顧客が実際に支払う通貨。purchasing power parityや現地通貨換算が有効な場合、`currency`と異なることがあります

Integration Tips:

Currency Formatting: 価格は最小通貨単位のintegerです。たとえばUSDではcentです。小数点以下2桁の通貨では、Intl.NumberFormatでformatする前に100で割ります。JPYなどの小数点以下0桁の通貨には小さい単位がないため、割らないでください。
Handling Initial States: checkoutの初回読み込み時、ユーザーがbilling informationを入力するかcodeを適用するまで、taxとdiscountは0またはnullになる場合があります。これらのstateを適切に処理してください（例: dash —を表示する、またはrowを非表示にする）。
The “Final Total” vs “Total”: totalは標準的な価格計算を提供しますが、取引のsource of truthはfinalTotalです。finalTotalが存在する場合、顧客のcardに実際に請求される金額を正確に反映します。
Real-time Feedback: tax fieldを使用して、税額がリアルタイムで計算されていることをユーザーに表示します。これによりcheckout pageに「live」感が生まれ、住所入力時の操作負担を軽減できます。

CDN Implementation

build stepなしで素早くintegrationするには、CDNからSDKを読み込みます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dodo Payments Inline Checkout</title>
  
  <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
  <script>
    DodoPaymentsCheckout.DodoPayments.Initialize({
      mode: "test",
      displayType: "inline",
      onEvent: (event) => {
        console.log('Checkout event:', event);
      }
    });
  </script>
</head>
<body>
  <div id="dodo-inline-checkout"></div>

  <script>
    DodoPaymentsCheckout.DodoPayments.Checkout.open({
      checkoutUrl: "https://test.checkout.dodopayments.com/session/cks_123",
      elementId: "dodo-inline-checkout"
    });
  </script>
</body>
</html>

Update Payment Method

Inline checkoutは、サブスクリプションの決済方法更新をサポートしています。顧客がactive subscriptionの決済方法を更新する必要がある場合や、on-hold subscriptionを再有効化する場合、ページレイアウト内にupdate flowを直接レンダリングできます。

仕組み

Update Payment Method APIを呼び出してpayment_linkを取得します。

// On your server. `client` is the Dodo Payments server SDK (`new DodoPayments()` from the `dodopayments` package).
const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  payment_method: { type: 'new', return_url: 'https://example.com/return' }
});

返されたpayment_linkをcheckoutUrlとして渡し、inline checkoutを開きます。

DodoPayments.Checkout.open({
  checkoutUrl: response.payment_link,
  elementId: "dodo-inline-checkout"
});

inline frameには、決済方法の収集formのみがレンダリングされます。顧客はページを離れずに、新しいカード情報を入力するか、保存済みの決済方法を選択できます。

On-Hold Subscriptionの場合

on_hold statusのサブスクリプションで決済方法を更新すると、Dodo Paymentsは残りの未払い金額に対するchargeを自動的に作成します。再有効化を確認するには、payment.succeededとsubscription.active webhooksを監視します。

const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  payment_method: { type: 'new', return_url: 'https://example.com/return' }
});

if (response.payment_id) {
  // Charge created for remaining dues
  DodoPayments.Checkout.open({
    checkoutUrl: response.payment_link,
    elementId: "dodo-inline-checkout"
  });
}

新しい情報を収集する代わりに既存の保存済み決済方法を使用するには、type: 'existing'とpayment_method_idをUpdate Payment Method APIに渡します。

Error Handling

onEvent callbackには必ずerror handlingを実装してください。

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    if (event.event_type === "checkout.error") {
      console.error("Checkout error:", event.data?.message);
      // Show user-friendly error message
    }
  }
});

error発生時に優れたuser experienceを提供するため、checkout.error eventを必ず処理してください。

Best Practices

Responsive Design: コンテナ要素に十分なwidthとheightがあることを確認します。通常、iframeはコンテナいっぱいに広がります。
Synchronization: checkout.breakdown eventを使用して、カスタム注文概要やpricing tableをcheckout frameに表示される内容と同期します。
Skeleton States: checkout.opened eventが発生するまで、コンテナにloading indicatorを表示します。
Cleanup: componentのunmount時にDodoPayments.Checkout.close()を呼び出し、iframeとevent listenersをクリーンアップします。

dark modeを実装する場合は、inline checkout frameと最適に統合できるよう、背景色に#0d0d0dを使用します。

Payment Status Validation

決済の成功または失敗を判断する際、inline checkout eventsだけに依存しないでください。webhooksやpollingを使用したserver-side validationを必ず実装してください。

Server-Side Validationが不可欠な理由

inline checkout eventsはリアルタイムのfeedbackを提供しますが、決済statusの唯一のsource of truthにしてはいけません。ネットワーク問題、ブラウザのクラッシュ、ユーザーによるページの終了などにより、eventsを受信できない場合があります。信頼性の高い決済validationを実現するには、次の操作を行います。

webhook eventsをリッスンする - Dodo Paymentsは決済statusの変更時にwebhooksを送信します
polling mechanismを実装する - frontendからserverをpollしてstatusの更新を確認します
両方の方法を組み合わせる - webhookをprimary source、pollingをfallbackとして使用します

推奨Architecture

Implementation Steps

1. checkout eventsをリッスンする - ユーザーがpayをクリックしたら、statusのverification準備を開始します。

onEvent: (event) => {
  if (event.event_type === 'checkout.pay_button_clicked') {
    // Start polling your server for confirmed status
    startPolling();
  }
}

2. serverをpollする - webhookによって更新された決済statusをdatabaseで確認するendpointを作成します。

// Poll every 2 seconds until status is confirmed
const interval = setInterval(async () => {
  const { status } = await fetch(`/api/payments/${paymentId}/status`).then(r => r.json());
  if (status === 'succeeded' || status === 'failed') {
    clearInterval(interval);
    handlePaymentResult(status);
  }
}, 2000);

3. server-sideでwebhooksを処理する - Dodoがpayment.succeededまたはpayment.failed webhooksを送信したら、databaseを更新します。詳細はWebhooks documentationを参照してください。

Troubleshooting

Checkout frame is not appearing

elementIdが、DOMに実際に存在するdivのidと一致することを確認する
displayType: 'inline'がInitializeに渡されていることを確認する
checkoutUrlが有効であることを確認する

Taxes are not updating in my UI

checkout.breakdown eventをリッスンしていることを確認する
税額は、ユーザーがcheckout frameで有効な国と郵便番号を入力した後にのみ計算されます

Digital Wallets

Apple Pay、Google Pay、その他のdigital walletsの設定について詳しくは、Digital Walletsページを参照してください。

Apple Payのクイック設定

Domain verificationが必要なのはinline（embedded）checkoutのみです。hosted checkoutでは必要ありません。

Apple Payはoverlay checkoutでは利用できません。

Apple Payはdashboardからdomainごとにverificationします。

Open Wallet domains

Settings → Payment Methodsに移動し、Apple Payの行でManage domainsをクリックします。

Payment Methods設定のApple Pay行にあるManage domainsボタン — Open Wallet domains from the Apple Pay row

Download the domain association file

Wallet domains panelからassociation fileをダウンロードします。

Download fileボタンが表示されたWallet domains panel — Download the Apple Pay domain association file

Register domainをクリックし、inline checkoutを埋め込むdomain（例: shop.example.com）を入力してから、Continueをクリックします。

domainが入力されたRegister a domainフォーム — Register the domain where you embed inline checkout

Host the file on your domain

次の場所でhostします。

https://shop.example.com/.well-known/apple-developer-merchantid-domain-association

HTTPS経由で配信し、redirectなしで到達でき、Content-Type: application/octet-streamまたはtext/plainで配信する必要があります。

Verify the domain

Verify domainをクリックします。Dodo Paymentsがfileがliveであることを確認し、domainをAppleに送信します。

association fileのhost pathとVerify domainボタンが表示されたVerify your domain画面 — Verify the hosted association file

Confirm it's active

statusがActiveになると、そのdomainでApple Payが有効になります。Enabled toggleを使用して、domainごとに有効または無効にします。

ActiveのApple Pay statusとEnabled toggleが表示されたWallet domains一覧 — Verified domains show an Active status

Test the integration

Apple deviceでcheckoutを開く
Apple Pay buttonが表示されることを確認する
test transactionを完了する

Browser Support

Dodo Payments Checkout SDKは次をサポートしています。

Chrome（latest）
Firefox（latest）
Safari（latest）
Edge（latest）
IE11+

InlineとOverlayのCheckout

用途に合ったcheckout typeを選択してください。

Feature	Inline	Overlay
Integration depth	ページに完全に埋め込み	ページ上のmodal
Layout control	完全に制御可能	制限あり
Branding	ページに一致	ページとは別
Implementation effort	高い	低い
Best for	カスタムcheckout page、高conversion flow	素早いintegration、既存page

checkout experienceを最大限に制御し、一貫したbrandingを実現したい場合はinline checkoutを使用します。既存pageへの変更を最小限に抑えて素早くintegrationしたい場合はoverlay checkoutを使用します。

Overlay Checkout

素早いmodalベースのintegrationにはoverlay checkoutを使用します。

Checkout Sessions API

checkout experienceを提供するcheckout sessionを作成します。

Webhooks

webhooksを使用してserver-sideで決済eventsを処理します。

Integration Guide

Dodo Paymentsのintegrationに関する完全なguideです。

さらにサポートが必要な場合は、Discord communityにアクセスするか、developer support teamにお問い合わせください。

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

仕組み

優れたInline Checkoutの条件

Customer Journey

クイックスタート

ステップごとのIntegration

完全なReactの例

API Reference

Initialize

Open Checkout

Close Checkout

Check Status

Events

Checkout Breakdown Data

CDN Implementation

Update Payment Method

仕組み

On-Hold Subscriptionの場合

Error Handling

Best Practices

Payment Status Validation

Server-Side Validationが不可欠な理由

推奨Architecture

Implementation Steps

Troubleshooting

Digital Wallets

Apple Payのクイック設定

Browser Support

InlineとOverlayのCheckout

関連リソース

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

​仕組み

​優れたInline Checkoutの条件

​Customer Journey

​クイックスタート

​ステップごとのIntegration

​完全なReactの例

​API Reference

​Initialize

​Open Checkout

​Close Checkout

​Check Status

​Events

​Checkout Breakdown Data

​CDN Implementation

​Update Payment Method

​仕組み

​On-Hold Subscriptionの場合

​Error Handling

​Best Practices

​Payment Status Validation

​Server-Side Validationが不可欠な理由

​推奨Architecture

​Implementation Steps

​Troubleshooting

​Digital Wallets

​Apple Payのクイック設定

​Browser Support

​InlineとOverlayのCheckout

​関連リソース

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

仕組み

優れたInline Checkoutの条件

Customer Journey

クイックスタート

ステップごとのIntegration

完全なReactの例

API Reference

Initialize

Open Checkout

Close Checkout

Check Status

Events

Checkout Breakdown Data

CDN Implementation

Update Payment Method

仕組み

On-Hold Subscriptionの場合

Error Handling

Best Practices

Payment Status Validation

Server-Side Validationが不可欠な理由

推奨Architecture

Implementation Steps

Troubleshooting

Digital Wallets

Apple Payのクイック設定

Browser Support

InlineとOverlayのCheckout

関連リソース