- Projet React existant
- Accès Stripe Test Mode
- Un backend est requis pour des paiements sécurisés
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 React
Ajoutez Stripe.js, Payment Element et le paiement secret client à votre React SPA existant sans créer d'erreurs Elements, 3-D Secure et de clé secrète à partir de zéro. React n'héberge pas de webhooks, mais votre API le fait.
À partir de
$145
USD · React
Intégration Stripe pour React · React
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 React que vous possédez déjà (Vite, CRA ou similaire). Après le transfert, la source React réside dans votre dépôt. La clé secrète et le webhook restent sur un backend que vous exécutez déjà. Vous possédez toujours le compte Stripe et les frais Stripe.
Un React SPA ne peut pas créer en toute sécurité des PaymentIntents ou vérifier des webhooks. Il a besoin de Stripe.js, Elements ou Checkout et d'un backend qui renvoie un secret client. Le bâtiment qui s'est mal divisé envoie la clé secrète dans le paquet.
Nous ajoutons @stripe/react-stripe-js, un écran de paiement dans votre arborescence React, et les appels de récupération dont votre API existante a déjà besoin pour PaymentIntents. La vérification du Webhook est câblée sur cette API, pas dans React.
Votre équipe ignore la première implémentation de production de Stripe React : Elements, SCA, env pour la clé publiable et un transfert qui documente la manière dont React communique avec votre API.
Développeurs et agences qui disposent déjà d'une interface React et d'une API et qui souhaitent un chemin Stripe maintenable sans migrer le SPA vers Next.js.
Fonctions clés
Montez l'élément de paiement Stripe avec @stripe/react-stripe-js sur votre itinéraire de paiement React. Les données de la carte restent sur Stripe – et non dans l'état React, vous persistez.
L'application React utilise uniquement la clé publiable et un secret client de courte durée de votre API. Stripe Integration for React ne met pas STRIPE_SECRET_KEY dans l'environnement Vite ou CRA fourni avec le navigateur.
Activez les portefeuilles dans Payment Element lorsque votre compte et votre domaine Stripe les autorisent. Le repli de React reste sur les éléments de la carte.
Expédiez d'abord le React SPA avec la clé publiable de test Stripe. Le basculement en direct est un changement d'environnement documenté ainsi que le secret en direct correspondant sur votre API.
Un écran de réussite React n'est pas la source de la vérité. Votre API vérifie le webhook Stripe, puis l'application React lit l'état payant à partir de cette API.
Gérez les cartes refusées, les éléments annulés, les pannes de réseau et les 3-D Secure incomplets afin que l'interface utilisateur de React ne laisse pas le client sur un écran mort.
Cas d’usage
Vous disposez déjà d'un React SPA et d'une API. Vous avez besoin du paiement Elements sans réécrire le catalogue dans Next.js.
Vous avez besoin d'un chemin Stripe maintenable dans React, d'une source dans le dépôt client et d'un basculement de clé en direct documenté au lieu d'une démo CodeSandbox.
L'application React collecte un premier moyen de paiement tandis que les abonnements restent sur votre API et Stripe Billing si vous les utilisez déjà.
Stripe Integration for React est le côté SPA. Si vous avez également besoin de construire l'API, qui est définie séparément, ce prix ne concerne pas un nouveau backend.
Démo
Prévisualisez le chemin de paiement de React : action de paiement, élément 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 à React pour Vite/CRA, React Router et l'API que le SPA appelle déjà.
01
Confirmez l'intégration de Stripe pour React et que vous disposez (ou allez développer) une API capable de créer des PaymentIntents.
02
Vérifiez la version de React, le bundler, l'interface utilisateur de paiement existante et le langage backend que le SPA utilise déjà.
03
Ajoutez Stripe.js, Elements, les composants de paiement et le contrat de récupération à votre point de terminaison PaymentIntent.
04
Câblez la clé publiable via l'environnement public Vite/CRA. La clé secrète et le webhook restent sur l'API.
05
Exécutez les cartes de test Stripe, 3-D Secure, annulez/refusez et confirmez l'état des mises à jour du webhook de l'API lu par l'application React.
06
Fournissez la source React, des notes d'environnement et une liste de contrôle des clés en direct. L’implémentation de React vous appartient.
Architecture
Le bundle React ne contient jamais la clé secrète. Elements utilise un secret client de votre API. Stripe informe cette API par webhook. React lit ensuite l'état de la commande.
Technologies prises en charge
React actuel sur Vite, CRA ou un bundle SPA similaire. Il ne s'agit pas d'un atterrissage du routeur d'application Next.js — voir Intégration Stripe pour Next.js pour cette pile.
Liaisons officielles Stripe React pour l’élément de paiement et les portefeuilles.
Création de PaymentIntent et vérification du webhook sur le backend que l'application React appelle déjà. Ce module complémentaire ne remplace pas cette API par un service réservé à Bacodo.
Votre compte Stripe, vos clés de test et en direct, le point de terminaison du webhook sur l'API et les événements du tableau de bord.
Le React SPA peut être statique. Le webhook ne le peut pas. Un hôte uniquement statique sans API ne peut pas effectuer ce chemin de paiement.
Ce qui est inclus
Pricing
Ce prix concerne uniquement la plateforme React SPA. Il n'utilise pas la tarification des modules complémentaires Next.js, Django, Flutter ou React Native.
Intégration Stripe pour React
Ajoutez des paiements Stripe prêts pour la production à un React SPA existant et conservez le code source.
Prérequis
$145
paiement uniqueReact
Besoin d’un backend ?
Paiement sécurisé viastripe
Livraison et sécurité
La vérification typique de React Stripe est étendue après la vérification de compatibilité de React. La chronologie dépend de votre interface utilisateur et de votre API de paiement React actuelles.
Les cartes en mode test, les chemins 3-D Secure, d'annulation et de refus sont exercés sur le React SPA avant notre remise.
Seule la clé publiable est publique. Les clés secrètes et les secrets des webhooks restent sur le serveur appelé par l'application React.
React ne vérifie pas Stripe-Signature. Votre API le fait, puis React lit le résultat.
Nous ne revendiquons pas la certification PCI ou le zéro fraude. React collecte les cartes via Stripe Elements, et non via un formulaire de carte personnalisé que nous stockons.
FAQ
L'intégration Stripe pour React comprend Stripe.js, l'élément de paiement sur votre écran de paiement React existant, le contrat de récupération vers votre API PaymentIntent, la couverture des tests et les notes de transfert. Vous recevez le source React dans votre projet. Les frais Stripe, votre compte Stripe et la création d'un nouveau backend sont distincts.
Oui. Stripe Integration for React est conçu pour un React SPA que vous possédez déjà (Vite, CRA ou similaire). Nous intégrons l'élément de paiement et le point d'entrée de paiement dans vos itinéraires et votre interface utilisateur React actuels au lieu d'expédier une application de démonstration distincte comme livrable.
Oui pour un chemin de production React Stripe. PaymentIntents, la clé secrète et la vérification du webhook doivent résider sur un serveur. Le navigateur React ne reçoit qu'une clé publiable et un secret client. Un hôte React statique uniquement ne peut pas terminer ce chemin de récupération.
Stripe Integration for React utilise Stripe.js et @stripe/react-stripe-js officiels pour les éléments de paiement et les portefeuilles. Nous n'englobons pas la vérification React 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 React, les boutons du portefeuille sont facultatifs. L’élément de paiement par carte sur React reste la solution de secours par défaut.
Non. Stripe Integration for React est un chemin SPA. Le routeur d'application Next.js et les gestionnaires de route sont une intégration Stripe pour Next.js. Nous ne migrons pas un React SPA vers Next.js dans le cadre de ce prix du module complémentaire React.
Le client React peut confirmer un PaymentIntent ou collecter un mode de paiement via Stripe.js. Les produits de facturation Stripe récurrents, le portail client et la logique de facturation sont en direct sur votre API. Les travaux React nécessitant beaucoup d'abonnements peuvent nécessiter un devis personnalisé.
Le navigateur React utilise uniquement la clé publiable Stripe via l'environnement public Vite ou CRA. La clé secrète et le secret de signature du webhook restent sur votre API. Stripe Integration for React ne met pas de clés secrètes dans le bundle React.
Nous implémentons d'abord l'intégration Stripe pour React avec les clés de test et les cartes de test Stripe. La mise en ligne est un changement documenté de clé publiable dans React, ainsi que le secret en direct et le webhook correspondant sur votre API, et non une activation de licence complémentaire.
Stripe Payment Element gère 3-D Secure via Stripe.js. La page React doit maintenir le flux de paiement en vie jusqu'à ce que Stripe renvoie un statut final ; Stripe Integration for React connecte explicitement ces états.
Oui pour l'exécution après React Payment Element. L'interface utilisateur de React n'est pas la source de la vérité. Votre API vérifie les signatures des webhooks Stripe, puis marque la commande payée, déverrouille le contenu ou notifie l'exécution. React lit ensuite cet état.
Oui. L'intégration Stripe pour React conserve généralement votre produit React, votre panier et votre bouton de paiement et monte l'élément de paiement à partir de cette action. Un formulaire de carte React personnalisé qui touche les données brutes PAN n'est pas compris dans la portée par défaut, car l'élément de paiement 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 React est une implémentation dans votre projet React, 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 React est destinée au paiement Stripe sur un site Web ou un SPA React où Stripe est un mode de paiement autorisé pour votre type de produit.
Oui. Les métadonnées PaymentIntent, les enregistrements client et les champs que vous conservez après la confirmation du webhook sont alignés sur votre modèle de commande existant lors de l'intégration Stripe pour React. L'application React affiche uniquement ce que votre API renvoie.
La source React se trouve dans votre dépôt, afin que votre équipe puisse la maintenir. L'assistance incluse de 30 jours couvre les questions techniques et les défauts dans la portée de l'intégration Stripe pour React fournie, et non les travaux sur les fonctionnalités React sans rapport.
Pendant la période de 30 jours, nous aidons en cas de rupture de l'intégration React livrée causée par une modification documentée de Stripe ou Stripe.js. Les mises à niveau continues du package React constituent ensuite votre maintenance ou votre support technique étendu si vous l'achetez.
Nous documentons comment lire le statut PaymentIntent, les journaux du tableau de bord Stripe et la livraison des webhooks à partir du chemin de paiement React. 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 React fourni.
Nous confirmons votre version de React, votre bundler (Vite, CRA ou similaire) et l'API que le SPA appelle déjà contre la version Stripe.js que nous épinglons au moment de l'intégration. Les environnements d'exécution React plus anciens ou fortement fourchus peuvent nécessiter une portée supplémentaire.
30 jours après la remise sont inclus pour le chemin React Stripe livré. Le support technique étendu est facultatif à 20 % du prix de ce module complémentaire React et couvre six mois supplémentaires d'assistance technique sur cette même intégration React, et non sur une nouvelle version de produit.
Ajoutez des paiements Stripe prêts pour la production à votre React SPA existant, conservez le code source et gardez les secrets sur votre API.
$145