Comment intégrer PayPal Checkout dans une application React

Dans le domaine du commerce électronique, les solutions de paiement numérique ont contribué à une augmentation significative des revenus et à la croissance globale des entreprises en permettant et en traitant facilement les paiements transfrontaliers.

PayPal propose une solution de paiement numérique simple et flexible pour la gestion des transactions en ligne. En intégrant PayPal dans vos applications Web, vous pouvez garantir aux clients une expérience de paiement transparente et sécurisée, ce qui peut entraîner une augmentation des ventes et une confiance globale dans la marque.

Lisez la suite pour savoir comment intégrer PayPal dans vos applications React.

Configurer un compte PayPal Sandbox

PayPal Sandbox est un environnement de test fourni par PayPal afin que vous puissiez tester les intégrations de paiement dans vos applications. Il offre un environnement simulé qui inclut toutes les fonctionnalités de paiement trouvées dans l'environnement de production en direct de PayPal.

Simplement, le bac à sable fournit une plate-forme pour tester les intégrations de paiement sans avoir besoin d'argent réel.

À l'aide du compte sandbox, vous pouvez accéder à un compte PayPal virtuel avec des fonds de test, ce qui vous permet de simuler différents types de transactions et d'intégrations de paiement.

Pour créer un compte sandbox, rendez-vous sur Console développeur PayPal et connectez-vous avec les informations d'identification de votre compte PayPal. Ensuite, sur le tableau de bord du développeur, cliquez sur le Comptes bac à sable bouton.

Pour traiter une transaction PayPal depuis votre application React, vous avez besoin de deux comptes sandbox: un compte professionnel et un compte personnel. Ces deux comptes vous aideront à simuler une transaction complète, à la fois du point de vue du client et du point de vue du commerçant (entreprise).

Il est important de tester la fonctionnalité de l'intégration de paiement sur votre application des deux points de vue.

Clique sur le Créer un compte bouton pour configurer les deux comptes.

Sur la page des paramètres du compte, créez un compte de chaque type: personnel, puis professionnel. Vous utiliserez les informations d'identification du compte personnel pour vous connecter à Le bac à sable de PayPal compte personnel. D'autre part, vous utiliserez les informations d'identification du compte professionnel pour créer un projet sur la console développeur afin d'obtenir l'ID client de PayPal.

Alternativement, au lieu de créer de nouveaux comptes, vous pouvez utiliser les comptes sandbox par défaut fournis par PayPal pour tester les intégrations de paiement.

Créer un projet PayPal

Sur la page du tableau de bord du développeur, cliquez sur le Applications et identifiants bouton et cliquez Créer une application bouton pour configurer un projet PayPal. Ensuite, remplissez le nom de votre application, choisissez Marchand comme type de compte, puis sélectionnez les informations d'identification du compte professionnel que vous avez initialement créé.

Enfin, copiez l'ID client de l'application.

Configurer le client React

Créer une application React, ouvrez le public/index.html fichier, et ajoutez votre ID client au format indiqué ci-dessous dans la section de l'élément principal.

<scénariosrc=" https://www.paypal.com/sdk/js? client-id=votre-client-ID&currency=USD">scénario>

La balise de script charge le SDK JavaScript de PayPal, une bibliothèque qui fournit des fonctionnalités côté client pour interagir avec l'API de PayPal, et la rend disponible pour une utilisation dans les composants React.

En utilisant les fonctions du SDK, vous pouvez créer un bouton de paiement PayPal qui gère le flux de paiement qui implique l'envoi des détails de paiement à PayPal, l'autorisation du paiement et la gestion du paiement réponse.

Créer un composant de produit

Dans le répertoire /src, créez un nouveau dossier de composants et ajoutez deux fichiers: Product.js et PayPalCheckout.js.

Ouvrez le fichier Product.js et ajoutez le code ci-dessous :

importer Réagissez, { useState } depuis"réagir";
importer"./produit.style.css";
importer"../assets/portable.jpg";
fonctionApplication() {
retour (
"Produit-conteneur">
"Contenu du produit">
"produit"> 
exiger("../assets/portable.jpg")} alt="ordinateur portable" />
 </div>
"desc">
 MacBookPro</h2>



 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Maxime mollitia, molestiae quas vel sint commodi repudiandae
 conséquent.
 </p>

Prix: $350.00</h3>
 </div>
 </header>
 </div>
 );
}


exporterdéfaut application ;

Ce code rend un composant de produit simple.

Créer le composant de paiement PayPal

Ajoutez le code suivant au fichier PayPalCheckout.js :

