Jak integrovat PayPal Checkout do aplikace React

V oblasti elektronického obchodování přispěla řešení digitálních plateb k výraznému zvýšení příjmů a celkovému růstu podniků tím, že umožnila a zpracovávala přeshraniční platby snadno.

PayPal nabízí jednoduché a flexibilní řešení digitálních plateb pro správu online transakcí. Začleněním služby PayPal do svých webových aplikací můžete zákazníkům zajistit bezproblémový a bezpečný způsob plateb, což může vést ke zvýšení prodeje a celkové důvěře ke značce.

Čtěte dále a zjistěte, jak integrovat PayPal do vašich aplikací React.

Založte si účet PayPal Sandbox

PayPal Sandbox je testovací prostředí poskytované službou PayPal, takže můžete testovat integraci plateb ve svých aplikacích. Nabízí simulované prostředí, které zahrnuje všechny platební funkce nalezené v živém produkčním prostředí PayPal.

Jednoduše, sandbox poskytuje platformu pro testování integrace plateb bez potřeby skutečných peněz.

Pomocí sandboxového účtu můžete přistupovat k virtuálnímu PayPal účtu s testovacími prostředky, což vám umožňuje simulovat různé typy transakcí a integrace plateb.

Chcete-li vytvořit účet sandbox, přejděte na PayPal Developer Console a přihlaste se pomocí přihlašovacích údajů k účtu PayPal. Dále na vývojářském panelu klikněte na Účty v izolovaném prostoru knoflík.

Ke zpracování PayPal transakce z vaší aplikace React potřebujete dva sandboxové účty: firemní a osobní. Tyto dva účty vám pomohou simulovat kompletní transakci – jak z pohledu zákazníka, tak z pohledu obchodníka (obchodu).

Je důležité otestovat funkčnost integrace plateb ve vaší aplikaci z obou pohledů.

Klikněte na Vytvořit účet tlačítko pro nastavení dvou účtů.

Na stránce nastavení účtu vytvořte jeden od každého typu účtu: osobní a poté firemní. K přihlášení budete používat přihlašovací údaje k osobnímu účtu Sandbox PayPal osobní účet. Na druhou stranu použijete přihlašovací údaje k obchodnímu účtu k vytvoření projektu na vývojářské konzoli, abyste získali ID klienta PayPal.

Alternativně můžete místo vytváření nových účtů použít výchozí účty izolovaného prostoru poskytované službou PayPal k testování integrace plateb.

Vytvořte projekt PayPal

Na stránce vývojářského panelu klikněte na Aplikace a přihlašovací údaje tlačítko a klikněte Vytvořit aplikaci tlačítko pro nastavení projektu PayPal. Dále vyplňte název vaší aplikace, vyberte si Obchodník jako typ účtu a vyberte přihlašovací údaje pro firemní účet, který jste původně vytvořili.

Nakonec zkopírujte ID klienta aplikace.

Nastavte klienta React

Vytvořte aplikaci React, otevři public/index.html a přidejte své ID klienta ve formátu uvedeném níže v části head element.

<skriptsrc=" https://www.paypal.com/sdk/js? client-id=vaše-klientské-ID&měna=USD">skript>

Značka skriptu načte PayPal JavaScript SDK, knihovnu, která poskytuje funkce na straně klienta pro interakci s PayPal API, a zpřístupní ji pro použití v komponentách React.

Pomocí funkcí SDK můžete vytvořit platební tlačítko PayPal, které zpracovává tok plateb zahrnuje odeslání platebních údajů na PayPal, autorizaci platby a zpracování platby Odezva.

Vytvořte komponentu produktu

V adresáři /src vytvořte novou složku komponent a přidejte dva soubory: Product.js a PayPalCheckout.js.

Otevřete soubor Product.js a přidejte níže uvedený kód:

