Passer au contenu principal

Installation

1

Installez le package

Exécutez la commande suivante à la racine de votre projet :
npm install @dodopayments/remix
2

Configurez les variables d'environnement

Créez un fichier .env à la racine de votre projet :
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"
Ne jamais commettre votre fichier .env ou vos secrets dans le contrôle de version.

Exemples de Gestionnaires de Route

Tous les exemples supposent que vous utilisez le Remix App Router.
Utilisez ce gestionnaire pour intégrer le processus de paiement Dodo Payments dans votre application Remix. Prend en charge les flux de paiement statiques (GET), dynamiques (POST) et de session (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": "[email protected]",
  	"name": "test"
},
"metadata": {},
"payment_link": true,
  "product_id": "pdt_QMDuvLkbVzCRWRQjLNcs",
  "quantity": 1,
  "billing_currency": "USD",
  "discount_code": "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": "[email protected]",
  "name": "test"
},
"return_url": "https://example.com/success"
}'

Gestionnaire de Route de Paiement

Dodo Payments prend en charge trois types de flux de paiement pour intégrer les paiements dans votre site Web, cet adaptateur prend en charge tous les types de flux de paiement.
  • Liens de Paiement Statique : URL partageables instantanément pour une collecte de paiement rapide et sans code.
  • Liens de Paiement Dynamique : Générez des liens de paiement de manière programmatique avec des détails personnalisés en utilisant l’API ou les SDK.
  • Sessions de Paiement : Créez des expériences de paiement sécurisées et personnalisables avec des paniers de produits préconfigurés et des détails clients.

Paramètres de Requête Supportés

productId
string
required
Identifiant du produit (par exemple, ?productId=pdt_nZuwz45WAs64n3l07zpQR).
quantity
integer
Quantité du produit.
fullName
string
Nom complet du client.
firstName
string
Prénom du client.
lastName
string
Nom de famille du client.
email
string
Adresse e-mail du client.
country
string
Pays du client.
addressLine
string
Ligne d’adresse du client.
city
string
Ville du client.
state
string
État/province du client.
zipCode
string
Code postal du client.
disableFullName
boolean
Désactiver le champ du nom complet.
disableFirstName
boolean
Désactiver le champ du prénom.
disableLastName
boolean
Désactiver le champ du nom de famille.
disableEmail
boolean
Désactiver le champ de l’e-mail.
disableCountry
boolean
Désactiver le champ du pays.
disableAddressLine
boolean
Désactiver le champ de la ligne d’adresse.
disableCity
boolean
Désactiver le champ de la ville.
disableState
boolean
Désactiver le champ de l’état.
disableZipCode
boolean
Désactiver le champ du code postal.
paymentCurrency
string
Spécifiez la devise de paiement (par exemple, USD).
showCurrencySelector
boolean
Afficher le sélecteur de devise.
paymentAmount
integer
Spécifiez le montant du paiement (par exemple, 1000 pour 10,00 $).
showDiscounts
boolean
Afficher les champs de réduction.
metadata_*
string
Tout paramètre de requête commençant par metadata_ sera passé en tant que métadonnées.
Si productId est manquant, le gestionnaire renvoie une réponse 400. Les paramètres de requête invalides entraînent également une réponse 400.

Format de Réponse

Le paiement statique renvoie une réponse JSON avec l’URL de paiement :
{
  "checkout_url": "https://checkout.dodopayments.com/..."
}

Format de Réponse

Le paiement dynamique renvoie une réponse JSON avec l’URL de paiement :
{
  "checkout_url": "https://checkout.dodopayments.com/..."
}
Les sessions de paiement offrent une expérience de paiement hébergée plus sécurisée qui gère l’ensemble du flux de paiement pour les achats uniques et les abonnements avec un contrôle de personnalisation complet.Référez-vous au Guide d’Intégration des Sessions de Paiement pour plus de détails et une liste complète des champs pris en charge.

Format de Réponse

Les sessions de paiement renvoient une réponse JSON avec l’URL de paiement :
{
  "checkout_url": "https://checkout.dodopayments.com/session/..."
}

Gestionnaire de Route du Portail Client

Le Gestionnaire de Route du Portail Client vous permet d’intégrer de manière transparente le portail client Dodo Payments dans votre application Remix.

Paramètres de Requête

customer_id
string
required
L’identifiant du client pour la session du portail (par exemple, ?customer_id=cus_123).
send_email
boolean
Si défini sur true, envoie un e-mail au client avec le lien du portail.
Renvoie 400 si customer_id est manquant.

Gestionnaire de Route de Webhook

  • Méthode : Seules les requêtes POST sont prises en charge. D’autres méthodes renvoient 405.
  • Vérification de Signature : Vérifie la signature du webhook en utilisant webhookKey. Renvoie 401 si la vérification échoue.
  • Validation de Charge Utile : Validée avec Zod. Renvoie 400 pour les charges utiles invalides.
  • Gestion des Erreurs :
    • 401 : Signature invalide
    • 400 : Charge utile invalide
    • 500 : Erreur interne lors de la vérification
  • Routage des Événements : Appelle le gestionnaire d’événements approprié en fonction du type de charge utile.

Gestionnaires d’Événements Webhook Supportés

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>;
onLicenseKeyCreated?: (payload: WebhookPayload) => Promise<void>;

Invite pour 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>

    onSubscriptionPaused?: (payload: WebhookPayload) => Promise<void>

    onSubscriptionPlanChanged?: (payload: WebhookPayload) => Promise<void>

    onSubscriptionCancelled?: (payload: WebhookPayload) => Promise<void>

    onSubscriptionFailed?: (payload: WebhookPayload) => Promise<void>

    onSubscriptionExpired?: (payload: WebhookPayload) => Promise<void>

    onLicenseKeyCreated?: (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