1. Accueil
  2. Documents
  3. Comment
  4. Créer une application de paiement sans contact React Native

Créer une application de paiement sans contact React Native

Essayer de créer une solution de paiement sans contact à partir de zéro n'est pas quelque chose que tout le monde a le temps et le courage de faire.
En ce qui concerne l'approche, il existe principalement deux approches réussies de contact sans contact. Le RFC et la méthodologie QR.

La méthodologie RFC

C'est le processus en place dans la plupart des pays d'Europe et d'Amérique du Nord. Les acheteurs utilisent une carte de crédit ou de débit basée sur une puce RFC ou un appareil mobile. Les acheteurs glissent l'appareil sur un lecteur de carte et un vendeur spécialisés, puis se connectent à la carte ou au processeur de paiement.

Aux États-Unis, les implémentations populaires de ce type d'appareils mobiles sont représentées par Apple Pay et Google Pay. La question pour nous de savoir que cette méthode avait quelques inconvénients:

  • Nous avions besoin d'un matériel spécial. Une partie a été louée mensuellement par le vendeur (commerçant).
  • Ce n'était vraiment pas complètement sans contact. Les cartes de débit devaient encore toucher les terminaux du vendeur. D'autres terminaux ont nécessité des confirmations à l'occasion.
  • Être opérationnel dans un magasin du monde réel n'était pas une question d'heures, mais de semaines et de mois.

Les avantages étaient que les utilisateurs connaissent généralement les processus de paiement aux États-Unis.

La méthodologie QR

C'est le modèle asiatique et très populaire en Chine. AliPay et WeChat payent et certains autres utilisent cela comme standard de démarrage du cycle de traitement des paiements.

Les inconvénients ici sont que les utilisateurs aux États-Unis et en Europe connaissent moins bien cette méthodologie que les autres, bien que cela change rapidement. Nous voyons plus d'utilisateurs se familiariser avec les QR à d'autres fins que la publicité. Les utilisateurs les voient maintenant dans les restaurants pour la recherche de menu et sur les locations lors de la location de scooters ou de vélos.

D'où les inconvénients:

une) Connaissance de l'utilisateur avec le processus

b) Étant donné que le traitement se produit sur un appareil différent de l'initiation du paiement, la fermeture de la boucle de paiement nécessite des efforts de la part des programmeurs.

Les avantages sont que ceci, une fois bien fait, est:

une) Très rapide à mettre en œuvre car aucun autre matériel n'est nécessaire

b) Très bon marché pour le vendeur (marchands)

c) Peut être vraiment sans contact même avec des cartes de débit

ré) Peut fermer la boucle de paiement même lorsque le processus est réparti sur plusieurs appareils.

Ainsi, dans ce didacticiel, nous allons nous concentrer sur les paiements sans contact basés sur QR et vous montrer comment rapidement commencez à les utiliser dans vos applications mobiles réactives.

Nous utilisons les paiements sans contact XcooBee car ils nécessitent très peu d'efforts tout en offrant de nombreuses options ainsi que la possibilité de fermer la boucle de notification de paiement. capacités et programmation dans l'application.

Démarrer à partir de zéro

Conditions préalables:

Configuration du backend de traitement des paiements

Dans notre exemple, vous aurez besoin d'un XcooBee Professional compte et un Bande Compte. Ces deux éléments sont gratuits à configurer. Utilisez le tutoriels vidéos ou tutoriel web pour configurer votre premier projet de paiement XcooBee. Cela configure votre infrastructure de base pour traiter les paiements pour votre application. C'est ce dont vous aurez besoin pour effectuer tout le traitement principal.

L'application

Vous pouvez utiliser le projet create react native (CRA) ou Expo comme référence pour notre exemple. Nous utiliserons la version basée sur Expo.

Si vous n'avez jamais installé expo, installez d'abord les outils de ligne de commande:

npm install expo-cli --global

Créez votre projet d'exposition

La création de votre projet d'expo est également simple.

expo init myPayProject => sélectionnez vide (avec Typescript)

cd myPayProject expo start

La dernière commande devrait démarrer une session d'expo avec votre application expo.

Installer des bibliothèques

Maintenant que nous avons une application de base, ajoutons les bibliothèques nécessaires

fil ajouter réagir-natif-svg => ajoute le support SVG nécessaire pour les graphiques vectoriels

fil ajouter @ xcoobee / react-native-xcoobee-payment-sdk => ajoute les bibliothèques XcooBee

