1. Zuhause
  2. Dokumente
  3. Wie man
  4. Erstellen Sie React Native Contactless Payment App

Erstellen Sie React Native Contactless Payment App

Der Versuch, eine kontaktlose Zahlungslösung von Grund auf neu zu entwickeln, ist nicht jedermanns Sache.
In Bezug auf die Herangehensweise gibt es hauptsächlich zwei erfolgreiche Herangehensweisen an kontaktlose, denen man folgen kann. Die RFC- und die QR-Methodik.

Die RFC-Methodik

Dies ist der etablierte Prozess in den meisten Teilen Europas und Nordamerikas. Käufer verwenden eine RFC-Chip-basierte Kredit- oder Debitkarte oder ein mobiles Gerät. Käufer wischen das Gerät über einen speziellen Kartenleser und Verkäufer und verbinden sich dann mit der Karte oder dem Zahlungsprozessor.

Beliebte Implementierungen in den USA für mobile Geräte sind Apple Pay und Google Pay. Das Problem für uns, was diese Methode ein paar Nachteile hatte:

  • Wir brauchten spezielle Hardware. Einige davon wurden monatlich vom Verkäufer (Händler) gemietet.
  • Es war wirklich nicht völlig berührungslos. Debitkarten müssen weiterhin die Terminals des Verkäufers berühren. Andere Terminals erforderten gelegentlich Bestätigungen.
  • Die Inbetriebnahme in einem Laden in der realen Welt war keine Frage von Stunden, sondern von Wochen und Monaten.

Die Vorteile waren, dass die Benutzer meist mit den Zahlungsprozessen in den USA vertraut sind.

Die QR-Methodik

Dies ist das asiatische Modell und in China sehr beliebt. Sowohl AliPay als auch WeChat Pay und einige andere verwenden dies als Standard für den Start des Zahlungsverarbeitungszyklus.

Die Nachteile hierbei sind, dass Benutzer in den USA und in Europa mit dieser Methode weniger vertraut sind als mit anderen, obwohl sich dies schnell ändert. Wir sehen, dass sich mehr Benutzer mit QRs für andere Zwecke als für Werbung vertraut machen. Benutzer sehen sie jetzt in Restaurants zur Menüsuche und beim Mieten von Rollern oder Fahrrädern.

Also die Nachteile:

ein) Vertrautheit des Benutzers mit dem Prozess

b) Da die Verarbeitung auf einem anderen Gerät als der Zahlungsinitiierung erfolgt, erfordert das Schließen der Zahlungsschleife einen Aufwand für die Programmierer.

Die Vorteile sind, dass dies, wenn es richtig gemacht wird, ist:

ein) Sehr schnell zu implementieren, da keine andere Hardware benötigt wird

b) Sehr günstig für Verkäufer (Händler)

c) Kann auch mit Debitkarten wirklich kontaktlos sein

d) Kann die Zahlungsschleife schließen, selbst wenn der Prozess auf mehrere Geräte verteilt ist.

Daher konzentrieren wir uns in diesem Tutorial auf QR-basierte kontaktlose Zahlungen und zeigen Ihnen, wie es geht schnell Verwenden Sie sie in Ihren reaktionsbasierten mobilen Anwendungen.

Wir verwenden die kontaktlosen XcooBee-Zahlungen, da sie nur einen geringen Aufwand erfordern und gleichzeitig viele Optionen sowie die Möglichkeit bieten, die Zahlungsbenachrichtigungsschleife zu schließen. Fähigkeiten und Programmierung in der App.

Erste Schritte von Grund auf neu

Voraussetzungen:

Einrichten des Zahlungsverarbeitungs-Backends

In unserem Beispiel benötigen Sie eine XcooBee Professional Konto und a Streifen Konto. Beide können kostenlos eingerichtet werden. Verwenden Sie die Videoanleitungen oder Web-Tutorial um Ihr erstes XcooBee-Zahlungsprojekt zu konfigurieren. Dadurch wird Ihre Basisinfrastruktur eingerichtet, um Zahlungen für Ihre App zu verarbeiten. Dies ist, was Sie benötigen, um die gesamte Back-End-Verarbeitung durchzuführen.

Die App

In unserem Beispiel können Sie das CRA-Projekt (React Native) oder das Expo-Projekt als Basis verwenden. Wir werden die Expo-basierte Version verwenden.

Wenn Sie expo noch nie installiert haben, installieren Sie zuerst die Befehlszeilentools:

npm install expo-cli --global

Erstellen Sie Ihr Expo-Projekt

Das Erstellen Ihres Ausstellungsprojekts ist ebenfalls unkompliziert.

expo init myPayProject => leer auswählen (mit Typoskript)

cd myPayProject expo start

Der letzte Befehl sollte eine Expo-Sitzung mit Ihrer Expo-App starten.

Installieren Sie Bibliotheken

Jetzt, da wir eine Basis-App haben, können wir die benötigten Bibliotheken hinzufügen

Garn hinzufügen React-Native-SVG => Fügt die benötigte SVG-Unterstützung für Vektorgrafiken hinzu

