メインコンテンツへスキップ

​
概要

Dodo Payments Checkout SDKは、私たちの支払いオーバーレイをあなたのウェブアプリケーションにシームレスに統合する方法を提供します。TypeScriptとモダンなウェブ標準で構築されており、リアルタイムイベント処理とカスタマイズ可能なテーマを備えた堅牢な決済ソリューションを提供します。
オーバーレイチェックアウトカバー画像

​
デモ

インタラクティブデモ

ライブデモでオーバーレイチェックアウトの動作を確認してください。

​
クイックスタート

Dodo Payments Checkout SDKを数行のコードで始めましょう： 
import { DodoPayments } from "dodopayments-checkout";

// Initialize the SDK
DodoPayments.Initialize({
  mode: "test", // 'test' or 'live'
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});

// Open checkout
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
});
チェックアウトセッション作成APIからチェックアウトURLを取得してください。

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

1

SDKをインストール

お好みのパッケージマネージャーを使用してDodo Payments Checkout SDKをインストールします：
npm install dodopayments-checkout
2

SDKを初期化

アプリケーション内でSDKを初期化します。通常はメインコンポーネントまたはアプリのエントリポイントで行います：
import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test", // Change to 'live' for production
  onEvent: (event) => {
    console.log("Checkout event:", event);
    
    // Handle different events
    switch (event.event_type) {
      case "checkout.opened":
        // Checkout overlay has been opened
        break;
      case "checkout.closed":
        // Checkout has been closed
        break;
      case "checkout.error":
        // Handle errors
        console.error("Checkout error:", event.data?.message);
        break;
    }
  },
});
チェックアウトを開く前に必ずSDKを初期化してください。初期化はアプリケーションが読み込まれるときに一度行う必要があります。
3

チェックアウトボタンコンポーネントを作成

チェックアウトオーバーレイを開くコンポーネントを作成します：
// components/CheckoutButton.tsx
"use client";

import { Button } from "@/components/ui/button";
import { DodoPayments } from "dodopayments-checkout";
import { useEffect, useState } from "react";

export function CheckoutButton() {
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // Initialize the SDK
    DodoPayments.Initialize({
      mode: "test",
      onEvent: (event) => {
        switch (event.event_type) {
          case "checkout.opened":
            setIsLoading(false);
            break;
          case "checkout.error":
            setIsLoading(false);
            console.error("Checkout error:", event.data?.message);
            break;
        }
      },
    });
  }, []);

  const handleCheckout = async () => {
    try {
      setIsLoading(true);
      await DodoPayments.Checkout.open({
        checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
      });
    } catch (error) {
      console.error("Failed to open checkout:", error);
      setIsLoading(false);
    }
  };

  return (
    <Button 
      onClick={handleCheckout}
      disabled={isLoading}
    >
      {isLoading ? "Loading..." : "Checkout Now"}
    </Button>
  );
}
4

ページにチェックアウトを追加

アプリケーション内でチェックアウトボタンコンポーネントを使用します：
// app/page.tsx
import { CheckoutButton } from "@/components/CheckoutButton";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1>Welcome to Our Store</h1>
      <CheckoutButton />
    </main>
  );
}
5

成功ページと失敗ページを処理

チェックアウトリダイレクトを処理するページを作成します：
// app/success/page.tsx
export default function SuccessPage() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center">
      <h1>Payment Successful!</h1>
      <p>Thank you for your purchase.</p>
    </div>
  );
}

// app/failure/page.tsx
export default function FailurePage() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center">
      <h1>Payment Failed</h1>
      <p>Please try again or contact support.</p>
    </div>
  );
}
6

統合をテスト

  1. 開発サーバーを起動します：
npm run dev
  1. チェックアウトフローをテストします：
    • チェックアウトボタンをクリック
    • オーバーレイが表示されることを確認
    • テストクレデンシャルを使用して決済フローをテスト
    • リダイレクトが正しく機能することを確認
ブラウザのコンソールにチェックアウトイベントが記録されているのを確認する必要があります。
7

本番環境に移行

本番環境の準備ができたら：
  1. モードを'live'に変更します：
DodoPayments.Initialize({
  mode: "live",
  onEvent: (event) => {
    console.log("Checkout event:", event);
  }
});
  1. バックエンドからライブチェックアウトセッションを使用するようにチェックアウトURLを更新します
  2. 本番環境で完全なフローをテストします
  3. イベントとエラーを監視します

​
APIリファレンス

​
設定

​
初期化オプション

interface InitializeOptions {
  mode: "test" | "live";
  onEvent: (event: CheckoutEvent) => void;
}
オプション型必須説明
mode"test" | "live"はい環境モード：'test'は開発用、'live'は本番用
onEventfunctionはいチェックアウトイベントを処理するためのコールバック関数

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

interface CheckoutOptions {
  checkoutUrl: string;
}
オプション型必須説明
checkoutUrlstringはいチェックアウトセッション作成APIからのチェックアウトセッションURL

​
メソッド

​
チェックアウトを開く

指定されたチェックアウトセッションURLでチェックアウトオーバーレイを開きます。 
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
});

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

プログラムでチェックアウトオーバーレイを閉じます。 
DodoPayments.Checkout.close();

