Checkout Handler
RemixアプリにDodo Paymentsのチェックアウトを統合します。
Customer Portal
顧客がサブスクリプションや詳細を管理できるようにします。
Webhooks
Dodo PaymentsのWebhookイベントを受信・処理します。
インストール
1
Install the package
プロジェクトのルートで以下のコマンドを実行してください:
npm install @dodopayments/remix
2
Set up environment variables
プロジェクトのルートに
.envファイルを作成してください:DODO_PAYMENTS_API_KEY=your-api-key
DODO_PAYMENTS_WEBHOOK_SECRET=your-webhook-secret
DODO_PAYMENTS_RETURN_URL=https://yourdomain.com/checkout/success
DODO_PAYMENTS_ENVIRONMENT="test_mode" or "live_mode"
.envファイルやシークレットをバージョン管理にコミットしないでください。ルートハンドラーの例
すべての例はRemix App Routerを使用していることを前提としています。
- Checkout Handler
- Customer Portal Handler
- Webhook Handler
このハンドラを使用して、RemixアプリにDodo Paymentsのチェックアウトを統合します。静的(GET)、動的(POST)、セッション(POST)の各支払いフローに対応しています。
// app/routes/api.checkout.tsx
import { Checkout } from "@dodopayments/remix";
import type { LoaderFunctionArgs } from "@remix-run/node";
const checkoutGetHandler = Checkout({
bearerToken: process.env.DODO_PAYMENTS_API_KEY,
returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
type: "static"
});
const checkoutPostHandler = Checkout({
bearerToken: process.env.DODO_PAYMENTS_API_KEY,
returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
type: "dynamic", // for dynamic checkout
});
const checkoutSessionHandler = Checkout({
bearerToken: process.env.DODO_PAYMENTS_API_KEY,
returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
type: "session", // for checkout sessions
});
export const loader = ({ request }: LoaderFunctionArgs) => checkoutGetHandler(request);
export const action = ({ request }: LoaderFunctionArgs) => {
// You can conditionally route to different handlers based on your needs
// For checkout sessions, use checkoutSessionHandler(request)
return checkoutPostHandler(request);
};
curl --request GET \
--url 'https://example.com/api/checkout?productId=pdt_fqJhl7pxKWiLhwQR042rh' \
--header 'User-Agent: insomnia/11.2.0' \
--cookie mode=test
curl --request POST \
--url https://example.com/api/checkout \
--header 'Content-Type: application/json' \
--header 'User-Agent: insomnia/11.2.0' \
--cookie mode=test \
--data '{
"billing": {
"city": "Texas",
"country": "US",
"state": "Texas",
"street": "56, hhh",
"zipcode": "560000"
},
"customer": {
"email": "test@example.com",
"name": "test"
},
"metadata": {},
"payment_link": true,
"product_id": "pdt_QMDuvLkbVzCRWRQjLNcs",
"quantity": 1,
"billing_currency": "USD",
"discount_codes": ["IKHZ23M9GQ"],
"return_url": "https://example.com",
"trial_period_days": 10
}'
curl --request POST \
--url https://example.com/api/checkout \
--header 'Content-Type: application/json' \
--header 'User-Agent: insomnia/11.2.0' \
--cookie mode=test \
--data '{
"product_cart": [
{
"product_id": "pdt_QMDuvLkbVzCRWRQjLNcs",
"quantity": 1
}
],
"customer": {
"email": "test@example.com",
"name": "test"
},
"return_url": "https://example.com/success"
}'
このハンドラを使用して、Dodo Paymentsの顧客ポータルから顧客がサブスクリプションや詳細を管理できるようにします。
// app/routes/api.customer-portal.tsx
import { CustomerPortal } from "@dodopayments/remix";
import type { LoaderFunctionArgs } from "@remix-run/node";
const customerPortalHandler = CustomerPortal({
bearerToken: process.env.DODO_PAYMENTS_API_KEY,
environment: process.env.DODO_PAYMENTS_ENVIRONMENT
});
export const loader = ({ request }: LoaderFunctionArgs) => customerPortalHandler(request);
curl --request GET \
--url 'https://example.com/api/customer-portal?customer_id=cus_9VuW4K7O3GHwasENg31m&send_email=true' \
--header 'User-Agent: insomnia/11.2.0' \
--cookie mode=test
このハンドラを使用して、Remixアプリ内でDodo PaymentsのWebhookイベントを安全に受信・処理します。
// app/routes/api.webhook.tsx
import { Webhooks } from "@dodopayments/remix";
import type { LoaderFunctionArgs } from "@remix-run/node";
const webhookHandler = Webhooks({
webhookKey: process.env.DODO_PAYMENTS_WEBHOOK_SECRET,
onPayload: async (payload) => {
//Handle Payload Here
console.log(payload)
}
});
export const action = ({ request }: LoaderFunctionArgs) => webhookHandler(request);
チェックアウトルートハンドラー
Dodo Paymentsはウェブサイトへの支払い統合に3種類の支払いフローをサポートしており、このアダプターはすべての支払いフローに対応しています。
- 静的支払いリンク: すぐに共有可能なURLで、迅速かつコード不要の支払い収集が可能です。
- 動的支払いリンク: APIまたはSDKを使用してカスタム詳細を持つ支払いリンクをプログラム的に生成します。
- チェックアウトセッション: 事前に設定された商品カートと顧客詳細を持つ、安全でカスタマイズ可能なチェックアウト体験を作成します。
Static Checkout (GET)
Static Checkout (GET)
サポートされているクエリパラメータ
string
必須
製品識別子(例:
?productId=pdt_nZuwz45WAs64n3l07zpQR)。integer
製品の数量。
string
顧客のフルネーム。
string
顧客の名。
string
顧客の姓。
string
顧客のメールアドレス。
string
顧客の国。
string
顧客の住所行。
string
顧客の市区町村。
string
顧客の州/都道府県。
string
顧客の郵便番号。
boolean
フルネーム欄を無効にします。
boolean
名欄を無効にします。
boolean
姓欄を無効にします。
boolean
メール欄を無効にします。
boolean
国欄を無効にします。
boolean
住所欄を無効にします。
boolean
市区町村欄を無効にします。
boolean
州/都道府県欄を無効にします。
boolean
郵便番号欄を無効にします。
string
支払い通貨を指定します(例:
USD)。boolean
通貨セレクターを表示します。
integer
支払い金額を指定します(例:
1000は$10.00)。boolean
割引欄を表示します。
string
metadata_で始まるクエリパラメータはすべてメタデータとして渡されます。もし
productIdが欠落している場合、ハンドラは400レスポンスを返します。無効なクエリパラメータも400レスポンスになります。レスポンスフォーマット
静的チェックアウトは、チェックアウトURLを含むJSONレスポンスを返します:{
"checkout_url": "https://checkout.dodopayments.com/..."
}
Dynamic Checkout (POST)
Dynamic Checkout (POST)
- POSTリクエストのJSONボディとしてパラメータを送信します。
- 単発および定期支払いの両方に対応しています。
- サポートされているPOSTボディフィールドの完全な一覧は以下を参照してください:
レスポンスフォーマット
動的チェックアウトは、チェックアウトURLを含むJSONレスポンスを返します:{
"checkout_url": "https://checkout.dodopayments.com/..."
}
Checkout Sessions (POST)
Checkout Sessions (POST)
チェックアウトセッションは、単発購入とサブスクリプションの両方に対して、完全な支払いフローを処理しながら柔軟にカスタマイズ可能な、安全なホスト型チェックアウト体験を提供します。詳細とサポートされているフィールドの完全なリストについては、チェックアウトセッション統合ガイドを参照してください。
レスポンスフォーマット
チェックアウトセッションは、チェックアウトURLを含むJSONレスポンスを返します:{
"checkout_url": "https://checkout.dodopayments.com/session/..."
}
顧客ポータルルートハンドラー
顧客ポータルルートハンドラーを使用すると、Dodo Paymentsの顧客ポータルをあなたのRemixアプリケーションにシームレスに統合できます。クエリパラメータ
string
必須
ポータルセッション用の顧客ID(例:
?customer_id=cus_123)。boolean
trueに設定すると、ポータルリンクを記載したメールが顧客に送信されます。customer_idが欠落している場合、400を返します。ウェブフックルートハンドラー
- メソッド: POSTリクエストのみがサポートされています。他のメソッドは405を返します。
- 署名検証:
webhookKeyを使用してウェブフック署名を検証します。検証に失敗した場合は401を返します。 - ペイロード検証: Zodで検証されます。無効なペイロードには400を返します。
- エラーハンドリング:
- 401: 無効な署名
- 400: 無効なペイロード
- 500: 検証中の内部エラー
- イベントルーティング: ペイロードタイプに基づいて適切なイベントハンドラーを呼び出します。
サポートされているWebhookイベントハンドラ
onPayload?: (payload: WebhookPayload) => Promise<void>;
onPaymentSucceeded?: (payload: WebhookPayload) => Promise<void>;
onPaymentFailed?: (payload: WebhookPayload) => Promise<void>;
onPaymentProcessing?: (payload: WebhookPayload) => Promise<void>;
onPaymentCancelled?: (payload: WebhookPayload) => Promise<void>;
onRefundSucceeded?: (payload: WebhookPayload) => Promise<void>;
onRefundFailed?: (payload: WebhookPayload) => Promise<void>;
onDisputeOpened?: (payload: WebhookPayload) => Promise<void>;
onDisputeExpired?: (payload: WebhookPayload) => Promise<void>;
onDisputeAccepted?: (payload: WebhookPayload) => Promise<void>;
onDisputeCancelled?: (payload: WebhookPayload) => Promise<void>;
onDisputeChallenged?: (payload: WebhookPayload) => Promise<void>;
onDisputeWon?: (payload: WebhookPayload) => Promise<void>;
onDisputeLost?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionActive?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionOnHold?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionRenewed?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionPlanChanged?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionCancelled?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionFailed?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionExpired?: (payload: WebhookPayload) => Promise<void>;
onSubscriptionUpdated?: (payload: WebhookPayload) => Promise<void>;
onLicenseKeyCreated?: (payload: WebhookPayload) => Promise<void>;
onAbandonedCheckoutDetected?: (payload: WebhookPayload) => Promise<void>;
onAbandonedCheckoutRecovered?: (payload: WebhookPayload) => Promise<void>;
onDunningStarted?: (payload: WebhookPayload) => Promise<void>;
onDunningRecovered?: (payload: WebhookPayload) => Promise<void>;
onCreditAdded?: (payload: WebhookPayload) => Promise<void>;
onCreditDeducted?: (payload: WebhookPayload) => Promise<void>;
onCreditExpired?: (payload: WebhookPayload) => Promise<void>;
onCreditRolledOver?: (payload: WebhookPayload) => Promise<void>;
onCreditRolloverForfeited?: (payload: WebhookPayload) => Promise<void>;
onCreditOverageCharged?: (payload: WebhookPayload) => Promise<void>;
onCreditManualAdjustment?: (payload: WebhookPayload) => Promise<void>;
onCreditBalanceLow?: (payload: WebhookPayload) => Promise<void>;
LLMへのプロンプト
You are an expert Remix developer assistant. Your task is to guide a user through integrating the @dodopayments/remix adapter into their existing Remix project.
The @dodopayments/remix adapter provides route handlers for Dodo Payments' Checkout, Customer Portal, and Webhook functionalities, designed for Remix route handlers.
First, install the necessary packages. Use the package manager appropriate for your project (npm, yarn, or bun) based on the presence of lock files (e.g., package-lock.json for npm, yarn.lock for yarn, bun.lockb for bun):
npm install @dodopayments/remix
Here's how you should structure your response:
Ask the user which functionalities they want to integrate.
"Which parts of the @dodopayments/remix adapter would you like to integrate into your project? You can choose one or more of the following:
Checkout Route Handler (for handling product checkouts)
Customer Portal Route Handler (for managing customer subscriptions/details)
Webhook Route Handler (for receiving Dodo Payments webhook events)
All (integrate all three)"
Based on the user's selection, provide detailed integration steps for each chosen functionality.
If Checkout Route Handler is selected:
Purpose: This handler redirects users to the Dodo Payments checkout page.
File Creation: Create a new file at app/routes/api.checkout.tsx in your Remix project.
Code Snippet:
// app/routes/api.checkout.tsx
import { Checkout } from "@dodopayments/remix";
import type { LoaderFunctionArgs } from "@remix-run/node";
const checkoutGetHandler = Checkout({
bearerToken: process.env.DODO_PAYMENTS_API_KEY,
returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
type: "static",
});
const checkoutPostHandler = Checkout({
bearerToken: process.env.DODO_PAYMENTS_API_KEY,
returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
type: "dynamic", // for dynamic checkout
});
const checkoutSessionHandler = Checkout({
bearerToken: process.env.DODO_PAYMENTS_API_KEY,
returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
type: "session", // for checkout sessions
});
export const loader = ({ request }: LoaderFunctionArgs) => checkoutGetHandler(request);
export const action = ({ request }: LoaderFunctionArgs) => {
// You can conditionally route to different handlers based on your needs
// For checkout sessions, use checkoutSessionHandler(request)
return checkoutPostHandler(request);
};
If Customer Portal Route Handler is selected:
Purpose: This handler redirects authenticated users to their Dodo Payments customer portal.
File Creation: Create a new file at app/routes/api.customer-portal.tsx in your Remix project.
Code Snippet:
// app/routes/api.customer-portal.tsx
import { CustomerPortal } from "@dodopayments/remix";
import type { LoaderFunctionArgs } from "@remix-run/node";
const customerPortalHandler = CustomerPortal({
bearerToken: process.env.DODO_PAYMENTS_API_KEY,
environment: process.env.DODO_PAYMENTS_ENVIRONMENT
});
export const loader = ({ request }: LoaderFunctionArgs) => customerPortalHandler(request);
Query Parameters:
customer_id (required): The customer ID for the portal session (e.g., ?customer_id=cus_123)
send_email (optional, boolean): If set to true, sends an email to the customer with the portal link.
Returns 400 if customer_id is missing.
If Webhook Route Handler is selected:
Purpose: This handler processes incoming webhook events from Dodo Payments, allowing your application to react to events like successful payments, refunds, or subscription changes.
File Creation: Create a new file at app/routes/api.webhook.tsx in your Remix project.
Code Snippet:
// app/routes/api.webhook.tsx
import { Webhooks } from "@dodopayments/remix";
import type { LoaderFunctionArgs } from "@remix-run/node";
const webhookHandler = Webhooks({
webhookKey: process.env.DODO_PAYMENTS_WEBHOOK_SECRET,
onPayload: async (payload) => {
//Handle Payload Here
console.log(payload)
}
});
export const action = ({ request }: LoaderFunctionArgs) => webhookHandler(request);
Handler Details:
Method: Only POST requests are supported. Other methods return 405.
Signature Verification: The handler verifies the webhook signature using the webhookKey and returns 401 if verification fails.
Payload Validation: The payload is validated with Zod. Returns 400 for invalid payloads.
Error Handling:
401: Invalid signature
400: Invalid payload
500: Internal error during verification
Event Routing: Calls the appropriate event handler based on the payload type.
Supported Webhook Event Handlers:
onPayload?: (payload: WebhookPayload) => Promise<void>
onPaymentSucceeded?: (payload: WebhookPayload) => Promise<void>
onPaymentFailed?: (payload: WebhookPayload) => Promise<void>
onPaymentProcessing?: (payload: WebhookPayload) => Promise<void>
onPaymentCancelled?: (payload: WebhookPayload) => Promise<void>
onRefundSucceeded?: (payload: WebhookPayload) => Promise<void>
onRefundFailed?: (payload: WebhookPayload) => Promise<void>
onDisputeOpened?: (payload: WebhookPayload) => Promise<void>
onDisputeExpired?: (payload: WebhookPayload) => Promise<void>
onDisputeAccepted?: (payload: WebhookPayload) => Promise<void>
onDisputeCancelled?: (payload: WebhookPayload) => Promise<void>
onDisputeChallenged?: (payload: WebhookPayload) => Promise<void>
onDisputeWon?: (payload: WebhookPayload) => Promise<void>
onDisputeLost?: (payload: WebhookPayload) => Promise<void>
onSubscriptionActive?: (payload: WebhookPayload) => Promise<void>
onSubscriptionOnHold?: (payload: WebhookPayload) => Promise<void>
onSubscriptionRenewed?: (payload: WebhookPayload) => Promise<void>
onSubscriptionPlanChanged?: (payload: WebhookPayload) => Promise<void>
onSubscriptionCancelled?: (payload: WebhookPayload) => Promise<void>
onSubscriptionFailed?: (payload: WebhookPayload) => Promise<void>
onSubscriptionExpired?: (payload: WebhookPayload) => Promise<void>
onSubscriptionUpdated?: (payload: WebhookPayload) => Promise<void>
onLicenseKeyCreated?: (payload: WebhookPayload) => Promise<void>
onAbandonedCheckoutDetected?: (payload: WebhookPayload) => Promise<void>
onAbandonedCheckoutRecovered?: (payload: WebhookPayload) => Promise<void>
onDunningStarted?: (payload: WebhookPayload) => Promise<void>
onDunningRecovered?: (payload: WebhookPayload) => Promise<void>
onCreditAdded?: (payload: WebhookPayload) => Promise<void>
onCreditDeducted?: (payload: WebhookPayload) => Promise<void>
onCreditExpired?: (payload: WebhookPayload) => Promise<void>
onCreditRolledOver?: (payload: WebhookPayload) => Promise<void>
onCreditRolloverForfeited?: (payload: WebhookPayload) => Promise<void>
onCreditOverageCharged?: (payload: WebhookPayload) => Promise<void>
onCreditManualAdjustment?: (payload: WebhookPayload) => Promise<void>
onCreditBalanceLow?: (payload: WebhookPayload) => Promise<void>
Environment Variable Setup:
To ensure the adapter functions correctly, you will need to manually set up the following environment variables in your Remix project's deployment environment (e.g., Vercel, Netlify, AWS, etc.):
DODO_PAYMENTS_API_KEY: Your Dodo Payments API Key (required for Checkout and Customer Portal).
DODO_PAYMENTS_RETURN_URL: (Optional) The URL to redirect to after a successful checkout (for Checkout handler).
DODO_PAYMENTS_ENVIRONMENT: (Optional) The environment for the API (e.g., test or live).
DODO_PAYMENTS_WEBHOOK_SECRET: Your Dodo Payments Webhook Secret (required for Webhook handler).
Example .env file:
DODO_PAYMENTS_API_KEY=your-api-key
DODO_PAYMENTS_RETURN_URL=your-return-url
DODO_PAYMENTS_ENVIRONMENT=test
DODO_PAYMENTS_WEBHOOK_SECRET=your-webhook-secret
Usage in your code:
bearerToken: process.env.DODO_PAYMENTS_API_KEY
webhookKey: process.env.DODO_PAYMENTS_WEBHOOK_SECRET
Important: Never commit sensitive environment variables directly into your version control. Use environment variables for all sensitive information.
If the user needs assistance setting up environment variables for their specific deployment environment, ask them what platform they are using (e.g., Vercel, Netlify, AWS, etc.), and provide guidance. You can also add comments to their PR or chat depending on the context