インラインチェックアウト

概要

インラインチェックアウトを使用すると、ウェブサイトやアプリケーションにシームレスに統合されたチェックアウト体験を作成できます。オーバーレイチェックアウトとは異なり、インラインチェックアウトは支払いフォームをページレイアウトに直接埋め込みます。インラインチェックアウトを使用すると、次のことができます：

アプリやウェブサイトと完全に統合されたチェックアウト体験を作成する
Dodo Paymentsが顧客と支払い情報を安全にキャプチャする最適化されたチェックアウトフレームを提供する
Dodo Paymentsからのアイテム、合計、その他の情報をページに表示する
SDKメソッドとイベントを使用して高度なチェックアウト体験を構築する

仕組み

インラインチェックアウトは、ウェブサイトやアプリに安全なDodo Paymentsフレームを埋め込むことで機能します。チェックアウトフレームは、顧客情報の収集と支払い詳細のキャプチャを処理します。あなたのページには、アイテムリスト、合計、チェックアウトの内容を変更するためのオプションが表示されます。SDKを使用すると、ページとチェックアウトフレームが相互にやり取りできます。 Dodo Paymentsは、チェックアウトが完了すると自動的にサブスクリプションを作成し、あなたがプロビジョニングできるようにします。

インラインチェックアウトフレームは、すべての機密支払い情報を安全に処理し、あなたの側での追加認証なしにPCI準拠を保証します。

良いインラインチェックアウトとは？

顧客が誰から購入しているのか、何を購入しているのか、いくら支払っているのかを知ることが重要です。コンプライアンスがあり、コンバージョンに最適化されたインラインチェックアウトを構築するには、実装に次の要素を含める必要があります：

必要な要素がラベル付けされたインラインチェックアウトレイアウトの例

定期情報：定期的な場合、どのくらいの頻度で繰り返されるかと更新時の合計金額。トライアルの場合、トライアルの期間。
アイテムの説明：購入されるものの説明。
取引合計：小計、総税、合計金額を含む取引合計。通貨も含めることを忘れないでください。
Dodo Paymentsのフッター：Dodo Paymentsに関する情報、販売条件、プライバシーポリシーを含む完全なインラインチェックアウトフレーム。
返金ポリシー：Dodo Paymentsの標準返金ポリシーと異なる場合は、返金ポリシーへのリンク。

常に完全なインラインチェックアウトフレームを表示してください。法的情報を削除または隠すことは、コンプライアンス要件に違反します。

顧客の旅

チェックアウトフローは、チェックアウトセッションの設定によって決まります。チェックアウトセッションをどのように設定するかによって、顧客はすべての情報が1ページに表示されるか、複数のステップに分かれるチェックアウトを体験します。

顧客がチェックアウトを開く

アイテムまたは既存のトランザクションを渡すことでインラインチェックアウトを開くことができます。SDKを使用してページ上の情報を表示および更新し、顧客のインタラクションに基づいてアイテムを更新するためのSDKメソッドを使用します。

顧客が詳細を入力する

インラインチェックアウトは、最初に顧客にメールアドレスを入力し、国を選択し、（必要に応じて）郵便番号を入力するように求めます。このステップでは、税金と利用可能な支払いオプションを決定するために必要なすべての情報を収集します。顧客の詳細を事前に入力し、保存された住所を提示して体験をスムーズにすることができます。

顧客が支払い方法を選択する

詳細を入力した後、顧客には利用可能な支払い方法と支払いフォームが表示されます。オプションには、クレジットカードまたはデビットカード、PayPal、Apple Pay、Google Pay、そして顧客の所在地に基づくその他のローカル支払い方法が含まれる場合があります。利用可能な場合は、保存された支払い方法を表示してチェックアウトを迅速化します。

チェックアウト完了

Dodo Paymentsは、すべての支払いをその販売に最適なアクワイアラーにルーティングし、成功の可能性を最大限に高めます。顧客は、あなたが構築できる成功ワークフローに入ります。

Dodo Paymentsがサブスクリプションを作成

