So integrieren Sie PayPal Checkout in eine React-Anwendung

Im E-Commerce-Bereich haben digitale Zahlungslösungen zu einer erheblichen Umsatzsteigerung und zum allgemeinen Wachstum von Unternehmen beigetragen, indem sie problemlos grenzüberschreitende Zahlungen ermöglichen und verarbeiten.

PayPal bietet eine einfache und flexible digitale Zahlungslösung für die Verwaltung von Online-Transaktionen. Indem Sie PayPal in Ihre Webanwendungen integrieren, können Sie sicherstellen, dass Kunden auf ein nahtloses und sicheres Zahlungserlebnis zugreifen, was wiederum zu höheren Verkäufen und allgemeinem Markenvertrauen führen kann.

Lesen Sie weiter, um zu erfahren, wie Sie PayPal in Ihre React-Anwendungen integrieren.

Richten Sie ein PayPal-Sandbox-Konto ein

PayPal Sandbox ist eine von PayPal bereitgestellte Testumgebung, mit der Sie Zahlungsintegrationen in Ihren Anwendungen testen können. Es bietet eine simulierte Umgebung, die alle Zahlungsfunktionen enthält, die in der Live-Produktionsumgebung von PayPal zu finden sind.

Die Sandbox bietet einfach eine Plattform zum Testen von Zahlungsintegrationen, ohne dass echtes Geld benötigt wird.

Über das Sandbox-Konto können Sie auf ein virtuelles PayPal-Konto mit Testgeldern zugreifen, mit dem Sie verschiedene Arten von Transaktionen und Zahlungsintegrationen simulieren können.

Um ein Sandbox-Konto zu erstellen, gehen Sie zu PayPal-Entwicklerkonsole und melden Sie sich mit Ihren PayPal-Kontodaten an. Klicken Sie als Nächstes im Entwickler-Dashboard auf die Sandbox-Konten Taste.

Um eine PayPal-Transaktion von Ihrer React-Anwendung aus zu verarbeiten, benötigen Sie zwei Sandbox-Konten: ein Geschäftskonto und ein persönliches Konto. Diese beiden Konten helfen Ihnen dabei, eine vollständige Transaktion zu simulieren – sowohl aus der Sicht eines Kunden als auch aus der Sicht eines Händlers (Unternehmens).

Es ist wichtig, die Funktionalität der Zahlungsintegration in Ihrer Anwendung aus beiden Perspektiven zu testen.

Klick auf das Benutzerkonto erstellen Schaltfläche, um die beiden Konten einzurichten.

Erstellen Sie auf der Seite mit den Kontoeinstellungen eines für jeden Kontotyp: privat, dann geschäftlich. Sie verwenden die persönlichen Kontoanmeldeinformationen, um sich anzumelden Die Sandbox von PayPal persönliches Konto. Auf der anderen Seite verwenden Sie die Anmeldeinformationen für das Geschäftskonto, um ein Projekt in der Entwicklerkonsole zu erstellen, um die Kunden-ID von PayPal zu erhalten.

Anstatt neue Konten zu erstellen, können Sie alternativ die von PayPal bereitgestellten Standard-Sandbox-Konten verwenden, um die Zahlungsintegrationen zu testen.

Erstellen Sie ein PayPal-Projekt

Klicken Sie auf der Entwickler-Dashboard-Seite auf die Apps und Anmeldeinformationen drücken und klicken App erstellen Schaltfläche, um ein PayPal-Projekt einzurichten. Geben Sie als Nächstes den Namen Ihrer Anwendung ein und wählen Sie aus Händler als Kontotyp und wählen Sie die Anmeldeinformationen für das ursprünglich erstellte Geschäftskonto aus.

Kopieren Sie abschließend die Client-ID der App.

Richten Sie den React-Client ein

Erstellen Sie eine React-Anwendung, öffne das öffentlich/index.html -Datei und fügen Sie Ihre Client-ID im unten gezeigten Format im Head-Element-Abschnitt hinzu.

<SkriptQuelle=" https://www.paypal.com/sdk/js? Kunden-ID=Ihre-Kunden-ID&Währung=USD">Skript>

Das script-Tag lädt das PayPal-JavaScript-SDK, eine Bibliothek, die clientseitige Funktionen für die Interaktion mit der PayPal-API bereitstellt, und stellt sie für die Verwendung in den React-Komponenten zur Verfügung.

Mit den Funktionen des SDK können Sie eine PayPal-Zahlungsschaltfläche erstellen, die den Zahlungsfluss abwickelt umfasst das Senden von Zahlungsdaten an PayPal, die Autorisierung der Zahlung und die Abwicklung der Zahlung Antwort.

Erstellen Sie eine Produktkomponente

Erstellen Sie im Verzeichnis /src einen neuen Komponentenordner und fügen Sie zwei Dateien hinzu: Product.js und PayPalCheckout.js.

Öffnen Sie die Datei Product.js und fügen Sie den folgenden Code hinzu:

importieren Reagieren, { useState } aus"reagieren";
importieren"./product.style.css";
importieren"../assets/laptop.jpg";
FunktionApp() {
zurückkehren (
"Produktbehälter">
"Produktinhalt">
"Produkt"> 
erfordern("../assets/laptop.jpg")} alt="Laptop" />
 </div>
"absteigen">
 MacBook Pro</h2>



 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Maxime mollitia, molestiae quas vel sint commodi repudiandae
 Folge.
 </p>

Preis: $350.00</h3>
 </div>
 </header>
 </div>
 );
}


ExportStandard Anwendung;

Dieser Code rendert eine einfache Produktkomponente.

Erstellen Sie die PayPal Checkout-Komponente

