- Projet Next.js existant
- Accès Stripe Test Mode
Aucun accès au dépôt n’est requis. L’accès au projet n’est nécessaire que si vous voulez que Bacodo l’intègre directement.
Module complémentaire Next.js
Ajoutez Stripe Checkout ou Payment Element, PaymentIntents et des webhooks signés à votre projet Next.js App Router existant sans créer de zéro le câblage de la caisse, de 3-D Secure et du gestionnaire de route.
À partir de
$145
USD · Next.js
Intégration Stripe pour Next.js · Next.js
Requirements
Aucun accès au dépôt n’est requis. L’accès au projet n’est nécessaire que si vous voulez que Bacodo l’intègre directement.
Ce que ça fait
Bacodo intègre Stripe dans le projet Next.js que vous possédez déjà. Après le transfert, l'implémentation se trouve dans votre dépôt afin que votre équipe puisse la lire, la modifier et l'étendre. Vous possédez toujours le compte Stripe, les clés API et les frais Stripe.
Le paiement par carte et par portefeuille dans Next.js nécessite PaymentIntents, Checkout ou Payment Element, 3-D Secure, des clés secrètes réservées au serveur et un gestionnaire de route webhook qui vérifie les signatures. Construire ce chemin à partir de zéro est lent et il est facile de se tromper.
Nous ajoutons Stripe.js sur le client Next.js, des gestionnaires de route (ou actions de serveur) qui créent des intentions de paiement ou des sessions de paiement, une vérification de webhook, des pages de réussite/annulation et une configuration d'environnement de test/live pour App Router.
Votre équipe ignore la première implémentation de production de Stripe Next.js : gestionnaires de routeur d'application, SCA, états d'erreur et transfert qui documente comment expédier les clés actives.
Développeurs, équipes techniques, agences et startups qui disposent déjà d'une application Next.js et souhaitent un parcours de paiement de production qu'ils peuvent maintenir.
Fonctions clés
Utilisez Stripe Checkout hébergé ou un élément de paiement intégré sur votre page de paiement Next.js. Les boutons d’entrée de carte, 3-D Secure et de portefeuille restent sur le chemin PCI de Stripe – et non sur un formulaire de carte personnalisé que vous stockez.
Créez des sessions de paiement ou des PaymentIntents dans les gestionnaires de route Next.js. Le navigateur utilise uniquement la clé publiable et le secret client : la clé secrète n'est jamais fournie dans un composant client.
Activez les boutons de portefeuille dans Stripe Checkout ou Payment Element lorsque votre compte et votre domaine Stripe sont vérifiés. La solution de secours Next.js reste lors du paiement par carte.
Expédiez l'application Next.js avec des clés de test Stripe, des cartes de test et un basculement documenté vers les clés actives. Les variables d'environnement Next.js restent en dehors du bundle client.
Le succès du paiement dans l’interface utilisateur Next.js n’est pas la source de la vérité. Un gestionnaire de route vérifie les signatures Stripe et met à jour l'état de la commande ou des droits avant son exécution.
Gérez les cartes refusées, les paiements annulés, les pannes de réseau et les 3-D Secure incomplets afin que l'interface utilisateur Next.js ne laisse pas le client sur une page morte.
Cas d’usage
Vous prenez déjà des commandes ou des réservations dans Next.js et avez besoin du paiement par carte sans réécrire le catalogue ou le flux de réservation.
Vous avez besoin d'un chemin Stripe maintenable dans Next.js, d'une source dans le dépôt client et d'un basculement de clé en direct documenté au lieu d'un prototype Next.js unique.
L'application Next.js doit collecter un premier paiement ou mettre à jour un moyen de paiement pendant que les abonnements et les factures restent sur votre serveur et Stripe Billing si vous les utilisez déjà.
Commencez par les frais client dans l'application Next.js. Les frais Stripe Connect ou de destination peuvent être définis séparément si votre modèle de marché Next.js en a besoin.
Démo
Prévisualisez le chemin de paiement Next.js : panier ou action de paiement, élément de paiement ou de paiement, confirmation et états d'échec. Un bac à sable en direct pour votre compte Stripe est disponible après vérification de compatibilité. Cette page ne traite pas les frais réels.
Comment ça marche
Flux de travail complémentaire Bacodo standard, avec des vérifications spécifiques à Next.js et Stripe pour le routeur d'applications, les gestionnaires de routes et votre couche de données existante.
01
Confirmez l'intégration de Stripe pour Next.js et si le paiement du premier jour est hébergé sur Checkout ou Payment Element.
02
Vérifiez la version Next.js, App Router vs Pages Router, l'interface utilisateur de paiement existante, la base de données et si vous possédez déjà un compte Stripe.
03
Ajoutez Stripe.js, des pages de paiement, des gestionnaires de route pour les sessions ou PaymentIntents et un gestionnaire de webhook signé.
04
Clés de test Wire Next.js, point de terminaison du webhook et configuration du serveur spécifique à l'environnement.
05
Exécutez les cartes de test Stripe, 3-D Secure, les chemins d'annulation/refus et la confirmation du webhook sur l'application Next.js.
06
Fournissez la source Next.js, les notes de configuration et une liste de contrôle des clés en direct. L’implémentation Next.js vous appartient.
Architecture
Le navigateur Next.js ne communique jamais avec Stripe avec une clé secrète. L'élément de paiement ou de paiement utilise un secret client provenant d'un gestionnaire de route. Stripe informe votre webhook Next.js avant de remplir.
Technologies prises en charge
Next.js stable actuel avec App Router est la valeur par défaut. Pages Router peut être étendu si c'est ce que votre dépôt Next.js utilise déjà.
Stripe.js officiel sur le client Next.js et stripe sur le serveur pour les sessions, les PaymentIntents et la vérification du webhook.
Les mises à jour des commandes ou des droits restent dans la base de données ou dans l'API que votre application Next.js utilise déjà. Nous ne remplaçons pas votre backend par un service uniquement Bacodo.
Votre compte Stripe, vos clés de test et en direct utilisées par Next.js, le point de terminaison du webhook et les événements du tableau de bord. Les frais de traitement Stripe restent à la charge de Stripe.
Un hôte qui peut exécuter les gestionnaires de route Next.js et recevoir des webhooks Stripe (par exemple Vercel ou un serveur Node). L’exportation statique uniquement n’est pas suffisante pour ce chemin de paiement.
Ce qui est inclus
Pricing
Ce prix concerne uniquement la plateforme Next.js. Il n'utilise pas la tarification des modules complémentaires Django ou Flutter.
Intégration Stripe pour Next.js
Ajoutez des paiements Stripe prêts pour la production à une application Next.js existante et conservez le code source.
Prérequis
$145
paiement uniqueNext.js
Besoin d’un backend ?
Paiement sécurisé viastripe
Livraison et sécurité
L'intégration typique de la caisse Next.js Stripe est définie après la vérification de la compatibilité Next.js. La chronologie dépend de votre interface utilisateur de paiement Next.js et de votre couche de données actuelles.
Les cartes en mode test, les chemins 3-D Secure, d'annulation et de refus sont exercés sur l'application Next.js avant la remise.
Les clés secrètes Stripe et les secrets de signature de webhook restent dans l'environnement du serveur. Le navigateur Next.js ne reçoit qu'une clé publiable et des secrets client de courte durée.
Le gestionnaire de route du webhook Next.js vérifie les signatures Stripe avant de mettre à jour la commande ou l'état des droits.
Nous ne revendiquons pas la certification PCI, l’absence de fraude ou les taux d’approbation garantis. Les données de la carte Next.js sont collectées via Stripe Checkout ou Payment Element, et non via un formulaire de carte personnalisé que nous stockons.
FAQ
L'intégration Stripe pour Next.js inclut Stripe.js, Checkout ou Payment Element sur votre page de paiement Next.js existante, la création de PaymentIntent ou de session de paiement dans les gestionnaires de route, un gestionnaire de webhook signé, une couverture de test et des notes de transfert. Vous recevez la source Next.js dans votre projet. Les frais Stripe et votre compte Stripe sont distincts.
Oui. Stripe Integration for Next.js est conçu pour un projet Next.js que vous possédez déjà. Nous intégrons le paiement et le point d'entrée de paiement dans vos itinéraires et votre interface utilisateur Next.js actuels au lieu d'expédier une application de démonstration distincte comme livrable.
Oui pour un chemin de production Next.js Stripe. PaymentIntents, Checkout Sessions et la clé secrète doivent résider sur le serveur. Le navigateur Next.js reçoit uniquement une clé publiable et un secret client. Une exportation Next.js statique uniquement ne peut pas héberger ce chemin de webhook.
Stripe Integration for Next.js utilise Stripe.js officiel sur le client et le SDK Stripe Node dans les gestionnaires de route Next.js. Nous n'englobons pas le paiement Next.js dans un plugin non documenté, sauf si vous en avez explicitement besoin.
Oui lorsque votre compte Stripe, la vérification de domaine et vos appareils les prennent en charge. Dans Next.js, les boutons du portefeuille sont facultatifs. Le paiement par carte ou l'élément de paiement sur Next.js reste la solution de secours par défaut.
La portée de l'intégration Stripe par défaut pour Next.js est App Router. Les routes de l'API Pages Router peuvent être incluses si c'est ce que votre référentiel Next.js utilise déjà et nous l'acceptons lors de la vérification de compatibilité Next.js.
Le client Next.js peut confirmer un PaymentIntent ou démarrer une session de paiement via Stripe.js. Les produits de facturation Stripe récurrents, le portail client et la logique de facturation sont en direct sur le serveur. Les travaux Next.js nécessitant beaucoup d'abonnements peuvent nécessiter un devis personnalisé.
Le navigateur Next.js utilise uniquement la clé publiable Stripe. La clé secrète et le secret de signature du webhook restent dans les variables d'environnement du serveur utilisées par les gestionnaires de routes. Stripe Integration for Next.js ne place pas de clés secrètes dans les composants clients.
Nous implémentons d'abord l'intégration Stripe pour Next.js sur les clés de test et les cartes de test Stripe. La mise en ligne est une transition documentée de clé et de webhook dans votre environnement de serveur Stripe Dashboard et Next.js, et non une activation de licence complémentaire.
Stripe Checkout et Payment Element gèrent 3-D Secure via Stripe.js. La page Next.js doit maintenir le flux de paiement en vie jusqu'à ce que Stripe renvoie un statut final ; Stripe Integration for Next.js câble explicitement ces états.
Oui pour l'exécution après le paiement Next.js ou l'élément de paiement. L'interface utilisateur Next.js n'est pas la source de vérité. Un gestionnaire de route vérifie les signatures des webhooks Stripe, puis marque la commande payée, déverrouille le contenu ou notifie l'exécution.
Oui. L'intégration Stripe pour Next.js conserve généralement votre produit Next.js, votre panier et votre bouton de paiement et ouvre la caisse ou monte l'élément de paiement à partir de cette action. Un formulaire de carte Next.js personnalisé qui touche les données brutes PAN n'est pas compris dans la portée par défaut, car Checkout ou Payment Element est le chemin PCI le plus sûr.
Non. Vous créez et possédez le compte Stripe, les clés API et les frais de traitement Stripe. Le prix du module complémentaire Next.js est une implémentation dans votre projet Next.js, et non une licence de paiement Bacodo.
Non. Les biens numériques vendus dans une boutique d’applications nécessitent souvent encore un IAP. L'intégration Stripe pour Next.js est destinée au paiement Stripe dans un site Web ou une application Web Next.js où Stripe est un mode de paiement autorisé pour votre type de produit.
Oui. Les métadonnées de PaymentIntent ou de session de paiement, les enregistrements client et les champs que vous conservez après la confirmation du webhook sont alignés sur votre modèle de commande Next.js existant lors de l'intégration de Stripe pour Next.js.
La source Next.js se trouve dans votre dépôt, afin que votre équipe puisse la maintenir. Le support inclus de 30 jours couvre les questions techniques et les défauts dans la portée de l'intégration Stripe pour Next.js fournie, et non sans rapport avec les fonctionnalités Next.js.
Pendant la période de 30 jours, nous aidons en cas de rupture de l'intégration Next.js livrée causée par une modification documentée de Stripe ou Stripe.js. Les mises à niveau continues du package Next.js constituent ensuite votre maintenance ou votre support technique étendu si vous l'achetez.
Nous documentons comment lire l'état de l'intention de paiement ou de la session de paiement, les journaux du tableau de bord Stripe et la livraison du webhook à partir du chemin de paiement Next.js. L'assistance de 30 jours comprend le dépannage des refus, les abandons de 3-D Secure et les clés mal configurées pour le flux Next.js fourni.
Nous confirmons votre version Next.js, App Router ou Pages Router et votre environnement d'exécution Node par rapport au SDK Stripe que nous épinglons au moment de l'intégration. Les environnements d’exécution Next.js plus anciens ou fortement fourchus peuvent nécessiter une portée supplémentaire.
30 jours après le transfert sont inclus pour le chemin Next.js Stripe livré. Le support technique étendu est facultatif à 20 % du prix du module complémentaire Next.js et couvre six mois supplémentaires d'aide technique sur cette même intégration Next.js, et non sur une nouvelle version de produit.
Ajoutez des paiements Stripe prêts pour la production à votre application Next.js existante, conservez le code source et évitez de créer un paiement à partir de zéro.
$145