インラインチェックアウト - Dodo Payments Documentation

概要

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

アプリやウェブサイトと完全に統合されたチェックアウト体験を作成する
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
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
    manualRedirect?: boolean;
    payButtonText?: string;
  };
}

オプション	タイプ	必須	説明
`checkoutUrl`	`string`	はい	チェックアウトセッションのURL。
`elementId`	`string`	はい	チェックアウトを表示するDOM要素の`id`。
`options.showTimer`	`boolean`	いいえ	チェックアウトタイマーを表示または非表示にします。デフォルトは`true`です。無効にすると、セッションが期限切れになると`checkout.link_expired`イベントが受信されます。
`options.showSecurityBadge`	`boolean`	いいえ	セキュリティバッジを表示または非表示にします。デフォルトは`true`です。
`options.manualRedirect`	`boolean`	いいえ	有効にすると、チェックアウトは完了後に自動的にリダイレクトされません。代わりに、`checkout.status`および`checkout.redirect_requested`イベントを受信して、リダイレクトを自分で処理します。
`options.payButtonText`	`string`	いいえ	支払いボタンに表示するカスタムテキスト。

メソッド

チェックアウトを開く

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

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

チェックアウトの動作をカスタマイズするために追加のオプションを渡すこともできます:

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout",
  options: {
    showTimer: false,
    showSecurityBadge: false,
    manualRedirect: true,
    payButtonText: "Pay Now",
  },
});

manualRedirectを使用する場合、onEventコールバック内でチェックアウトの完了を処理します:

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    if (event.event_type === "checkout.status") {
      const status = event.data?.message?.status;
      // Handle status: "succeeded", "failed", or "processing"
    }
    if (event.event_type === "checkout.redirect_requested") {
      const redirectUrl = event.data?.message?.redirect_to;
      // Redirect the customer manually
      window.location.href = redirectUrl;
    }
    if (event.event_type === "checkout.link_expired") {
      // Handle expired checkout session
    }
  },
});