Garn hinzufügen @ xcoobee / reagieren-native-xcoobee-Zahlung-sdk => fügt die XcooBee-Bibliotheken hinzu

App.tsx

Es gibt nur eine Datei, die wir ändern müssen. Das ist App.tsx.

Fügen Sie Ihrem Importabschnitt eine Importanweisung hinzu.
XcooBeePaySDK aus '@ xcoobee / react-native-xcoobee-payment-sdk' importieren;

Folgen Sie dieser mit der Erstkonfiguration des Zahlungs-SDK. Hier können Sie die Expo-Installations-ID usw. festlegen, wenn Sie über Erfolg und Misserfolg mit Ihrem Gerät kommunizieren müssen. Für unsere Zwecke werden nur Konfigurationselemente benötigt Kampagnen-ID und formId. Sie finden diese Werte auf Ihrer Übersichtsseite zum XcooBee-Zahlungsprojekt. Ersetzen Sie Ihre Werte, anstatt die Beispielwerte zu verwenden.

XcooBeePaySDK.setSystemConfig ({Kampagnen-ID: 'e98.eg0000000', Form-ID: 't000'});

Der Rest des Codes besteht nur aus wenigen um Etiketten anzuzeigen, eine Damit der Benutzer den Betrag eingibt, den er berechnen möchte. Der Standardwert ist $1.

Ihre App.tsx sollte so aussehen:

importieren Reagieren von 'reagieren' ; {StyleSheet, Text, TextInput, View} aus 'react-native' importieren ; Import XcooBeePaySDK von '@ xcoobee / reagieren-native-xcoobee-Payment-sdk'; // TODO: Ersetzen durch tatsächliche Werte aus dem XcooBee-Zahlungsprojekt // Öffnen Sie Ihr Zahlungsprojekt im Bearbeitungsmodus und überprüfen Sie den Zusammenfassungsbildschirm XcooBeePaySDK.setSystemConfig ({ Kampagne -ID : 'e98.eg0000000' , formId : 't000' }); Exportstandardfunktion App (  ) { const [ChargeAmount, setText] = React.useState ( '1.00' ); const XcooBeePayQR = XcooBeePaySDK.createPayQR ( parseFloat (ChargeAmount)); return ( < View style = {styles.container} > < Text > Wie viel möchten Sie berechnen:  Text > < TextInput defaultValue = '1.00' style = {{textAlign: ' right '}} onChangeText = {text => setText (text)} value = {ChargeAmount} /> < Text style = {{ marginBottom: 20 , marginTop: 20 }}> Bitte scannen und bezahlen  Text > {XcooBeePayQR} < Text > powered by XcooBee  Text >  Ansicht >); }}

Das meiste davon wird von Expo während der Projekterstellung erstellt.
Mit dieser Zeile definieren wir das QR-Objekt und den Betrag, den wir darstellen möchten:

const XcooBeePayQR = XcooBeePaySDK.createPayQR (parseFloat (ChargeAmount)

bei dem die createPayQR ist die Hauptfunktion aus dem Payment SDK und Ladungsmenge ist der Betrag, den wir dem Käufer-Benutzer in Rechnung stellen möchten. Weitere Optionen für generierbare QR-Typen und Anrufoptionen finden Sie in der Dokumentation zum Zahlungs-SDK.

Wenn wir rendern möchten, verwenden wir das QR-Objekt wie folgt {XcooBeePayQR}.

Dadurch wird der QR in Ihrem aktuellen Rendercontainer hinzugefügt.

Hier ist die Anwendung beim Ausführen (in diesem Beispiel werden ungültige Projektcodes verwendet, sodass der Zahlungszyklus nicht gestartet werden kann):

Example react native app running

Verwenden Sie unser Pre-Build-Beispiel

Natürlich haben wir bereits eine vorgefertigte App, mit der Sie experimentieren können, wenn Sie nicht alle Schritte ausführen möchten. Sie müssen noch ein XcooBee-Zahlungsprojekt-Setup abgeschlossen haben, wenn Sie Zahlungen verarbeiten möchten (Test oder Live).

Bitte ersetzen Sie die Kampagnen-ID und Formular-ID im App.tsx

Expo Code GitHub Beispiel

Sie können dies auch wie folgt auf Ihren lokalen Computer klonen:

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

Herzliche Glückwünsche

Dies ist alles, was Sie brauchen, um eine App zu haben, die kontaktlose Zahlungen akzeptieren kann.

Natürlich gibt es viel mehr Optionen für die Generierung von QR- und Direktzahlungs-URLs, als dieses Beispiel zeigen kann. Probieren Sie das XcooBee Payment SDK, das XcooBee Professional Account und die Stripe- oder Paypal-Zahlungsabwicklung aus.

Pro-Tipp: Wenn Sie Stripe-Testkonten oder Paypal Sandbox-Konten verwenden, fallen auch keine XcooBee-Gebühren an.

Von hier aus können Sie experimentieren und verfeinern.

Fandest du diesen Artikel hilfreich? Ja Nein

Wie können wir helfen?