メインコンテンツへスキップ
チェックアウトページ
Dodo Paymentsのチェックアウトは、デジタル製品やSaaSビジネス向けに設計された、コンバージョン最適化かつグローバルコンプライアンス対応のチェックアウトです。複数通貨、言語、税金、割引、アドオン、およびビジネスに優しいコンプライアンスワークフローをサポートします。

Checkout Sessions API

ホスト型チェックアウトセッションをプログラム的に作成します。

Preview Checkout

セッションを作成する前に価格と税金を計算します。

Payment Methods

サポートされている支払い方法や設定オプション。

適応通貨

適応通貨により、顧客は好みの現地通貨で支払うことができ、信頼性とコンバージョン率が向上します。

仕組み

  1. 有効化: 設定 → ビジネス からアダプティブ通貨を有効にする
  2. 選択: お客様はチェックアウトで直接通貨を切り替えることができます
  3. 変換: 価格はリアルタイムの為替レートを使用して動的に変換されます
  4. 表示: 支払い前に最終支払額が透明に表示されます
チェックアウトでの通貨セレクタ

Adaptive Currency

対応通貨、換算手数料、払い戻しの取り扱いについて詳しくはこちら。

多言語チェックアウト

Dodo Paymentsはチェックアウトページで複数の言語をサポートしており、顧客は快適な言語で支払いを完了できます。
チェックアウトでの言語セレクタ

主なハイライト

  • チェックアウト時に直接利用可能な言語セレクター
  • UIテキスト、ラベル、システムメッセージがローカライズされています
  • アクセシビリティと国際的なコンバージョンを向上させます

サポートされている言語

チェックアウトページは21言語に対応しています:
LanguageCode
Arabicar
Catalanca
Chinesezh
Dutchnl
Englishen
Frenchfr
Germande
Hebrewhe
Indonesianid
Italianit
Japaneseja
Koreanko
Malayms
Polishpl
Portuguesept
Romanianro
Russianru
Spanishes
Swedishsv
Thaith
Turkishtr
チェックアウトセッションを作成する際にforce_languageパラメータを設定すると、特定の言語を強制できます。詳細はCheckout Sessions APIをご覧ください。

自動税額計算

税額は顧客の請求先所在地に基づいて自動的に計算され、GST、VAT、売上税の要件に手動設定なしで準拠します。

税額計算の仕組み

1

Location Detection

税ルールは、顧客の国(該当する場合は地域)に基づいて適用されます。
2

Dynamic Updates

税額は以下のタイミングで自動更新されます:
  • 国が変更されたとき
  • 住所が更新されたとき
3

Transparent Display

支払い前に最終的な税内訳が明確に表示されます。
税額計算は完全に自動化されています。標準的なデジタル商品およびSaaS製品には手動設定は不要です。

法人税IDのサポート

登録法人の場合、チェックアウトで顧客が法人税ID(例:VAT/GST番号)を入力できます。

税ID入力時の動作

  • 税の適格性がリアルタイムで検証されます
  • 該当する税の免除またはリバースチャージルールが適用されます
  • チェックアウトの税額が即時更新されます
チェックアウトでの事業者税ID入力
これは主にB2B SaaSやデジタルサービスに有効で、法人顧客が税の免除対象となる場合に役立ちます。

割引コード

顧客はダッシュボードで作成した割引またはプロモコードをチェックアウトページ上で直接適用できます。

チェックアウト体験

  1. 顧客が割引コードを入力する
  2. 割引が即時に検証される
  3. 更新された価格と節約額が明確に表示される
チェックアウトでの割引コード入力

API統合

1つ以上の積み重ね可能なディスカウントコードを事前適用するか、ディスカウント入力フィールドを有効にします:
const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  discount_codes: ['WELCOME20'], // Pre-apply one or more codes (max 20, applied in order)
  feature_flags: {
    allow_discount_code: true // Show discount input field
  },
  return_url: 'https://yoursite.com/return'
});
discount_codes は最大20個のコードの配列を受け入れ、順に積み重ねられます。単一の discount_code フィールドは廃止されていますが、既存の統合ではすぐに変更する必要はありません。積み重ねとより豊かな応答形式を使用する際には、便利なときに discount_codes に移行してください。

Discount Codes

割引コードの作成と管理方法を学びます。

Validate Discount by Code

コード名を使用して割引を検索および検証します。

スマートアドレス収集

