Skip to main content

​
概要

Dodo Payments Framer プラグインを使用すると、Dodo Payments の商品用購入ボタンを Framer サイトに追加できます。各ボタンでは、ページ上にオーバーレイとしてチェックアウトを開くか、顧客をホスト型チェックアウトページに移動できます。テストモードとライブモードのどちらにも対応しています。

Official Plugin

Framer Marketplace から Dodo Payments プラグインをインストールします。

​
機能

Hosted or Overlay Checkout

ページ上にオーバーレイとしてチェックアウトを開くか、顧客をホスト型チェックアウトページに移動します。

Drag-and-Drop Setup

API key をプラグインに貼り付け、キャンバスに購入ボタンを追加して、公開します。

Digital Delivery

支払い後、ダウンロードリンクまたは license key をメールで顧客に届けます。

Worldwide Coverage

カード、ウォレット、現地の payment method を使って、220 か国以上の顧客に販売できます。

Automatic Tax & Invoicing

Merchant of Record として、Dodo Payments は VAT、GST、sales tax を計算して納付し、各支払いに対して invoice を発行します。

No-Code Subscriptions

サブスクリプション商品にも、単発商品と同じ購入ボタンをコードなしで使用できます。

​
セットアップガイド

1

Generate API Key

Dodo Payments dashboard で Developer → API Keys に移動し、Add API Key をクリックします。API Keys ページを直接開くこともできます。API key は一方のモードでのみ機能します。key を作成する前に、サイドバーの Live Mode スイッチを使用してモードを選択します。
本番環境用です。顧客は実際の payment method で支払います。
API key をコピーして、安全に保管します。dashboard に表示されるのは一度だけです。次の手順でプラグインに貼り付けます。
2

Authenticate Plugin

API key は秘密にしてください。他の人と共有したり、公開したりしないでください。
  1. Framer で Dodo Payments プラグインを開きます。Authenticate ページが開きます。
  2. API Mode で、API key に合わせて Test Mode または Live Mode を選択します。
  3. API Key に API key を貼り付けます。
  4. Continue をクリックします。
3

Manage Products

認証すると、プラグインの Products に、選択したモードの商品が一覧表示されます。
  • Existing products は自動的に表示され、それぞれ One-time または Subscription と表示されます。
  • No products yet の場合は、Products の横にある Plus (+) ボタンをクリックします。
Plus (+) ボタンをクリックすると Dodo Payments dashboard が開き、商品を作成して価格、説明、その他の設定を指定できます。
4

Add Buy Buttons

  1. リストから商品を選択します。
  2. Add Buy Button をクリックします。
プラグインによって、Buy {product_name} というラベルの購入ボタンがキャンバスに追加されます。同じ商品画面で Edit をクリックすると Dodo Payments dashboard で商品が開き、Show Preview をクリックすると checkout preview が開きます。
Framer プロジェクトでコンポーネントの追加やプロパティの変更を行う権限がない場合、Add Buy Button は無効になります。

​
カスタマイズ

購入ボタンの動作を変更するには、キャンバス上でボタンを選択し、Framer でプロパティを編集します。
1

Select Checkout Experience

Type を設定して checkout の開き方を選択します。
  • Overlay: Framer ページ上に checkout をオーバーレイとして開くため、顧客はサイト内にとどまります。新しいボタンにはこの type が使用されます。
  • Hosted: ボタンから Dodo Payments のホスト型 checkout ページにリンクします。Link Target では、ページを新しいタブと同じタブのどちらで開くかを設定します。
2

Customize Appearance Options

次のプロパティを使用して、ボタンと checkout をサイトに合わせます。
  • Checkout Theme: 明るい checkout または暗い checkout。
  • Label: 「Buy Now」、「Purchase」、「Get Started」などのボタンテキスト。
  • ボタンのスタイル: 背景色、テキスト色、フォント、フォントサイズ、border radius、padding。
  • Return URL: checkout 後に顧客が戻る Framer ページまたは URL。
  • Environment: Live または Test。認証に使用したモードに設定されます。

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

Problem: プラグインで認証できません。Solutions:
  • API key 全体を貼り付けたことを確認します。
  • API Mode が key の作成時に選択したモードと一致していることを確認します。test mode key は live mode では機能せず、live mode key は test mode では機能しません。
  • インターネット接続を確認します。
Problem: Add Buy Button が無効になっています。Solutions:
  • Framer プロジェクトで、コンポーネントの追加とプロパティの変更を許可する role が付与されていることを確認します。
  • プラグインが認証済みであることを確認します。
  • プラグインを閉じて、もう一度開きます。
Problem: 商品がプラグインに表示されません。Solutions:
  • Dodo Payments dashboard で商品を作成したことを確認します。
  • 商品が API key と同じモードに存在することを確認します。プラグインには、認証に使用したモードの商品だけが表示されます。
  • プラグインを再度認証します。
最終更新日 2026年9月26日