importer Réagir, { useRef, useEffect, useState } depuis"réagir";
importer Échec de paiement depuis"./EchecPaiement";
importer PaymentSuccess depuis"./PaiementSuccès";
fonctionPayPalCommander() {
constante paypal = useRef();
constante [transactionStatus, setTransactionStatus] = useState(nul);
 useEffet(() => {
fenêtre.Pay Pal
 .Boutons({
 créerCommande: (données, actions, erreur) => {
retour actions.order.create({
 intention: "CAPTURE",
 unités_d'achat: [
 {
 description: "Portable MacBook",
 montant: {
 code de devise: "USD",
 valeur: 350.00,
 },
 },
 ],
 });
 },
 sur Approuver: asynchrone (données, actions) => {
constante commande = attendre actions.commande.capture();
console.enregistrer("succès", commande);
 setTransactionStatus("succès");
 },
 surErreur: (se tromper) => {
console.log (erreur);
 setTransactionStatus("échec");
 },
 })
 .rendre (paypal.current);
 }, []);
si (état de la transaction "succès") {
retour<PaymentSuccess />;
 }
si (état de la transaction "échec") {
retour<Échec de paiement />;
 }
retour (



</div>
 </div>
 );
}
exporterdéfaut Paiement PayPal ;

Ce code utilise trois Crochets de réaction: useRef, useState et useEffect. Il utilise useRef pour créer une référence à un élément div, qui servira de conteneur pour le bouton de paiement PayPal.

Il utilise useEffect pour créer un bouton PayPal avec le Pay Pal. Boutons fonction, puis rend ce bouton dans l'élément div référencé par paypal.current méthode.

Le Pay Pal. Boutons La fonction prend un objet avec plusieurs propriétés :

• createOrder: cette fonction renvoie un objet contenant les détails de la commande que l'utilisateur a créée. Les détails de la commande comprendront les détails spécifiques du produit ou du service tels que le montant, le nom du produit, la description et la devise.
• onApprove: cette fonction s'exécute lorsque le paiement est approuvé. Il capture le paiement et enregistre le message de réussite dans la console. Il fixe également le transactionStatus état à succès.
• onError: Cette fonction s'exécute lorsque le paiement rencontre une erreur. Il consigne le message d'erreur dans la console et définit le transactionStatus état à échec.

Enfin, le composant restitue conditionnellement soit le PaymentSuccess ou Échec de paiement composante en fonction de la valeur de transactionStatus État.

Ces deux composants ne seront rendus qu'après une transaction réussie ou échouée. Allez-y et créez deux fichiers: PaymentSuccess.js et PaymentFailure.js dans le dossier des composants et ajoutez un composant fonctionnel avec un élément de paragraphe qui affiche le statut de la transaction.

Mettre à jour le composant App.js

Ouvrez le fichier src/App.js et ajoutez le code ci-dessous :

importer Réagissez, { useState } depuis"réagir";
importer Produit depuis"./composants/Produit";
importer PayPalCommander depuis"./composants/PayPalCheckout";
importer"./App.css";
fonctionApplication() {
constante [paiement, setCheckOut] = useState(FAUX);
retour (

"Application">
"App-header">
 {vérifier? (

 ): (
"Produit">
 NomClasse="vérifier"
 onClick={() => {
 setCheckOut(vrai);
 }}
 >
 Ajouter au panier et passer à la caisse
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
exporterdéfaut application ;

Ce code utilise une approche de rendu conditionnel pour afficher soit le composant PayPalCheckout, soit le composant Product. Le crochet useState initialise une variable d'état appelée checkout comme fausse, qui garde une trace de l'état actuel lorsque la page se charge.

Initialement, React rend le composant Product, y compris le bouton de paiement. Lorsqu'un utilisateur clique sur le bouton de paiement, la fonction de gestionnaire onClick se déclenche pour mettre à jour la variable de paiement sur true. Cette mise à jour invite le composant App à rendre le composant PayPalCheckout à la place.

Fonctionnalités de paiement PayPal supplémentaires

Les fonctionnalités de paiement de PayPal, telles que One Touch et PayPal Credit, permettent à vos clients de bénéficier d'un processus de paiement simplifié, sécurisé, fiable et pratique.

Bien que vous puissiez créer votre propre service de traitement des paiements à partir de zéro, l'utilisation d'une plateforme de paiement comme PayPal est de préférence une alternative plus flexible et efficace. Essentiellement, avec une solution de paiement en place, vous n'avez pas à vous soucier de la gestion de l'infrastructure requise pour mettre en place un service de paiement personnalisé.