Fügen Sie der Datei PayPalCheckout.js den folgenden Code hinzu:

importieren Reagieren, { useRef, useEffect, useState } aus"reagieren";
importieren Zahlungsausfall aus"./PaymentFailure";
importieren Zahlungserfolg aus"./Zahlungserfolg";
FunktionPayPalKasse() {
konst paypal = useRef();
konst [Transaktionsstatus, setTransaktionsstatus] = useState(Null);
 useEffect(() => {
Fenster.paypal
 .Tasten({
 Bestellung anlegen: (Daten, Aktionen, Fehler) => {
zurückkehren actions.order.create({
 Absicht: "ERGREIFEN",
 kauf_einheiten: [
 {
 Beschreibung: "MacBook-Laptop",
 Menge: {
 Währungscode: "US DOLLAR",
 Wert: 350.00,
 },
 },
 ],
 });
 },
 onApprove: asynchron (Daten, Aktionen) => {
konst bestellen = erwarten Aktionen.Order.Capture();
Konsole.Protokoll("Erfolg", Befehl);
 setTransaktionsstatus("Erfolg");
 },
 onError: (irren) => {
Konsole.log (fehler);
 setTransaktionsstatus("Versagen");
 },
 })
 .render (paypal.aktuell);
 }, []);
Wenn (Transaktionsstatus "Erfolg") {
zurückkehren<Zahlungserfolg />;
 }
Wenn (Transaktionsstatus "Versagen") {
zurückkehren<Zahlungsausfall />;
 }
zurückkehren (



</div>
 </div>
 );
}
ExportStandard PayPalKasse;

Dieser Code verwendet drei Haken reagieren: useRef, useState und useEffect. Es verwendet useRef, um einen Verweis auf ein div-Element zu erstellen, das als Container für die PayPal-Checkout-Schaltfläche fungiert.

Es verwendet useEffect, um eine PayPal-Schaltfläche mit der zu erstellen Paypal. Tasten -Funktion und rendert dann diese Schaltfläche in dem div-Element, auf das verwiesen wird paypal.current-Methode.

Der Paypal. Tasten Funktion nimmt ein Objekt mit mehreren Eigenschaften:

• createOrder: Diese Funktion gibt ein Objekt zurück, das die Details der Bestellung enthält, die der Benutzer erstellt hat. Die Bestelldetails enthalten die spezifischen Details des Produkts oder der Dienstleistung, wie z. B. den Betrag, den Produktnamen, die Beschreibung und die Währung.
• onApprove: Diese Funktion wird ausgeführt, wenn die Zahlung genehmigt wurde. Es erfasst die Zahlung und protokolliert die Erfolgsmeldung an die Konsole. Es setzt auch die Transaktionsstatus Zustand zu Erfolg.
• onError: Diese Funktion wird ausgeführt, wenn bei der Zahlung ein Fehler auftritt. Es protokolliert die Fehlermeldung in der Konsole und setzt die Transaktionsstatus Zustand zu Versagen.

Schließlich rendert die Komponente bedingt entweder die Zahlungserfolg oder Zahlungsausfall Komponente abhängig vom Wert der Transaktionsstatus Zustand.

Diese beiden Komponenten werden nur nach einer erfolgreichen oder einer fehlgeschlagenen Transaktion gerendert. Fahren Sie fort und erstellen Sie zwei Dateien: PaymentSuccess.js Und PaymentFailure.js im Komponentenordner und fügen Sie eine funktionale Komponente mit einem Absatzelement hinzu, das den Status der Transaktion wiedergibt.

Aktualisieren Sie die App.js-Komponente

Öffnen Sie die Datei src/App.js und fügen Sie den folgenden Code hinzu:

importieren Reagieren, { useState } aus"reagieren";
importieren Produkt aus"./komponenten/Produkt";
importieren PayPalKasse aus"./components/PayPalCheckout";
importieren"./App.css";
FunktionApp() {
konst [checkout, setCheckOut] = useState(FALSCH);
zurückkehren (

"App">
"App-Header">
 {Kasse? (

 ): (
"Produkt">
 Klassenname="Kasse"
 onClick={() => {
 setCheckOut(WAHR);
 }}
 >
 In den Warenkorb und zur Kasse
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
ExportStandard Anwendung;

Dieser Code verwendet einen bedingten Rendering-Ansatz, um entweder die PayPalCheckout-Komponente oder die Produktkomponente anzuzeigen. Der useState-Hook initialisiert eine Zustandsvariable namens checkout als „false“, die den aktuellen Zustand beim Laden der Seite verfolgt.

Zunächst rendert React die Product-Komponente, einschließlich der Checkout-Schaltfläche. Wenn ein Benutzer auf die Checkout-Schaltfläche klickt, wird die onClick-Handlerfunktion ausgelöst, um die Checkout-Variable auf „true“ zu aktualisieren. Dieses Update fordert die App-Komponente auf, stattdessen die PayPalCheckout-Komponente zu rendern.

Zusätzliche PayPal-Zahlungsfunktionen

Die Zahlungsfunktionen von PayPal, wie One Touch und PayPal Credit, stellen sicher, dass Ihre Kunden von einem optimierten Zahlungsprozess profitieren, der sicher, zuverlässig und bequem ist.

Während Sie Ihren eigenen Zahlungsabwicklungsdienst von Grund auf neu aufbauen können, ist die Verwendung einer Zahlungsplattform wie PayPal vorzugsweise eine flexiblere und effizientere Alternative. Mit einer Zahlungslösung müssen Sie sich im Wesentlichen keine Gedanken über die Verwaltung der Infrastruktur machen, die zum Einrichten eines benutzerdefinierten Zahlungsdienstes erforderlich ist.