import Reagovat, { useState } z"reagovat";
import"./product.style.css";
import"../assets/laptop.jpg";
funkceAplikace() {
vrátit se (
"Produkt-kontejner">
"Obsah produktu">
"produkt"> 
vyžadovat("../assets/laptop.jpg")} alt="notebook" />
 </div>
"desc">
 MacBook Pro</h2>



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

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


vývoznívýchozí Aplikace;

Tento kód vykresluje jednoduchou komponentu produktu.

Vytvořte komponentu PayPal Checkout

Přidejte následující kód do souboru PayPalCheckout.js:

import Reagovat, { useRef, useEffect, useState } z"reagovat";
import Selhání platby z"./PaymentFailure";
import Úspěch platby z"./PaymentSuccess";
funkcePayPalCheckout() {
konst paypal = useRef();
konst [transactionStatus, setTransactionStatus] = useState(nula);
 useEffect(() => {
okno.paypal
 .Buttons({
 vytvořit objednávku: (data, akce, err) => {
vrátit se actions.order.create({
 úmysl: "CAPTURE",
 nákupní_jednotky: [
 {
 popis: "Laptop MacBook",
 částka: {
 kód měny: "AMERICKÝ DOLAR",
 hodnota: 350.00,
 },
 },
 ],
 });
 },
 onApprove: asynchronní (data, akce) => {
konst objednávka = čekat actions.order.capture();
řídicí panel.log("úspěch", objednat);
 setTransactionStatus("úspěch");
 },
 onError: (chybovat) => {
řídicí panel.log (chyba);
 setTransactionStatus("selhání");
 },
 })
 .render (paypal.current);
 }, []);
-li (stav transakce "úspěch") {
vrátit se<Úspěch platby />;
 }
-li (stav transakce "selhání") {
vrátit se<Selhání platby />;
 }
vrátit se (



</div>
 </div>
 );
}
vývoznívýchozí PayPalCheckout;

Tento kód používá tři Reagovat háčky: useRef, useState a useEffect. Používá useRef k vytvoření odkazu na prvek div, který bude fungovat jako kontejner pro tlačítko platby PayPal.

Používá useEffect k vytvoření tlačítka PayPal s paypal. Tlačítka a poté toto tlačítko vykreslí v prvku div, na který odkazuje paypal.current metoda.

The paypal. Tlačítka Funkce přebírá objekt s několika vlastnostmi:

• createOrder: Tato funkce vrací objekt obsahující podrobnosti o objednávce, kterou uživatel vytvořil. Podrobnosti objednávky budou obsahovat konkrétní podrobnosti o produktu nebo službě, jako je částka, název produktu, popis a měna.
• onApprove: Tato funkce se spustí, když je platba schválena. Zaznamená platbu a zaznamená zprávu o úspěchu do konzole. Nastavuje také TransactionStatus stát do úspěch.
• onError: Tato funkce se spustí, když platba narazí na chybu. Zaznamená chybovou zprávu do konzoly a nastaví TransactionStatus stát do selhání.

Nakonec komponenta podmíněně vykreslí buď Úspěch platby nebo Selhání platby složka v závislosti na hodnotě TransactionStatus Stát.

Tyto dvě součásti se vykreslí pouze po úspěšné nebo neúspěšné transakci. Pokračujte a vytvořte dva soubory: PaymentSuccess.js a PaymentFailure.js ve složce komponent a přidejte funkční komponentu s prvkem odstavce, který vykreslí stav transakce.

Aktualizujte komponentu App.js

Otevřete soubor src/App.js a přidejte níže uvedený kód:

import Reagovat, { useState } z"reagovat";
import Produkt z"./components/Product";
import PayPalCheckout z"./components/PayPalCheckout";
import"./App.css";
funkceAplikace() {
konst [checkout, setCheckOut] = useState(Nepravdivé);
vrátit se (

"Aplikace">
"Záhlaví aplikace">
 {Překontrolovat? (

 ): (
"Produkt">
 className="Překontrolovat"
 onClick={() => {
 setCheckOut(skutečný);
 }}
 >
 Přidat do košíku a pokladny
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
vývoznívýchozí Aplikace;

Tento kód používá přístup podmíněného vykreslování k zobrazení komponenty PayPalCheckout nebo komponenty Product. Háček useState inicializuje stavovou proměnnou nazvanou checkout jako false, která sleduje aktuální stav při načítání stránky.

Na začátku React vykreslí komponentu produktu, včetně tlačítka pokladny. Když uživatel klikne na tlačítko pokladny, funkce obsluhy onClick se spustí a aktualizuje proměnnou pokladny na hodnotu true. Tato aktualizace vyzve komponentu App, aby místo toho vykreslila komponentu PayPalCheckout.

Další funkce platby PayPal

Platební funkce PayPal, jako je One Touch a PayPal Credit, zajišťují, že si vaši zákazníci mohou užít zjednodušený platební proces, který je bezpečný, spolehlivý a pohodlný.

I když si můžete vytvořit vlastní službu zpracování plateb od nuly, použití platební platformy, jako je PayPal, je pokud možno flexibilnější a efektivnější alternativou. S platebním řešením se v podstatě nemusíte starat o správu infrastruktury potřebné k nastavení vlastní platební služby.