Dodo Paymentsは、顧客のために自動的にサブスクリプションを作成し、あなたがプロビジョニングできるようにします。顧客が使用した支払い方法は、更新やサブスクリプションの変更のためにファイルに保持されます。

クイックスタート

Dodo Paymentsのインラインチェックアウトを数行のコードで始めましょう：

import { DodoPayments } from "dodopayments-checkout";

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

// Open checkout in a specific container
DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout" // ID of the container element
});

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

ステップバイステップの統合ガイド

SDKをインストール

Dodo Payments Checkout SDKをインストールします：

npm install dodopayments-checkout

インライン表示のためにSDKを初期化

SDKを初期化し、 displayType: 'inline' を指定します。また、リアルタイムの税金および合計計算でUIを更新するために checkout.breakdown イベントをリッスンする必要があります。

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.
    }
  },
});

コンテナ要素を作成

チェックアウトフレームが挿入されるHTMLに要素を追加します：

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

チェックアウトを開く

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

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

統合をテスト

開発サーバーを起動します：

npm run dev

チェックアウトフローをテストします：
- インラインフレームにメールアドレスと住所の詳細を入力します。
- カスタム注文概要がリアルタイムで更新されることを確認します。
- テスト資格情報を使用して支払いフローをテストします。
- リダイレクトが正しく機能することを確認します。

checkout.breakdown イベントがブラウザのコンソールに記録されているのが見えるはずです。 onEvent コールバックにコンソールログを追加した場合。

本番環境に移行

本番環境の準備ができたら：

モードを 'live' に変更します：

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

チェックアウトURLをバックエンドからのライブチェックアウトセッションを使用するように更新します。
本番環境で完全なフローをテストします。

完全なReactの例

この例では、インラインチェックアウトとともにカスタム注文概要を実装し、 checkout.breakdown イベントを使用して同期を保つ方法を示します。