チェックアウトは、迅速な完了のために柔軟な住所入力をサポートしています。

利用可能なオプション

オプション説明
Googleアドレス自動入力自動補完による迅速な選択
手動入力完全なアドレスの完全管理
国の選択税金とコンプライアンスのロジックを駆動
アドレス収集は、変換を最大化しつつ、速度、正確性、およびグローバルなカバレッジのバランスを取ります。

電話番号収集

チェックアウト中に電話番号フィールドを表示するかどうか、またその必須性を、チェックアウトセッションの機能フラグを使用して制御します。
フラグデフォルト動作
allow_phone_number_collectiontrueチェックアウトフォームで電話番号フィールドを表示します
require_phone_numberfalse電話番号フィールドを必須にします(フォーム検証により非空の値を強制します)
const session = await client.checkoutSessions.create({
  product_cart: [{ product_id: 'prod_abc', quantity: 1 }],
  feature_flags: {
    allow_phone_number_collection: true,
    require_phone_number: true
  },
  return_url: 'https://yoursite.com/return'
});
require_phone_number: trueallow_phone_number_collection: true を必要とします。電話収集が無効化されているのに電話番号が必要とされているセッションは API が拒否します。
B2B SaaS、規制された業界、またはサポート、不正確認、コンプライアンスのための検証済みの連絡チャネルが必要なフローには require_phone_number を使用してください。

カスタムフィールド

チェックアウト中にカスタムフォームフィールドを定義して、顧客から追加情報を収集します。これは、会社名、チームサイズ、紹介元、その他のビジネス固有の情報を収集するのに役立ちます。

利用可能なフィールドタイプ

タイプ説明
textシングルラインテキスト入力
number数値入力
email検証付きメールアドレス
url検証付きURL
date日付ピッカー
dropdownあらかじめ定義されたオプションから選択
booleanはい/いいえのトグル

const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  custom_fields: [
    {
      key: 'company_name',
      label: 'Company Name',
      field_type: 'text',
      required: true
    },
    {
      key: 'team_size',
      label: 'Team Size',
      field_type: 'dropdown',
      required: true,
      options: ['1-10', '11-50', '51-200', '200+']
    }
  ],
  return_url: 'https://yoursite.com/return'
});
顧客の回答は、webhook ペイロード (payment.succeeded, subscription.active) と、custom_field_responses 配列を介した API 応答に自動的に含まれます。1つのチェックアウトセッションで最大5つのカスタムフィールドを定義できます。

Custom Fields Guide

カスタムフィールドの設定と回答のアクセスについて詳しく学びます。

プライバシーポリシーと利用規約の受諾

法的およびコンプライアンスの透明性を確保するために:
これは、GDPR準拠を含む世界的な消費者保護およびデータプライバシー要件を満たすのに役立ちます。

コレクションチェックアウト

プロダクトコレクションは、複数の関連した製品(例:スターター、プロ、エンタープライズプラン)を単一のチェックアウトで閲覧および選択できる統一されたチェックアウト体験を提供します。

仕組み

  1. すべての製品を表示: 顧客はコレクション内のすべてのアクティブ製品を目にします
  2. 最初の製品が事前選択される: コレクション内の最初の製品が自動的に選択されます
  3. オプションを比較: 顧客は選択する前に価格と機能を比較できます
  4. 単一選択: 製品を選択した後、標準の支払いフローでチェックアウトが行われます

コレクションチェックアウトの作成

const session = await client.checkoutSessions.create({
  product_collection_id: 'pdc_abc123',
  product_cart: [], // Required: pass an empty array for collection checkout
  return_url: 'https://yoursite.com/return'
});
product_collection_id を使用する場合、空の product_cart 配列を渡します。ディスカウントコードはセッション作成時に事前適用できません。

Product Collections

統一されたチェックアウト体験のためのプロダクトコレクションの作成と管理方法を学びます。

チェックアウトセッション設定

Checkout Sessions API を使用してチェックアウトの動作を操作します:
const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  customer: {
    email: 'customer@example.com',
    name: 'Jane Doe'
  },
  billing_currency: 'EUR', // Set specific currency
  discount_codes: ['PROMO10'],
  feature_flags: {
    allow_discount_code: true
  },
  return_url: 'https://yoursite.com/return',
  cancel_url: 'https://yoursite.com/pricing', // Optional: where to redirect on cancel
  metadata: {
    order_ref: 'ORD-12345'
  }
});
支払い後、顧客は自動的にクエリパラメータを付加されたあなたの return_url にリダイレクトされます — payment_id または subscription_idstatusemaillicense_key(該当する場合)を含みます。完全なリストについては Checkout Sessions ガイド を参照してください。