​
ステータスを確認

チェックアウトオーバーレイが現在開いているかどうかを返します。 
const isOpen = DodoPayments.Checkout.isOpen();
// Returns: boolean

​
イベント

SDKは、onEventコールバックを通じてリッスンできるリアルタイムイベントを提供します： 
DodoPayments.Initialize({
  onEvent: (event: CheckoutEvent) => {
    switch (event.event_type) {
      case "checkout.opened":
        // Checkout overlay has been opened
        break;
      case "checkout.payment_page_opened":
        // Payment page has been displayed
        break;
      case "checkout.customer_details_submitted":
        // Customer and billing details submitted
        break;
      case "checkout.closed":
        // Checkout has been closed
        break;
      case "checkout.redirect":
        // Checkout will perform a redirect
        break;
      case "checkout.error":
        // An error occurred
        console.error("Error:", event.data?.message);
        break;
    }
  }
});
イベントタイプ説明
checkout.openedチェックアウトオーバーレイが開かれました
checkout.payment_page_opened支払いページが表示されました
checkout.customer_details_submitted顧客および請求情報が送信されました
checkout.closedチェックアウトオーバーレイが閉じられました
checkout.redirectチェックアウトがリダイレクトを実行します
checkout.errorチェックアウト中にエラーが発生しました

​
実装オプション

​
パッケージマネージャーによるインストール

ステップバイステップの統合ガイドに示されているように、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 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", // Change to 'live' for production
            onEvent: (event) => {
                console.log('Checkout event:', event);
            }
        });
    </script>
</head>
<body>
    <button onclick="openCheckout()">Checkout Now</button>

    <script>
        function openCheckout() {
            DodoPaymentsCheckout.DodoPayments.Checkout.open({
                checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
            });
        }
    </script>
</body>
</html>

​
TypeScriptサポート

SDKはTypeScriptで記述されており、包括的な型定義が含まれています。すべての公開APIは、より良い開発者体験とIntelliSenseサポートのために完全に型付けされています。 
import { DodoPayments, CheckoutEvent } from "dodopayments-checkout";

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

​
エラーハンドリング

SDKは、イベントシステムを通じて詳細なエラー情報を提供します。onEventコールバック内で適切なエラーハンドリングを常に実装してください： 
DodoPayments.Initialize({
  onEvent: (event: CheckoutEvent) => {
    if (event.event_type === "checkout.error") {
      console.error("Checkout error:", event.data?.message);
      // Handle error appropriately
      // You may want to show a user-friendly error message
      // or retry the checkout process
    }
  }
});
エラーが発生した場合に良好なユーザー体験を提供するために、常にcheckout.errorイベントを処理してください。

​
ベストプラクティス

  1. 一度だけ初期化：アプリケーションが読み込まれるときにSDKを一度だけ初期化し、すべてのチェックアウト試行で初期化しないでください
  2. エラーハンドリング：イベントコールバック内で常に適切なエラーハンドリングを実装してください
  3. テストモード：開発中はtestモードを使用し、本番環境の準備ができたときにのみliveに切り替えてください
  4. イベント処理：完全なユーザー体験のためにすべての関連イベントを処理してください
  5. 有効なURL：常にcreate checkout session APIからの有効なチェックアウトURLを使用してください
  6. TypeScript：より良い型安全性と開発者体験のためにTypeScriptを使用してください
  7. ローディング状態：チェックアウトが開いている間はローディング状態を表示してUXを改善してください

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

考えられる原因：
  • open()を呼び出す前にSDKが初期化されていない
  • 無効なチェックアウトURL
  • コンソール内のJavaScriptエラー
  • ネットワーク接続の問題
解決策：
  • チェックアウトを開く前にSDKの初期化が行われていることを確認してください
  • コンソールエラーを確認してください
  • チェックアウトURLが有効であり、create checkout session APIからのものであることを確認してください
  • ネットワーク接続を確認してください
考えられる原因：
  • イベントハンドラーが正しく設定されていない
  • イベントの伝播を妨げるJavaScriptエラー
  • SDKが正しく初期化されていない
解決策：
  • Initialize()内でイベントハンドラーが正しく構成されていることを確認してください
  • JavaScriptエラーのためにブラウザコンソールを確認してください
  • SDKの初期化が正常に完了したことを確認してください
  • 最初にシンプルなイベントハンドラーでテストしてください
考えられる原因：
  • アプリケーションスタイルとのCSSの競合
  • テーマ設定が正しく適用されていない
  • レスポンシブデザインの問題
解決策：
  • ブラウザのDevToolsでCSSの競合を確認してください
  • テーマ設定が正しいことを確認してください
  • 異なる画面サイズでテストしてください
  • オーバーレイとのz-indexの競合がないことを確認してください

​
ブラウザサポート

Dodo Payments Checkout SDKは以下のブラウザをサポートしています：
  • Chrome（最新）
  • Firefox（最新）
  • Safari（最新）
  • Edge（最新）
  • IE11+
Apple Payは現在オーバーレイチェックアウト体験でサポートされていません。将来のリリースでApple Payのサポートを追加する予定です。
さらなるヘルプが必要な場合は、Discordコミュニティを訪れるか、開発者サポートチームにお問い合わせください。