"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.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 && (
            <div className="flex justify-between">
              <span>Subtotal</span>
              <span>{format(breakdown.subTotal, currency)}</span>
            </div>
          )}
          {breakdown.discount && (
            <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) && (
            <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リファレンス

設定

初期化オプション

interface InitializeOptions {
  mode: "test" | "live";
  displayType: "inline"; // Required for inline checkout
  onEvent: (event: CheckoutEvent) => void;
}

オプション	タイプ	必須	説明
`mode`	`"test" \| "live"`	はい	環境モード。
`displayType`	`"inline" \| "overlay"`	はい	チェックアウトを埋め込むには `"inline"` に設定する必要があります。
`onEvent`	`function`	はい	チェックアウトイベントを処理するためのコールバック関数。

チェックアウトオプション

interface CheckoutOptions {
  checkoutUrl: string;
  elementId: string; // Required for inline checkout
}

オプション	タイプ	必須	説明
`checkoutUrl`	`string`	はい	チェックアウトセッションURL。
`elementId`	`string`	はい	チェックアウトがレンダリングされるDOM要素の `id` 。

メソッド

チェックアウトを開く

指定されたコンテナにチェックアウトフレームを開きます。

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

チェックアウトを閉じる

プログラムでチェックアウトフレームを削除し、イベントリスナーをクリーンアップします。

DodoPayments.Checkout.close();

ステータスを確認

チェックアウトフレームが現在挿入されているかどうかを返します。

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

イベント

SDKは onEvent コールバックを通じてリアルタイムイベントを提供します。インラインチェックアウトの場合、 checkout.breakdown はUIを同期させるのに特に便利です。

イベントタイプ	説明
`checkout.opened`	チェックアウトフレームが読み込まれました。
`checkout.breakdown`	価格、税金、または割引が更新されたときに発生します。
`checkout.customer_details_submitted`	顧客の詳細が送信されました。
`checkout.redirect`	チェックアウトがリダイレクトを実行します（例：銀行ページへ）。
`checkout.error`	チェックアウト中にエラーが発生しました。

チェックアウトの内訳データ

checkout.breakdown イベントは次のデータを提供します：

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
}

内訳イベントの理解

checkout.breakdown イベントは、アプリケーションのUIをDodo Paymentsのチェックアウト状態と同期させるための主要な方法です。 発生するタイミング：

初期化時：チェックアウトフレームが読み込まれ、準備が整った直後。
住所変更時：顧客が国を選択したり、税金の再計算を引き起こす郵便番号を入力したとき。

フィールドの詳細：

フィールド	説明
`subTotal`	割引や税金が適用される前のセッション内のすべてのラインアイテムの合計。
`discount`	適用されたすべての割引の合計値。
`tax`	計算された税額。 `inline` モードでは、ユーザーが住所フィールドとインタラクションする際に動的に更新されます。
`total`	セッションの基本通貨での `subTotal - discount + tax` の数学的結果。
`currency`	標準の小計、割引、税金の値に対するISO通貨コード（例： `"USD"`）。
`finalTotal`	顧客が実際に請求される金額。これは、基本価格の内訳に含まれない追加の外国為替調整やローカル支払い方法手数料を含む場合があります。
`finalTotalCurrency`	顧客が実際に支払っている通貨。これは、購買力平価またはローカル通貨変換がアクティブな場合、 `currency` とは異なる場合があります。

統合のための重要なヒント：

通貨フォーマット：価格は常に最小通貨単位（例：USDの場合はセント、JPYの場合は円）で整数として返されます。表示するには、100（または適切な10の累乗）で割るか、 Intl.NumberFormat のようなフォーマットライブラリを使用します。
初期状態の処理：チェックアウトが最初に読み込まれるとき、 tax と discount は、ユーザーが請求情報を提供するかコードを適用するまで 0 または null である可能性があります。UIはこれらの状態を適切に処理する必要があります（例：ダッシュ — を表示するか、行を隠す）。
「最終合計」と「合計」： total は標準の価格計算を提供しますが、 finalTotal はトランザクションの真実の源です。 finalTotal が存在する場合、それは顧客のカードに請求される正確な金額を反映し、動的な調整を含みます。
リアルタイムフィードバック： tax フィールドを使用して、税金がリアルタイムで計算されていることをユーザーに示します。これにより、チェックアウトページに「ライブ」感が生まれ、住所入力ステップ中の摩擦が軽減されます。

実装オプション

パッケージマネージャーのインストール

npm、yarn、またはpnpmを使用して、ステップバイステップの統合ガイドに示されているようにインストールします。

CDN実装

ビルドステップなしで迅速に統合するには、CDNを使用できます：

<!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>
    
    <!-- Load DodoPayments -->
    <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
    <script>
        // Initialize the SDK
        DodoPaymentsCheckout.DodoPayments.Initialize({
            mode: "test",
            displayType: "inline",
            onEvent: (event) => {
                console.log('Checkout event:', event);
            }
        });
    </script>
</head>
<body>
    <div id="dodo-inline-checkout"></div>

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

TypeScriptサポート

SDKはTypeScriptで記述されており、包括的な型定義が含まれています。

import { DodoPayments, CheckoutEvent } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    // event is fully typed
    console.log(event.event_type, event.data);
  },
});

エラーハンドリング

SDKはイベントシステムを通じて詳細なエラー情報を提供します。 onEvent コールバックで適切なエラーハンドリングを常に実装してください：

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

問題が発生したときに良好なユーザーエクスペリエンスを提供するために、常に checkout.error イベントを処理してください。

ベストプラクティス

レスポンシブデザイン：コンテナ要素に十分な幅と高さがあることを確認してください。iframeは通常、そのコンテナに合わせて拡張されます。
同期： checkout.breakdown イベントを使用して、カスタム注文概要や価格表をチェックアウトフレームでユーザーが見るものと同期させます。
スケルトン状態： checkout.opened イベントが発生するまで、コンテナ内にローディングインジケーターを表示します。
クリーンアップ：コンポーネントがアンマウントされるときに DodoPayments.Checkout.close() を呼び出して、iframeとイベントリスナーをクリーンアップします。

