@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
string
必須
Product identifier(例:
?productId=pdt_nZuwz45WAs64n3l07zpQR)。integer
デフォルト:"1"
Product の数量。
string
顧客の氏名。
firstName または lastName が指定されている場合は無視されます。string
顧客の名。
string
顧客の姓。
string
顧客の email address。
string
ISO 3166-1 alpha-2 code による顧客の国。
string
顧客の住所欄。
string
顧客の市区町村。
string
顧客の州または都道府県。
string
顧客の ZIP または postal code。
boolean
true に設定すると、氏名フィールドを無効にします。boolean
true に設定すると、名フィールドを無効にします。boolean
true に設定すると、姓フィールドを無効にします。boolean
true に設定すると、email フィールドを無効にします。boolean
true に設定すると、country フィールドを無効にします。boolean
true に設定すると、住所欄フィールドを無効にします。boolean
true に設定すると、市区町村フィールドを無効にします。boolean
true に設定すると、州フィールドを無効にします。boolean
true に設定すると、ZIP code フィールドを無効にします。string
Payment currency(例:
USD)。boolean
デフォルト:"true"
通貨セレクターを表示または非表示にします。
number
請求額を主要通貨単位で固定します。たとえば
12.5 は $12.50 を表します。Pay What You Want products でのみ機能し、product の最低価格を下回る場合は無視されます。boolean
デフォルト:"true"
割引セクションを表示または非表示にします。
string
metadata_ で始まる query parameter は metadata として渡されます。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)
- POST request の JSON body としてパラメーターを送信します。
- one-time payment と recurring payment の両方をサポートします。
billingとcustomerは必須です。- サポートされるすべての body field については、次を参照してください。
Response Format
Dynamic checkout は checkout URL を含む JSON response を返します。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
string
必須
portal session の customer ID(例:
?customer_id=cus_123)。boolean
true に設定すると、Dodo Payments は portal link も顧客に email で送信します。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 を返します。