チェックアウトを閉じる

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

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.link_expired`	チェックアウトセッションが期限切れになったときに発火します。`showTimer`が`false`に設定されている場合のみ受信されます。
`checkout.status`	`manualRedirect`が有効なときに発火します。チェックアウトのステータス（`succeeded`、`failed`、または`processing`）を含みます。
`checkout.redirect_requested`	`manualRedirect`が有効なときに発火します。顧客をリダイレクトするためのURLを含みます。

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

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
}

チェックアウトステータスイベントデータ

manualRedirectが有効なとき、次のデータを持つcheckout.statusイベントを受信します:

interface CheckoutStatusEventData {
  message: {
    status?: "succeeded" | "failed" | "processing";
  };
}

チェックアウトリダイレクト要求イベントデータ

manualRedirectが有効なとき、次のデータを持つcheckout.redirect_requestedイベントを受信します:

interface CheckoutRedirectRequestedEventData {
  message: {
    redirect_to?: string;
  };
}

内訳イベントの理解

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>

テーマのカスタマイズ

チェックアウトの外観は、チェックアウトを開くときに themeConfig オブジェクトを options パラメータに渡すことでカスタマイズできます。テーマ設定は、ライトモードとダークモードの両方をサポートしており、色、境界線、テキスト、ボタン、ボーダー半径をカスタマイズできます。

基本テーマ設定

DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        textPrimary: "#344054",
        buttonPrimary: "#A6E500",
      },
      dark: {
        bgPrimary: "#0D0D0D",
        textPrimary: "#FFFFFF",
        buttonPrimary: "#A6E500",
      },
      radius: "8px",
    },
  },
});

完全なテーマ設定

利用可能なすべてのテーマプロパティ：

DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        // Background colors
        bgPrimary: "#FFFFFF",        // Primary background color
        bgSecondary: "#F9FAFB",      // Secondary background color (e.g., tabs)
        
        // Border colors
        borderPrimary: "#D0D5DD",     // Primary border color
        borderSecondary: "#6B7280",  // Secondary border color
        inputFocusBorder: "#D0D5DD", // Input focus border color
        
        // Text colors
        textPrimary: "#344054",       // Primary text color
        textSecondary: "#6B7280",    // Secondary text color
        textPlaceholder: "#667085",  // Placeholder text color
        textError: "#D92D20",        // Error text color
        textSuccess: "#10B981",      // Success text color
        
        // Button colors
        buttonPrimary: "#A6E500",           // Primary button background
        buttonPrimaryHover: "#8CC500",      // Primary button hover state
        buttonTextPrimary: "#0D0D0D",       // Primary button text color
        buttonSecondary: "#F3F4F6",         // Secondary button background
        buttonSecondaryHover: "#E5E7EB",     // Secondary button hover state
        buttonTextSecondary: "#344054",     // Secondary button text color
      },
      dark: {
        // Background colors
        bgPrimary: "#0D0D0D",
        bgSecondary: "#1A1A1A",
        
        // Border colors
        borderPrimary: "#323232",
        borderSecondary: "#D1D5DB",
        inputFocusBorder: "#323232",
        
        // Text colors
        textPrimary: "#FFFFFF",
        textSecondary: "#909090",
        textPlaceholder: "#9CA3AF",
        textError: "#F97066",
        textSuccess: "#34D399",
        
        // Button colors
        buttonPrimary: "#A6E500",
        buttonPrimaryHover: "#8CC500",
        buttonTextPrimary: "#0D0D0D",
        buttonSecondary: "#2A2A2A",
        buttonSecondaryHover: "#3A3A3A",
        buttonTextSecondary: "#FFFFFF",
      },
      radius: "8px", // Border radius for inputs, buttons, and tabs
    },
  },
});

ライトモードのみ

ライトテーマのみをカスタマイズしたい場合：

DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        textPrimary: "#000000",
        buttonPrimary: "#0070F3",
      },
      radius: "12px",
    },
  },
});

ダークモードのみ

ダークテーマのみをカスタマイズしたい場合：

DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      dark: {
        bgPrimary: "#000000",
        textPrimary: "#FFFFFF",
        buttonPrimary: "#0070F3",
      },
      radius: "12px",
    },
  },
});

部分的なテーマオーバーライド

特定のプロパティのみをオーバーライドできます。指定しないプロパティにはデフォルト値が使用されます：

DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        buttonPrimary: "#FF6B6B", // Only override primary button color
      },
      radius: "16px", // Override border radius
    },
  },
});

他のオプションとのテーマ設定

テーマ設定を他のチェックアウトオプションと組み合わせることができます：

DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    showTimer: true,
    showSecurityBadge: true,
    manualRedirect: false,
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        buttonPrimary: "#A6E500",
      },
      dark: {
        bgPrimary: "#0D0D0D",
        buttonPrimary: "#A6E500",
      },
      radius: "8px",
    },
  },
});

TypeScript タイプ

TypeScript ユーザーのために、すべてのテーマ設定タイプがエクスポートされています：

import { ThemeConfig, ThemeModeConfig } from "dodopayments-checkout";

const themeConfig: ThemeConfig = {
  light: {
    bgPrimary: "#FFFFFF",
    // ... other properties
  },
  dark: {
    bgPrimary: "#0D0D0D",
    // ... other properties
  },
  radius: "8px",
};

エラーハンドリング

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 とイベントリスナーをクリーンアップします。

ダークモードの実装には、インラインチェックアウトフレームとの視覚的統合を最適化するために、#0d0d0d を背景色として使用することをお勧めします。

トラブルシューティング

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

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

UI で税金が更新されない

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

Apple Pay の有効化

Apple Pay を使用すると、顧客は保存された支払い方法を使用して迅速かつ安全に支払いを完了できます。有効にすると、顧客はサポートされているデバイスのチェックアウトオーバーレイから直接 Apple Pay モーダルを起動できます。

Apple Pay は、iOS 17+、iPadOS 17+、macOS の Safari 17+ でサポートされています。

本番環境でドメインの Apple Pay を有効にするには、次の手順に従ってください：

Apple Pay ドメイン関連ファイルのダウンロードとアップロード

Apple Pay ドメイン関連ファイルをダウンロードします。ファイルを /.well-known/apple-developer-merchantid-domain-association にあるウェブサーバーにアップロードします。たとえば、あなたのウェブサイトが example.com の場合、ファイルを https://example.com/well-known/apple-developer-merchantid-domain-association で利用できるようにします。

Apple Pay の有効化をリクエスト

次の情報を含めて [email protected] にメールします：

あなたの本番ドメイン URL (例: https://example.com)
あなたのドメインの Apple Pay を有効にするリクエスト

Apple Pay があなたのドメインに対して有効になったら、1-2 営業日以内に確認の連絡が届きます。

Apple Pay の利用可能性を確認

確認の連絡を受け取った後、チェックアウトで Apple Pay をテストします：

サポートされているデバイス (iOS 17+、iPadOS 17+、または macOS の Safari 17+) でチェックアウトを開きます。
Apple Pay ボタンが支払いオプションとして表示されることを確認します。
完全な支払いフローをテストします。

Apple Pay は、本番環境で支払いオプションとして表示される前に、あなたのドメインで有効にする必要があります。Apple Pay を提供する予定がある場合は、ライブにする前にサポートに連絡してください。

ブラウザサポート

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

Chrome (最新)
Firefox (最新)
Safari (最新)
Edge (最新)
IE11+

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

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

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

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

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

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

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

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

Webhooks

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

統合ガイド

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

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

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

​概要

​仕組み

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

​顧客の旅

​クイックスタート

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

​完全なReactの例

​APIリファレンス

​設定

​初期化オプション

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

​メソッド

​チェックアウトを開く

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

​ステータスを確認

​イベント

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

​チェックアウトステータスイベントデータ

​チェックアウトリダイレクト要求イベントデータ

​内訳イベントの理解

​実装オプション

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

​CDN実装

​テーマのカスタマイズ

​基本テーマ設定

​完全なテーマ設定

​ライトモードのみ

​ダークモードのみ

​部分的なテーマオーバーライド

​他のオプションとのテーマ設定

​TypeScript タイプ

​エラーハンドリング

​ベストプラクティス

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

​Apple Pay の有効化

​ブラウザサポート

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

​関連リソース

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

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

Webhooks

統合ガイド

概要

仕組み

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

顧客の旅

クイックスタート

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

完全なReactの例

APIリファレンス

設定

初期化オプション

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

メソッド

チェックアウトを開く

チェックアウトを閉じる

ステータスを確認

イベント

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

チェックアウトステータスイベントデータ

チェックアウトリダイレクト要求イベントデータ

内訳イベントの理解

実装オプション

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

CDN実装

テーマのカスタマイズ

基本テーマ設定

完全なテーマ設定

ライトモードのみ

ダークモードのみ

部分的なテーマオーバーライド

他のオプションとのテーマ設定

TypeScript タイプ

エラーハンドリング

ベストプラクティス

トラブルシューティング

Apple Pay の有効化

ブラウザサポート

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

関連リソース