トラブルシューティング

チェックアウトフレームが表示されない

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

税金がUIで更新されない

checkout.breakdown イベントをリッスンしていることを確認してください。
税金は、ユーザーがチェックアウトフレームに有効な国と郵便番号を入力した後にのみ計算されます。

ブラウザサポート

Dodo Payments Checkout SDKは、以下のブラウザをサポートしています：

Chrome（最新）
Firefox（最新）
Safari（最新）
Edge（最新）
IE11+

Apple Payは現在、インラインチェックアウト体験ではサポートされていません。将来のリリースでApple Payのサポートを追加する予定です。

インラインとオーバーレイチェックアウト

ユースケースに最適なチェックアウトタイプを選択してください：

機能	インラインチェックアウト	オーバーレイチェックアウト
統合の深さ	ページに完全に埋め込まれている	ページの上にモーダル
レイアウト制御	完全な制御	限定的
ブランド化	シームレス	ページから分離
実装の手間	高い	低い
最適	カスタムチェックアウトページ、高コンバージョンフロー	迅速な統合、既存のページ

チェックアウト体験とブランドをシームレスに最大限に制御したい場合は、インラインチェックアウトを使用してください。既存のページに最小限の変更で迅速に統合したい場合は、オーバーレイチェックアウトを使用してください。

オーバーレイチェックアウト

モーダルベースの迅速な統合にはオーバーレイチェックアウトを使用してください。

チェックアウトセッションAPI

チェックアウト体験を強化するためにチェックアウトセッションを作成します。

Webhook

Webhookを使用してサーバー側で支払いイベントを処理します。

統合ガイド

Dodo Paymentsの統合に関する完全なガイド。

さらなるサポートが必要な場合は、Discordコミュニティを訪れるか、開発者サポートチームにお問い合わせください。

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

概要

仕組み

良いインラインチェックアウトとは？

顧客の旅

クイックスタート

ステップバイステップの統合ガイド

完全なReactの例

APIリファレンス

設定

初期化オプション

チェックアウトオプション

メソッド

チェックアウトを開く

チェックアウトを閉じる

ステータスを確認

イベント

チェックアウトの内訳データ

内訳イベントの理解

実装オプション

パッケージマネージャーのインストール

CDN実装

TypeScriptサポート

エラーハンドリング

ベストプラクティス

トラブルシューティング

ブラウザサポート

インラインとオーバーレイチェックアウト

関連リソース

オーバーレイチェックアウト

チェックアウトセッションAPI

Webhook

統合ガイド

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

​概要

​仕組み

​良いインラインチェックアウトとは？

​顧客の旅

​クイックスタート

​ステップバイステップの統合ガイド

​完全なReactの例

​APIリファレンス

​設定

​初期化オプション

​チェックアウトオプション

​メソッド

​チェックアウトを開く

​チェックアウトを閉じる

​ステータスを確認

​イベント

​チェックアウトの内訳データ

​内訳イベントの理解

​実装オプション

​パッケージマネージャーのインストール

​CDN実装

​TypeScriptサポート

​エラーハンドリング

​ベストプラクティス

​トラブルシューティング

​ブラウザサポート

​インラインとオーバーレイチェックアウト

​関連リソース

オーバーレイチェックアウト

チェックアウトセッションAPI

Webhook

統合ガイド

概要

仕組み

良いインラインチェックアウトとは？

顧客の旅

クイックスタート

ステップバイステップの統合ガイド

完全なReactの例

APIリファレンス

設定

初期化オプション

チェックアウトオプション

メソッド

チェックアウトを開く

チェックアウトを閉じる

ステータスを確認

イベント

チェックアウトの内訳データ

内訳イベントの理解

実装オプション

パッケージマネージャーのインストール

CDN実装

TypeScriptサポート

エラーハンドリング

ベストプラクティス

トラブルシューティング

ブラウザサポート

インラインとオーバーレイチェックアウト

関連リソース