Kostenlose und Open Source, Ionisch bietet eine Bibliothek mit für Mobilgeräte optimierten UI-Komponenten, Gesten und Tools zum Erstellen schneller, hochgradig interaktiver Apps. Sie können Ihre Muttersprache verwenden JavaScript und Webentwicklungsfähigkeiten
Mit XcooBee können Sie Ihrem Projekt mit wenigen Codierungszeilen ganz einfach eine kontaktlose Zahlungslösung hinzufügen. Die Implementierung ist sicher und auf vielen Geräten einfach zu verwalten und kann Push-Benachrichtigungen und komplexe Workflows für die serverlose Verarbeitung in Unternehmen umfassen. Auf diese Weise können Sie schnell mit einer Komplettlösung auf den Markt kommen, anstatt Entwicklungszyklen dafür aufzuwenden.
In Bezug auf den Ansatz gibt es hauptsächlich zwei erfolgreiche Ansätze für kontaktloses Bezahlen, 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.
XcooBee ist auch kein Closed-Loop-System wie die anderen Anbieter. Verbraucher benötigen keine App oder ein Konto, um teilnehmen zu können, was die Akzeptanz Ihrer Lösungen erheblich erhöht.
Erste Schritte von Grund auf neu
Voraussetzungen:
- Knoten 12
- Frei Streifen Konto
- Frei XcooBee Professional Konto
- Ionische CLI
Installieren Sie Ionic Client, wenn Sie es nicht haben:
npm install -g @ ionic / cli
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 VideoanleitungenUPC 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
Wir werden mit einer Ionic React-Vorlage beginnen, um loszulegen. Wir werden dies von Ihrer Kommandozeile oder Konsole aus tun.
Wenn Sie Ionic noch nie installiert haben, installieren Sie zuerst die Befehlszeilentools, indem Sie Folgendes in Ihre Konsole eingeben:
ionischer Start myPaymentApp blank --type = reagieren
Dadurch wird die leere Ionic-Vorlage unter Verwendung von React JS als Syntax installiert.
Sobald Sie fertig sind, navigieren Sie in das Verzeichnis der neu erstellten App.
cd myPaymentApp
Installieren Sie Bibliotheken
Jetzt, da wir eine Basis-App haben, können wir die benötigten Bibliotheken hinzufügen
npm install @ xcoobee / payment-sdk --save
Das ist alles was benötigt wird.
Starten Sie die Anwendung, indem Sie Folgendes eingeben:
ionischer Aufschlag
Wenn sich Ihr Browser nach dem Anzeigen nicht automatisch öffnet Dateien erfolgreich ausgegeben .. Nachricht in der Konsole versuchen, manuell zur Startseite zu gelangen: http://localhost:8100/home
Es sollte so aussehen:
Home.tsx
Es gibt nur eine Datei, die wir ändern müssen. Das ist Home.tsx. Sollte sich in befinden {app} /src/Pages/Home.tsx
Importe
Entfernen Sie alle vorhandenen Importanweisungen und wir werden sie aufbauen. Dies sind die Komponenten, die wir auf unserer Beispielseite von Ionic Framework verwenden werden:
{IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonFooter, IonRow, IonCol, IonItem, IonInput, IonImg} aus '@ ionic / react' importieren;
Ändern Sie den Reaktions-JS-Import wie folgt useEffect das erlaubt uns, Haken zu verwenden. Mit Hooks können Sie Status- und andere React-Funktionen verwenden, ohne eine Klasse zu schreiben:
importiere React, {useEffect, useState} von 'react';
Fügen Sie der Seite nun XcooBee-Unterstützung hinzu:
XcooBeePaySDK aus '@ xcoobee / react-native-xcoobee-payment-sdk' importieren;
Insgesamt sollte Ihr Importbereich so aussehen, wenn Sie fertig sind:
{IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonFooter, IonRow, IonCol, IonItem, IonInput, IonImg} aus '@ ionic / react' importieren; importiere React, {useEffect, useState} von 'react'; {BrowserXcooBeePaymentSDK} aus '@ xcoobee / payment-sdk' importieren; import './Home.css';
Initialisieren Sie XcooBee
Wir müssen jetzt die XcooBee-Klasse initialisieren. Hier können Sie das Push-Benachrichtigungsgerät festlegen oder die ID usw. installieren. Dies ist erforderlich, wenn Sie über Erfolg und Misserfolg der Zahlung 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 der Zusammenfassungsseite des XcooBee-Zahlungsprojekt-Assistenten. Ersetzen Sie Ihre Werte, anstatt die Beispielwerte zu verwenden.
const sdk = new BrowserXcooBeePaymentSDK ({Kampagnen-ID: "Test", Form-ID: "Test"});
Die Logik
Wir möchten einige Platzhalter und Handler für den Benutzer haben, um den Betrag anzugeben, den er berechnen möchte, und den zu rendernden QR-Code.
Wir verwenden den SDK-Aufruf im Inneren useEffect und initialisiere es mit 123.00von Ladungsmenge und benutze das Wort Auftrag den Grund für die Zahlung zu beschreiben. Die endgültige Währung hierfür wird durch die Einrichtung Ihres XcooBee-Projekts festgelegt. Sie können Änderungen daran in Ihrer XcooBee-GUI / Konsole vornehmen.
Wir werden auch neu rendern, wenn der Benutzer auf tippt Generieren Taste.
const [loadAmount, setNumber] = useState (123,00); const [qr, setQr] = useState (); useEffect (() => {sdk.createPayQr ({Betrag: ChargeAmount, Referenz: "Bestellung"}, 300) .then (base64 => setQr (base64));}, []);
Das Rendern
Entfernen Sie dazu bitte alle Tags zwischen den Rückkehr ( ) und ersetzen Sie diese ionische Seite durch dieses Layout.
<ionpage>
<ionheader>
<iontoolbar>
<iontitle>Kontaktloses Bezahlen</iontitle>
</iontoolbar>
</ionheader>
<ioncontent classname="myphoto">
<ionheader collapse="condense">
<iontoolbar>
<iontitle size="large">Kontaktloses Bezahlen</iontitle>
</iontoolbar>
</ionheader>
<ionrow >
<ioncol classname="ion-text-center">
Wie viel möchten Sie aufladen?
<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({ Betrag: ChargeAmount, Referenz: "Bestellung" }, 300).then(base64 => setQr(base64)); }}>Generieren</ionbutton>
</ioncol>
</ionrow>
{/* qr-Bildbereich */}
<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>
Das meiste davon wird vom Boilerplate erzeugt. Hinzufügen einer Kopf- und Fußzeile sowie einer Schaltfläche. Mit dieser Zeile rendern wir den QR:
Sie können einen XcooBee QR überall dort verwenden, wo Sie ein Bild verwenden würden. So einfach ist das.
Wir haben auch eine hinzugefügt onClick Veranstaltung zum um die Basis auf aktualisierten Informationen, die der Benutzer eingegeben hat, erneut zu rendern.
Endgültige Formatierung
Sie bemerken, dass der QR-Code den gesamten unteren Teil des Bildschirms einnimmt. Es ist auf den Behälter skaliert. Fügen wir etwas CSS-Formatierungsmagie hinzu, indem wir das ändern Home.css Datei im selben Ordner. Dadurch wird eine Skalierung verhindert und das Bild zentriert. Füge das hinzu
Home.css:
.vertical-center {Anzeige: flex; Ausrichtungselemente: Mitte; Rechtfertigungsinhalt: Mitte; Höhe: 100%; }}
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 Home.tsx
Sie können dies auch wie folgt auf Ihren lokalen Computer klonen:
Git-Klon https://github.com/XcooBee/example-payment-sdk-ionic.git
Beispiel-Zahlung-sdk-ionic.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.
