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. Im Gegensatz zu anderen Anbietern fügt XcooBee diesem System auch ein offenes Infrastruktursystem hinzu, für das keine App oder Kontoanmeldung erforderlich ist. Dies reduziert die Reibung und verbessert die Akzeptanz.
Erste Schritte von Grund auf neu
Voraussetzungen:
- Knoten 12
- Frei Streifen Konto
- Frei XcooBee Professional Konto
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 Videoanleitungenoder 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 Seite mit der Zusammenfassung des XcooBee-Projektassistenten - Zahlungsprojekts. 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
Ihre App.tsx sollte so aussehen:
importieren Reagieren von 'reagieren'; {StyleSheet, Text, TextInput, View} aus 'react-native' importieren; XcooBeePaySDK aus '@ xcoobee / react-native-xcoobee-payment-sdk' importieren; // TODO: Ersetzen durch tatsächliche Werte aus dem XcooBee-Zahlungsprojekt // Öffnen Sie Ihr Zahlungsprojekt im Bearbeitungsmodus und überprüfen Sie den Zusammenfassungsbildschirm XcooBeePaySDK.setSystemConfig ({Kampagnen-ID: 'e98.eg0000000', formId: 't000'}); Standardfunktion exportieren App () {const [ChargeAmount, setText] = React.useState ('1.00'); const XcooBeePayQR = XcooBeePaySDK.createPayQR (parseFloat (ChargeAmount)); Rückkehr ( Wie viel möchten Sie berechnen: setText (text)} value = {ChargeAmount} /> Bitte scannen und bezahlen {XcooBeePayQR} powered by XcooBee 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):
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
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.
Mehr Unterstützung
Bitte Wenden Sie sich an XcooBee Wenn Sie das Hinzufügen von kontaktlosen Zahlungen und die E-Commerce-Aktivierung von PDFs für Ihre Umgebung untersuchen möchten.