App.tsx

Il n'y a qu'un seul fichier que nous devons changer. C'est App.tsx.

Ajoutez une déclaration d'importation à votre section d'importation.
importer XcooBeePaySDK depuis '@ xcoobee / react-native-xcoobee-payment-sdk';

Suivez cela avec la configuration initiale du SDK de paiement. C'est ici que vous pouvez définir l'ID d'installation d'Expo, etc. si vous devez communiquer à votre appareil sur le succès et l'échec. Pour nos besoins, les seuls éléments de configuration nécessaires sont campaignId et formId. Vous pouvez trouver ces valeurs dans la page récapitulative de votre projet de paiement XcooBee. Remplacez vos valeurs au lieu d'utiliser les valeurs d'exemple.

XcooBeePaySDK.setSystemConfig ({campaignId: 'e98.eg0000000', formId: 't000'});

Le reste du code n'est que quelques-uns pour afficher les étiquettes, une pour que l'utilisateur saisisse le montant qu'il souhaite facturer. La valeur par défaut est $1.

Votre App.tsx devrait ressembler à ceci:

importer React à partir de 'react' ; importer {StyleSheet, Text, TextInput, View} depuis 'react-native' ; importer XcooBeePaySDK depuis «@ xcoobee / react-native-xcoobee-payment-sdk» ; // TODO: remplacer par les valeurs réelles de XcooBee Payment Project // Ouvrez votre projet de paiement en mode édition et passez en revue l'écran récapitulatif XcooBeePaySDK.setSystemConfig ({ campaignId : 'e98.eg0000000' , formId : 't000' }); exporter la fonction par défaut App (  ) { const [chargeAmount, setText] = React.useState ( '1.00' ); const XcooBeePayQR = XcooBeePaySDK.createPayQR ( parseFloat (chargeAmount)); return ( < View style = {styles.container} > < Text > Combien voulez-vous facturer:  Text > < TextInput defaultValue = '1.00' style = {{textAlign: ' right '}} onChangeText = {text => setText (text)} value = {chargeAmount} /> < Text style = {{ marginBottom: 20 , marginTop: 20 }}> Veuillez numériser et payer  Texte > {XcooBeePayQR} < Texte > propulsé par XcooBee  Texte >  Afficher >); }

La plupart de ces données sont générées par Expo lors de la création du projet.
Avec cette ligne, nous définissons l'objet QR et le montant que nous voulons représenter:

const XcooBeePayQR = XcooBeePaySDK.createPayQR (parseFloat (chargeAmount)

où le createPayQR est la fonction principale du SDK de paiement et chargeAmount est le montant que nous souhaitons facturer à l'acheteur-utilisateur. Consultez la documentation du SDK de paiement pour des options supplémentaires sur les types de QR pouvant être générés et les options d'appel.

Lorsque nous souhaitons rendre, nous utilisons l'objet QR comme ceci {XcooBeePayQR}.

Cela ajoutera le QR dans votre conteneur de rendu actuel.

Voici l'application en cours d'exécution (cet exemple utilise des codes de projet non valides pour que le cycle de paiement ne puisse pas être démarré):

Example react native app running

Utilisation de notre exemple de pré-construction

Bien sûr, nous avons déjà une application de pré-construction que vous pouvez expérimenter si vous ne voulez pas passer par toutes les étapes. Vous aurez toujours besoin d'une configuration du projet de paiement XcooBee terminée si vous souhaitez traiter les paiements (test ou en direct).

Veuillez remplacer le Identifiant de campagne et identifiant de formulaire dans App.tsx

Exemple de code Expo GitHub

Vous pouvez également le cloner sur votre ordinateur local comme suit:

git clone https://github.com/XcooBee/example-payment-sdk-react-native.git

Toutes nos félicitations

C'est tout ce qu'il faut pour avoir une application qui accepte les paiements sans contact.

Bien sûr, il existe beaucoup plus d'options pour les générations d'URL de QR et de paiement direct que cet exemple ne peut le montrer. N'hésitez pas à expérimenter avec le SDK de paiement XcooBee, le compte professionnel XcooBee et le traitement des paiements Stripe ou Paypal.

Conseil de pro: Si vous utilisez des comptes de test Stripe ou des comptes Sandbox Paypal, vous n'encourrez pas non plus de frais XcooBee.

Vous pouvez expérimenter et affiner à partir d'ici.

Cet article vous a-t-il été utile ? Oui Non

Comment pouvons-nous aider ?