Libre et open source, Ionique offre une bibliothèque de composants d'interface utilisateur optimisés pour les mobiles, de gestes et d'outils pour créer des applications rapides et hautement interactives. Vous pouvez utiliser votre langue maternelle Javascript et compétences en développement Web
Avec XcooBee, vous pouvez facilement ajouter une solution de paiement sans contact à votre projet avec quelques lignes de codage. L'implémentation est sécurisée et facilement gérée sur de nombreux appareils et peut inclure des notifications push et des workflows de traitement d'entreprise sans serveur complexes. Cela vous permet d'arriver rapidement sur le marché avec une solution complète plutôt que d'y consacrer des cycles de développement.
En ce qui concerne l'approche, il existe principalement deux approches efficaces pour les paiements 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.
XcooBee n'est pas non plus un système en boucle fermée comme les autres fournisseurs. Les consommateurs n'ont pas besoin d'une application ou d'un compte pour participer, ce qui le rend beaucoup plus acceptable dans vos solutions.
Démarrer à partir de zéro
Conditions préalables:
- Noeud 12
- Libre Bande Compte
- Libre XcooBee Professional Compte
- CLI ionique
Installez Ionic Client si vous ne l'avez pas:
npm install -g @ ionic / cli
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éosou 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
Nous allons commencer avec un modèle Ionic React pour commencer. Nous le ferons à partir de votre ligne de commande ou de votre console.
Si vous n'avez jamais installé Ionic, installez d'abord les outils de ligne de commande en tapant ce qui suit dans votre console:
ionic start myPaymentApp blank --type = react
Cela installera le modèle Ionic vierge en utilisant la React JS comme syntaxe.
une fois terminé, accédez au répertoire de l'application nouvellement créée.
cd myPaymentApp
Installer des bibliothèques
Maintenant que nous avons une application de base, ajoutons les bibliothèques nécessaires
npm install @ xcoobee / payment-sdk --save
C'est tout ce qui est nécessaire.
Démarrez l'application en tapant:
service ionique
Si votre navigateur ne s'ouvre pas automatiquement après avoir vu Fichiers émis avec succès. message dans la console essayez d'accéder manuellement à la page de démarrage: http://localhost:8100/home
Ça devrait ressembler à ça:
Home.tsx
Il n'y a qu'un seul fichier que nous devons changer. C'est Home.tsx. Devrait être situé dans {app} /src/Pages/Home.tsx
Importations
Supprimez toutes les instructions d'importation existantes et nous allons les créer. Ce sont les composants que nous utiliserons sur notre page d'exemple de Ionic Framework:
importer {IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonFooter, IonRow, IonCol, IonItem, IonInput, IonImg} depuis '@ ionic / react';
Modifiez l'import JS réactif comme ceci afin d'inclure useEffect ce qui nous permet d'utiliser des crochets. Les crochets vous permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe:
importer React, {useEffect, useState} de 'react';
Maintenant, ajoutez le support XcooBee à la page:
importer XcooBeePaySDK depuis '@ xcoobee / react-native-xcoobee-payment-sdk';
Dans l'ensemble, voici à quoi devrait ressembler votre section d'importation:
importer {IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonFooter, IonRow, IonCol, IonItem, IonInput, IonImg} depuis '@ ionic / react'; importer React, {useEffect, useState} de 'react'; importer {BrowserXcooBeePaymentSDK} depuis '@ xcoobee / payment-sdk'; import './Home.css';
Initialiser XcooBee
Nous devons maintenant initialiser la classe XcooBee. Voici où vous pouvez définir un appareil de notification push ou installer un identifiant, etc. Cela serait nécessaire si vous devez communiquer à votre appareil sur le succès et l'échec du paiement. Pour nos besoins, les seuls éléments de configuration nécessaires sont campaignId et formId. Vous pouvez trouver ces valeurs dans la page Résumé de votre assistant de projet de paiement XcooBee. Remplacez vos valeurs au lieu d'utiliser les valeurs d'exemple.
const sdk = new BrowserXcooBeePaymentSDK ({campaignId: "test", formId: "test"});
La logique
Nous voulons avoir des espaces réservés et des gestionnaires pour que l'utilisateur spécifie le montant qu'il souhaite facturer et le code QR à rendre.
Nous utilisons l'appel sdk à l'intérieur useEffect et l'initialiser avec 123.00de chargeAmount et utilisez le mot Ordre pour décrire la raison du paiement. La devise finale pour cela serait déterminée par la configuration de votre projet XcooBee. Vous pouvez y apporter des modifications dans votre interface graphique / console XcooBee.
Nous effectuerons également un nouveau rendu lorsque l'utilisateur appuiera sur produire bouton.
const [chargeAmount, setNumber] = useState (123,00); const [qr, setQr] = useState (); useEffect (() => {sdk.createPayQr ({amount: chargeAmount, reference: "Order"}, 300) .then (base64 => setQr (base64));}, []);
Le rendu
Pour cela, veuillez supprimer toutes les balises entre les revenir ( ) et remplacez par cette mise en page pour votre page Ionic.
<ionpage>
<ionheader>
<iontoolbar>
<iontitle>Paiement sans contact</iontitle>
</iontoolbar>
</ionheader>
<ioncontent classname="myphoto">
<ionheader collapse="condense">
<iontoolbar>
<iontitle size="large">Paiement sans contact</iontitle>
</iontoolbar>
</ionheader>
<ionrow >
<ioncol classname="ion-text-center">
Combien souhaitez-vous facturer ?
<ionitem>
<ioninput type="number" value="{chargeAmount}" placeholder="Enter Amount" onionchange="{e" > setNumber(parseInt(e.detail.value!, 10))}></ioninput>
</ionitem>
<ionbutton color="primary" onclick="{e" > {sdk.createPayQr({ montant : chargeAmount, référence : "Commande" }, 300).then(base64 => setQr(base64)); }}>Générer</ionbutton>
</ioncol>
</ionrow>
{/* qr espace image */}
<div classname="vertical-center">
<div classname="center">
<ionimg src="{qr}" classname="ion-align-self-end" />
</div>
</div>
</ioncontent>
<ionfooter>
<b>https://www.xcoobee.com</b>
</ionfooter>
</ionpage>
La plupart de ces informations sont générées par un passe-partout. Ajout d'un en-tête et pied de page et d'un bouton. Avec cette ligne, nous rendons le QR:
Vous pouvez utiliser un XcooBee QR partout où vous utiliseriez une image. C'est aussi simple que cela.
Nous avons également ajouté un sur clic événement à la pour restituer la base sur les informations mises à jour que l'utilisateur a saisies.
Formatage final
Vous remarquez que le code QR occupe toute la partie inférieure de l'écran. Il est agrandi pour s'adapter au conteneur. Ajoutons un peu de magie de formatage CSS en changeant le Home.css fichier dans le même dossier. Cela empêchera la mise à l'échelle et centrera l'image. Ajoute ça
Home.css:
.vertical-center {display: flex; align-items: centre; justifier-contenu: centre; hauteur: 100%; }
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é):
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 Home.tsx
Exemple de code ionique GitHub
Vous pouvez également le cloner sur votre ordinateur local comme suit:
git clone https://github.com/XcooBee/example-payment-sdk-ionic.git
example-payment-sdk-ionic.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.
Plus d'assistance
S'il vous plaît contactez XcooBee si vous avez besoin d'explorer l'ajout de paiements sans contact et l'activation du commerce électronique de fichiers PDF pour votre environnement.