Checkout Sessions API

チェックアウトセッションに関する完全なAPIリファレンス。

Checkout Integration Guide

チェックアウトを統合するためのステップバイステップガイド。

チェックアウトテーマのカスタマイズ

APIを介してチェックアウトセッションを作成する際に、customization.theme_config パラメータを使用して、ブランドに合わせたチェックアウトページの外観をカスタマイズします。色、フォント、ボーダーラディウス、ボタンテキストをライトモードとダークモードの両方で設定します。
カスタムテーマのチェックアウトページ

Design & Theme Customization

ダッシュボードからプリビルドのテーマ、タイポグラフィ、カラー、ライブプレビューを使用してテーマを視覚的に設定します。
このセクションでは、サーバーサイドAPI テーマ設定を customization.theme_config を使用してカバーします。Checkout SDK (オーバーレイまたはインラインチェックアウト)を使用している場合は、Overlay Checkout または Inline Checkout のテーマカスタマイズセクションを参照してください。これにはキャメルケースプロパティ(例: bgPrimary ではなく bg_primary)が使用されている。

テーマ設定オプション

プロパティ説明
lightライトモードのカラー設定
darkダークモードのカラー設定
font_primary_urlプライマリフォントのURL
font_secondary_urlセカンダリフォントのURL
font_sizeフォントサイズ: xs, sm, md, lg, xl, 2xl
font_weightフォントウェイト: normal, medium, bold, extraBold
radiusUI要素のボーダーラディウス(例: 4px, 0.5rem, 8px
pay_button_text支払いボタンのカスタムテキスト(例:「購入を完了」「今すぐ登録」)

カラー設定(ライト/ダークモード)

それぞれのモード(lightdark)は、次のカラープロパティをサポートしています:
プロパティ説明
bg_primary背景のプライマリカラー
bg_secondary背景のセカンダリカラー
text_primaryテキストのプライマリカラー
text_secondaryテキストのセカンダリカラー
text_placeholderテキストのプレースホルダーカラー
text_errorテキストのエラーカラー
text_successテキストの成功カラー
border_primaryボーダーのプライマリカラー
border_secondaryボーダーのセカンダリカラー
button_primaryプライマリボタンの背景色
button_primary_hoverプライマリボタンのホバーカラー
button_secondaryセカンダリボタンの背景色
button_secondary_hoverセカンダリボタンのホバーカラー
button_text_primaryプライマリボタンのテキストカラー
button_text_secondaryセカンダリボタンのテキストカラー
input_focus_border入力のフォーカスボーダーカラー
すべてのカラー項目は標準のCSSカラー形式を受け入れます:
  • Hex: #fff, #ffffff, #ffffffff
  • RGB/RGBA: rgb(255, 255, 255), rgba(255, 255, 255, 0.5)
  • HSL/HSLA: hsl(120, 100%, 50%), hsla(120, 100%, 50%, 0.5)
  • 名前付きカラー: red, blue, transparent

const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  customization: {
    theme_config: {
      // Custom fonts
      font_primary_url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap',
      font_size: 'md',
      font_weight: 'medium',
      radius: '8px',
      pay_button_text: 'Complete Purchase',
      
      // Light mode colors
      light: {
        bg_primary: '#ffffff',
        bg_secondary: '#f5f5f5',
        text_primary: '#1a1a1a',
        text_secondary: '#666666',
        button_primary: '#0066ff',
        button_primary_hover: '#0052cc',
        button_text_primary: '#ffffff',
        border_primary: '#e0e0e0'
      },
      
      // Dark mode colors
      dark: {
        bg_primary: '#1a1a1a',
        bg_secondary: '#2d2d2d',
        text_primary: '#ffffff',
        text_secondary: '#a0a0a0',
        button_primary: '#3385ff',
        button_primary_hover: '#4d99ff',
        button_text_primary: '#ffffff',
        border_primary: '#404040'
      }
    }
  },
  return_url: 'https://yoursite.com/return'
});
すべてのカラープロパティを指定する必要はありません。指定されていないプロパティはデフォルトのテーマ値が使用されます。
Last modified on May 22, 2026