> ## Documentation Index > Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt > Use this file to discover all available pages before exploring further. # Aperçu des Adaptateurs de Framework > Adaptateurs préconstruits pour les frameworks web populaires pour intégrer Dodo Payments en quelques minutes avec un code minimal Dodo Payments fournit des adaptateurs de framework officiels qui simplifient l'intégration des paiements. Chaque adaptateur est conçu pour fonctionner de manière transparente avec les conventions de votre framework, offrant des fonctionnalités de paiement, de portail client et de gestion des webhooks dès le départ. Les adaptateurs de framework vous permettent d'intégrer Dodo Payments en moins de 10 lignes de code. Ils gèrent automatiquement l'authentification, l'analyse des requêtes et le formatage des réponses. ## Adaptateurs de Framework Disponibles Choisissez l'adaptateur qui correspond à votre framework : Prise en charge de l'App Router avec des gestionnaires de routes pour le checkout, le portail et les webhooks Framework full-stack basé sur Vue avec intégration des routes serveur Gestionnaires basés sur middleware pour le framework Node.js populaire Framework Node.js haute performance avec architecture par plugins Framework web ultra-rapide pour l'edge, Cloudflare Workers et plus encore Framework axé sur le contenu avec prise en charge des points de terminaison serveur Framework Svelte full-stack avec intégration des hooks serveur Framework React full-stack avec gestionnaires loader et action Framework React full-stack typé avec fonctions serveur Plugin de framework d'authentification pour une intégration transparente auth + paiements Composant Backend-as-a-Service pour synchronisation des paiements en temps réel Gestionnaires natifs Bun.serve() pour le checkout, le portail et les webhooks ## Fonctionnalités principales Tous les adaptateurs de framework offrent ces capacités intégrées : | Fonctionnalité | Description | | ------------------------------------ | ------------------------------------------------------------------------------------ | | **Gestionnaire de checkout** | Prise en charge des flux de checkout statiques, dynamiques et basés sur des sessions | | **Portail client** | Gestionnaire préconstruit pour gérer les abonnements et la facturation | | **Gestionnaire de webhook** | Vérification sécurisée des signatures avec gestionnaires d'événements typés | | **Configuration de l'environnement** | Configuration simple via des variables d'environnement | | **Sécurité des types** | Prise en charge complète de TypeScript avec des charges utiles typées | ## Démarrage rapide Commencez avec n'importe quel adaptateur de framework en trois étapes : Utilisez votre gestionnaire de paquets pour installer l'adaptateur spécifique au framework : ```bash theme={null} npm install @dodopayments/nextjs ``` ```bash theme={null} npm install @dodopayments/nuxt ``` ```bash theme={null} npm install @dodopayments/express ``` ```bash theme={null} npm install @dodopayments/hono ``` ```bash theme={null} npm install @dodopayments/astro ``` ```bash theme={null} npm install @dodopayments/sveltekit ``` Ajoutez vos identifiants Dodo Payments à votre environnement : ```env theme={null} DODO_PAYMENTS_API_KEY=your-api-key DODO_PAYMENTS_WEBHOOK_KEY=your-webhook-secret DODO_PAYMENTS_RETURN_URL=https://yourdomain.com/checkout/success DODO_PAYMENTS_ENVIRONMENT="test_mode" # or "live_mode" ``` Ne commettez jamais votre fichier `.env` ni vos secrets dans le contrôle de version. Configurez vos routes de checkout, portail client et webhook : ```typescript theme={null} // app/checkout/route.ts import { Checkout } from "@dodopayments/nextjs"; export const GET = Checkout({ bearerToken: process.env.DODO_PAYMENTS_API_KEY, returnUrl: process.env.DODO_PAYMENTS_RETURN_URL, environment: process.env.DODO_PAYMENTS_ENVIRONMENT, }); ``` ```typescript theme={null} import { checkoutHandler } from '@dodopayments/express'; app.get('/api/checkout', checkoutHandler({ bearerToken: process.env.DODO_PAYMENTS_API_KEY, returnUrl: process.env.DODO_PAYMENTS_RETURN_URL, environment: process.env.DODO_PAYMENTS_ENVIRONMENT, })); ``` ```typescript theme={null} import { Checkout } from "@dodopayments/hono"; app.get('/checkout', Checkout({ bearerToken: process.env.DODO_PAYMENTS_API_KEY, returnUrl: process.env.DODO_PAYMENTS_RETURN_URL, environment: process.env.DODO_PAYMENTS_ENVIRONMENT, })); ``` Vous êtes maintenant prêt à traiter des paiements ! Consultez les pages des adaptateurs individuels pour des guides détaillés et toutes les options disponibles. ## Types de flux de checkout Tous les adaptateurs prennent en charge trois types de flux de checkout : Utilisez le checkout statique pour des liens de paiement simples et partageables. Passez l'identifiant du produit comme paramètre de requête : ``` /api/checkout?productId=pdt_xxx&quantity=1 ``` Prend en charge la pré-remplissage client optionnelle et la personnalisation via les paramètres de requête. Utilisez le checkout dynamique pour créer des paiements de manière programmatique avec des détails personnalisés : ```json theme={null} { "product_id": "pdt_xxx", "customer": { "email": "customer@example.com", "name": "John Doe" }, "quantity": 1 } ``` Prend en charge les paiements ponctuels et les abonnements. Utilisez les sessions de checkout pour l'expérience de checkout la plus flexible avec prise en charge du panier : ```json theme={null} { "product_cart": [ { "product_id": "pdt_xxx", "quantity": 1 }, { "product_id": "pdt_yyy", "quantity": 2 } ], "customer": { "email": "customer@example.com" } } ``` En savoir plus dans le [Guide des sessions de checkout](/developer-resources/checkout-session). ## Gestion des événements webhook Tous les adaptateurs offrent une gestion webhook typée avec des rappels d'événements granulaires : ```typescript theme={null} Webhooks({ webhookKey: process.env.DODO_PAYMENTS_WEBHOOK_KEY, onPayload: async (payload) => { // Handle any webhook event }, onPaymentSucceeded: async (payload) => { // Handle successful payments }, onSubscriptionActive: async (payload) => { // Handle new subscriptions }, // ... 20+ event types supported }); ``` Tous les gestionnaires de webhook vérifient automatiquement les signatures et valident les charges utiles à l'aide de schémas Zod. Les requêtes invalides sont rejetées avec les codes d'erreur appropriés. ## Choisir le bon adaptateur | Framework | Idéal pour | Runtime | | ------------------ | --------------------------------------------------------- | -------------- | | **Next.js** | Applications React full-stack avec App Router | Node.js, Edge | | **Nuxt** | Applications Vue.js full-stack | Node.js | | **Express** | API REST et applications Node.js traditionnelles | Node.js | | **Fastify** | API haute performance | Node.js | | **Hono** | Déploiements edge, Cloudflare Workers | Edge, Node.js | | **Astro** | Sites orientés contenu avec points de terminaison serveur | Node.js, Edge | | **SvelteKit** | Applications Svelte full-stack | Node.js | | **Remix** | React full-stack avec routage imbriqué | Node.js | | **TanStack Start** | React full-stack typé | Node.js | | **Better Auth** | Applications déjà sous Better Auth | Divers | | **Convex** | Applications utilisant Convex pour l'arrière-plan | Convex Runtime | | **Bun** | Applications serveur natives Bun | Bun | ## Obtenir de l'aide Besoin d'aide avec les adaptateurs de framework ? * **Discord** : Rejoignez notre [serveur communautaire](https://discord.gg/bYqAp4ayYh) pour obtenir de l'aide en temps réel * **Email** : Contactez-nous à [support@dodopayments.com](mailto:support@dodopayments.com) * **GitHub** : Ouvrez une issue sur le dépôt de l'adaptateur concerné * **Documentation** : Consultez notre [référence API](/api-reference/introduction)