Od začiatku do konca vás tento tutoriál prevedie krokmi na spustenie platieb PayPal.

V priestore elektronického obchodu prispeli digitálne platobné riešenia k výraznému zvýšeniu výnosov a celkovému rastu podnikov tým, že umožnili a ľahko spracovali cezhraničné platby.

PayPal ponúka jednoduché a flexibilné riešenie digitálnych platieb na správu online transakcií. Začlenením služby PayPal do svojich webových aplikácií môžete zákazníkom zabezpečiť bezproblémový a bezpečný prístup k platbám, čo môže viesť k zvýšeniu predaja a celkovej dôvere značky.

Čítajte ďalej a zistite, ako integrovať PayPal do vašich aplikácií React.

Založte si účet PayPal Sandbox

PayPal Sandbox je testovacie prostredie poskytované spoločnosťou PayPal, takže môžete testovať integráciu platieb v rámci svojich aplikácií. Ponúka simulované prostredie, ktoré zahŕňa všetky platobné funkcie, ktoré sa nachádzajú v živom produkčnom prostredí PayPal.

Jednoducho, sandbox poskytuje platformu na testovanie integrácií platieb bez potreby skutočných peňazí.

instagram viewer

Pomocou karanténneho účtu môžete pristupovať k virtuálnemu účtu PayPal s testovacími prostriedkami, ktorý vám umožňuje simulovať rôzne typy transakcií a integrácie platieb.

Ak chcete vytvoriť účet v karanténe, prejdite na stránku PayPal Developer Console a prihláste sa pomocou prihlasovacích údajov účtu PayPal. Ďalej na paneli vývojára kliknite na Účty v karanténe tlačidlo.

Na spracovanie transakcie PayPal z vašej aplikácie React potrebujete dva účty v karanténe: podnikateľský účet a osobný účet. Tieto dva účty vám pomôžu simulovať kompletnú transakciu – z pohľadu zákazníka aj obchodníka (obchodníka).

Je dôležité otestovať funkčnosť integrácie platieb vo vašej aplikácii z oboch pohľadov.

Klikni na Vytvoriť účet tlačidlo na nastavenie dvoch účtov.

Na stránke nastavení účtu vytvorte jeden z každého typu účtu: osobný a potom firemný. Na prihlásenie použijete prihlasovacie údaje osobného účtu Pieskovisko PayPal osobný účet. Na druhej strane použijete prihlasovacie údaje pre obchodný účet na vytvorenie projektu na konzole pre vývojárov, aby ste získali ID klienta PayPal.

Prípadne namiesto vytvárania nových účtov môžete na testovanie integrácií platieb použiť predvolené účty karantény poskytované službou PayPal.

Vytvorte projekt PayPal

Na stránke panela vývojára kliknite na ikonu Aplikácie a poverenia tlačidlo a kliknite Vytvoriť aplikáciu tlačidlo na nastavenie projektu PayPal. Ďalej vyplňte názov vašej aplikácie, vyberte si Obchodník ako typ účtu a vyberte poverenia pre firemný účet, ktorý ste pôvodne vytvorili.

Nakoniec skopírujte ID klienta aplikácie.

Nastavte klienta React

Vytvorte aplikáciu React, otvor public/index.html a pridajte svoje ID klienta vo formáte uvedenom nižšie v sekcii head element.

<skriptsrc=" https://www.paypal.com/sdk/js? client-id=vaše-klientske-ID&currency=USD">skript>

Značka skriptu načítava PayPal JavaScript SDK, knižnicu, ktorá poskytuje funkcie na strane klienta na interakciu s PayPal API, a sprístupňuje ju na použitie v komponentoch React.

Pomocou funkcií súpravy SDK môžete vytvoriť platobné tlačidlo PayPal, ktoré spracuje tok platieb zahŕňa odoslanie platobných údajov na PayPal, autorizáciu platby a spracovanie platby odpoveď.

Kód tohto projektu nájdete v ňom úložisko GitHub.

Vytvorte komponent produktu

V adresári /src vytvorte nový priečinok komponentov a pridajte dva súbory: Product.js a PayPalCheckout.js.

Otvorte súbor Product.js a pridajte nižšie uvedený kód:

importovať Reagovať, { useState } od"reagovať";
importovať"./product.style.css";
importovať"../assets/laptop.jpg";
funkciuApp() {
vrátiť (
"Nádoba na produkt">
"Obsah produktu">
"produkt"> 
vyžadovať("../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>
 );
}






exportpredvolená App;

Tento kód vykresľuje jednoduchý komponent produktu.

Vytvorte komponent PayPal Checkout

Pridajte nasledujúci kód do súboru PayPalCheckout.js:

importovať Reagovať, { useRef, useEffect, useState } od"reagovať";
importovať Zlyhanie platby od"./PaymentFailure";
importovať Úspech platby od"./PaymentSuccess";
funkciuPayPalCheckout() {
konšt paypal = useRef();
konšt [transactionStatus, setTransactionStatus] = useState(nulový);


 useEffect(() => {
okno.paypal
 .Buttons({
 createOrder: (údaje, akcie, chyba) => {
vrátiť actions.order.create({
 zámer: "CAPTURE",
 nákupné_jednotky: [
 {
 popis: "Laptop MacBook",
 suma: {
 kód meny: "AMERICKÝ DOLÁR",
 hodnota: 350.00,
 },
 },
 ],
 });
 },
 onApprove: async (údaje, akcie) => {
konšt objednávka = čakať actions.order.capture();


konzoly.log("úspech", objednať);
 setTransactionStatus("úspech");
 },
 onError: (chybovať) => {
konzoly.log (chyba);
 setTransactionStatus("zlyhanie");
 },
 })
 .render (paypal.current);
 }, []);


ak (stav transakcie "úspech") {
vrátiť<Úspech platby />;
 }


ak (stav transakcie "zlyhanie") {
vrátiť<Zlyhanie platby />;
 }


vrátiť (




</div>
 </div>
 );
}


exportpredvolená PayPalCheckout;

Tento kód používa tri Reagovať háčiky: useRef, useState a useEffect. Používa useRef na vytvorenie odkazu na prvok div, ktorý bude fungovať ako kontajner pre tlačidlo platby PayPal.

Používa useEffect na vytvorenie tlačidla PayPal s paypal. Tlačidlá a potom vykreslí toto tlačidlo v prvku div, na ktorý odkazuje paypal.current metóda.

The paypal. Tlačidlá funkcia berie objekt s niekoľkými vlastnosťami:

  • createOrder: Táto funkcia vráti objekt obsahujúci podrobnosti o objednávke, ktorú používateľ vytvoril. Podrobnosti objednávky budú obsahovať špecifické podrobnosti o produkte alebo službe, ako je suma, názov produktu, popis a mena.
  • onApprove: Táto funkcia sa spustí po schválení platby. Zaznamená platbu a zaznamená správu o úspechu do konzoly. Nastavuje tiež transakciaStav štát do úspech.
  • onError: Táto funkcia sa spustí, keď platba narazí na chybu. Zaznamená chybové hlásenie do konzoly a nastaví transakciaStav štát do zlyhanie.

Nakoniec komponent podmienečne vykreslí buď Úspech platby alebo Zlyhanie platby komponent v závislosti od hodnoty transakciaStav štát.

Tieto dve súčasti sa vykreslia až po úspešnej alebo neúspešnej transakcii. Pokračujte a vytvorte dva súbory: PaymentSuccess.js a PaymentFailure.js v priečinku komponentov a pridajte funkčný komponent s prvkom odseku, ktorý vykreslí stav transakcie.

Aktualizujte komponent App.js

Otvorte súbor src/App.js a pridajte nižšie uvedený kód:

importovať Reagovať, { useState } od"reagovať";
importovať Produkt od"./components/Product";
importovať PayPalCheckout od"./components/PayPalCheckout";
importovať"./App.css";
funkciuApp() {
konšt [checkout, setCheckOut] = useState(falošný);


vrátiť (


"aplikácia">
"Hlavička aplikácie">
 {odhlásiť sa? (

 ): (
"produkt">
 className="odhlásiť sa"
 onClick={() => {
 setCheckOut(pravda);
 }}
 >
 Pridať do košíka a pokladne
 </button>

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


exportpredvolená App;

Tento kód používa prístup podmieneného vykresľovania na zobrazenie komponentu PayPalCheckout alebo komponentu produktu. Hák useState inicializuje stavovú premennú nazývanú checkout ako false, ktorá sleduje aktuálny stav pri načítaní stránky.

React na začiatku vykreslí komponent produktu vrátane tlačidla pokladne. Keď používateľ klikne na tlačidlo platby, funkcia obsluhy onClick spustí aktualizáciu premennej platby na hodnotu true. Táto aktualizácia vyzve komponent App, aby namiesto toho vykreslil komponent PayPalCheckout.

Ďalšie funkcie platby PayPal

Platobné funkcie PayPal, ako sú One Touch a PayPal Credit, zaisťujú, že vaši zákazníci si môžu vychutnať zjednodušený platobný proces, ktorý je bezpečný, spoľahlivý a pohodlný.

Aj keď si môžete vytvoriť svoju vlastnú službu spracovania platieb od začiatku, používanie platobnej platformy, ako je PayPal, je podľa možnosti flexibilnejšou a efektívnejšou alternatívou. V podstate, s platobným riešením sa nemusíte starať o správu infraštruktúry potrebnej na nastavenie vlastnej platobnej služby.