@dodopayments/remix パッケージは、Remix アプリに 3 つのリクエストハンドラーを提供します。Checkout は checkout URL を返し、CustomerPortal は顧客を Customer Portal に移動させ、Webhooks は webhook イベントを検証してコードにルーティングします。各ハンドラーは Request を受け取り、Response を返すため、ルートの loader または action から呼び出します。
Checkout Handler
Remix アプリから checkout URL を作成します。
Customer Portal
顧客がサブスクリプションと詳細情報を管理できるようにします。
Webhooks
Dodo Payments webhook イベントを受信して検証します。
インストール
1
Install the Package
プロジェクトのルートで次のコマンドを実行します。このパッケージは、peer dependency として Remix 2(
remix 2.16.8 以降)および zod 3.25 以降を指定します。2
Set Up Environment Variables
プロジェクトのルートに Developer → API Keys で API key を作成します。Developer → Webhooks で webhook endpoint を追加し、その signing secret を
.env ファイルを作成します。DODO_PAYMENTS_WEBHOOK_KEY にコピーします。DODO_PAYMENTS_RETURN_URL は checkout 後に顧客が移動する場所です。environment を渡さない場合、ハンドラーは live_mode を使用します。ルートハンドラーの例
この例は Remix の resource route です。GET リクエストには
loader、POST リクエストには action を export し、component は使用しません。flat file route では、app/routes/api.checkout.tsx が /api/checkout を提供します。- Checkout Handler
- Customer Portal Handler
- Webhook Handler
このハンドラーを使って、Remix アプリに Dodo Payments checkout を追加します。
loader は static checkout を提供します。action はここで dynamic checkout を提供します。checkout session を提供する推奨フローでは、代わりに action から checkoutSessionHandler(request) を返します。action が checkoutSessionHandler(request) を返す場合、checkout session リクエストが機能します。Checkout ルートハンドラー
checkout ハンドラーは、Dodo Payments で支払いを受け付ける次の 3 つの方法をすべてサポートします。- Static Payment Links: コードなしで支払いを受け付ける共有可能な URL です。
- Dynamic Payment Links: カスタム詳細情報を指定して生成する payment link です。非推奨の endpoint を使用します。
- Checkout Sessions: product cart、顧客情報、カスタマイズオプションを備えた hosted checkout です。これが推奨フローです。
Checkout は次のオプションを受け取ります。
Static Checkout (GET)
Static Checkout (GET)
サポートされる Query Parameters
請求額を主要通貨単位で固定します。たとえば
12.5 は $12.50 を表します。Pay What You Want products でのみ機能し、product の最低価格を下回る場合は無視されます。returnUrl を redirect_url として link に追加します。Response Format
Static checkout は checkout URL を含む JSON response を返します。test mode では、URL にtest.checkout.dodopayments.com が使用されます。Dynamic Checkout (POST)
Dynamic Checkout (POST)
Checkout Sessions (POST)
Checkout Sessions (POST)
Checkout session は、カスタマイズを完全に制御できる hosted checkout を one-time purchase と subscription 向けに作成します。
product_cart は唯一の必須 field です。body に return_url がない場合、ハンドラーは config の returnUrl を使用します。詳細およびサポートされるすべての field については、Checkout Sessions Integration Guide を参照してください。payment_method_id で作成した session は checkout URL を返さないため、ハンドラーは 400 を返します。保存済みの payment method に請求するには、代わりに SDK で session を作成してください。Response Format
Checkout session は checkout URL を含む JSON response を返します。Customer Portal ルートハンドラー
Customer Portal ルートハンドラーは、指定された顧客用の Customer Portal session を作成し、307 response でブラウザーをそこへリダイレクトします。Query Parameters
Webhook ルートハンドラー
webhook ルートハンドラーは、コードを実行する前に各リクエストを検証します。- Method: POST request のみサポートされます。それ以外の method は 405 を返します。
- Signature Verification: raw request body と
webhook-id、webhook-timestamp、webhook-signatureheaders をwebhookKeyで検証し、Standard Webhooks specification に従います。検証に失敗すると 401 を返します。 - Payload Validation: payload を Zod で検証します。無効な payload の場合は 400 を返します。
- Error Handling:
- 401: 無効な署名
- 400: 無効な payload
- 500: 検証中の内部エラー
- Event Routing: すべての event に対して
onPayloadを呼び出し、その後 event の type に対応するハンドラーを呼び出して 200 を返します。