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

適応通貨

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

仕組み

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

Adaptive Currency

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

多言語チェックアウト

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

主なハイライト

  • チェックアウト時に直接利用可能な言語セレクター
  • 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入力時の動作

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

割引コード

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

チェックアウト体験

  1. 顧客が割引コードを入力する
  2. 割引が即時に検証される
  3. 更新された価格と節約額が明確に表示される
Discount code entry on checkout

API統合

割引コードを事前に適用するか、割引入力欄を有効にします:
const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  discount_code: 'WELCOME20', // Pre-apply a code
  feature_flags: {
    allow_discount_code: true // Show discount input field
  },
  return_url: 'https://yoursite.com/return'
});

Discount Codes

割引コードの作成と管理方法について学びます。

Validate Discount by Code

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

スマート住所収集

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

利用可能なオプション

OptionDescription
Google Address Autofillオートコンプリートによる素早い選択
Manual Entry完全な住所のための細かい制御
Country Selection税金およびコンプライアンスロジックに影響
住所収集は、コンバージョン最大化のためにスピード、正確性、グローバル対応のバランスを取りつつコンプライアンスを確保します。

カスタムフィールド

チェックアウト中にカスタムフォームフィールドを定義して顧客から追加情報を収集できます。会社名、チームの規模、紹介元などのビジネス固有情報を集めるのに役立ちます。

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

TypeDescription
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.succeededsubscription.active)および custom_field_responses 配列を介した API 応答に自動的に含まれます。チェックアウト セッションごとに最大 5 つのカスタム フィールドを定義できます。

Custom Fields Guide

カスタムフィールドの設定と回答へのアクセス方法について詳しくはこちら。

プライバシーポリシーおよび利用規約の同意

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

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

Product Collectionsにより、顧客が単一のチェックアウトで複数の関連製品(例:Starter、Pro、Enterpriseプラン)を表示および選択できる統一されたチェックアウト体験が実現します。

仕組み

  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

統一されたチェックアウト体験のための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_code: 'PROMO10',
  feature_flags: {
    allow_discount_code: true
  },
  return_url: 'https://yoursite.com/return',
  metadata: {
    order_ref: 'ORD-12345'
  }
});
支払い後、顧客はクエリパラメータが自動的に付与されたreturn_urlにリダイレクトされます(該当する場合はpayment_idまたはsubscription_idstatusemaillicense_keyを含む)。詳細なリストについてはCheckout Sessionsガイドをご覧ください。

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

API経由でチェックアウトセッションを作成する際、customization.theme_configパラメータを使用してブランドに合わせたチェックアウトページの外観をカスタマイズできます。ライトおよびダークモードそれぞれの色、フォント、ボーダー半径、ボタンテキストを設定してください。
Custom themed checkout page

Design & Theme Customization

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

テーマ設定オプション

プロパティ説明
lightライトモードのカラー設定
darkダークモードのカラー設定
font_primary_urlプライマリフォントの URL
font_secondary_urlセカンダリフォントの URL
font_sizeフォントサイズ: xssmmdlgxl2xl
font_weightフォントウェイト: normalmediumboldextraBold
radiusUI要素のボーダー半径(例: 4px0.5rem8px
pay_button_text支払いボタンのカスタムテキスト(例: “Complete Purchase”, “Subscribe Now”)

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

それぞれのモード(light および dark)では、以下のカラー プロパティがサポートされています。
プロパティ説明
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 カラー形式を受け入れます:
  • 16 進: #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)
  • 名前付きカラー: redbluetransparent

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'
});
すべてのカラー項目を指定する必要はありません。指定されていないプロパティは、デフォルトテーマ値が使用されます。