Kako integrirati PayPal Checkout v aplikacijo React

V prostoru e-trgovine so digitalne plačilne rešitve prispevale k znatnemu povečanju prihodkov in splošni rasti podjetij z omogočanjem in enostavno obdelavo čezmejnih plačil.

PayPal ponuja preprosto in prilagodljivo digitalno plačilno rešitev za upravljanje spletnih transakcij. Z vključitvijo PayPala v vaše spletne aplikacije lahko strankam zagotovite dostop do brezhibne in varne plačilne izkušnje, kar lahko vodi do povečane prodaje in splošnega zaupanja v blagovno znamko.

Preberite, če želite izvedeti, kako integrirati PayPal v svoje aplikacije React.

Nastavite račun PayPal Sandbox

PayPal Sandbox je testno okolje, ki ga ponuja PayPal, tako da lahko preizkusite plačilne integracije v svojih aplikacijah. Ponuja simulirano okolje, ki vključuje vse plačilne funkcije, ki jih najdete v produkcijskem okolju PayPal v živo.

Preprosto, peskovnik ponuja platformo za testiranje integracij plačil brez potrebe po pravem denarju.

Z uporabo računa peskovnika lahko dostopate do virtualnega računa PayPal s testnimi sredstvi, ki vam omogoča simulacijo različnih vrst transakcij in integracij plačil.

Če želite ustvariti račun peskovnika, pojdite na Konzola za razvijalce PayPal in se prijavite s svojimi poverilnicami računa PayPal. Nato na nadzorni plošči razvijalca kliknite na Računi peskovnika gumb.

Za obdelavo transakcije PayPal iz vaše aplikacije React potrebujete dva računa peskovnika: poslovni račun in osebni račun. Ta dva računa vam bosta pomagala simulirati celotno transakcijo – tako z vidika stranke kot s pogleda trgovca (poslovnega).

Pomembno je, da preizkusite funkcionalnost integracije plačil v svoji aplikaciji z obeh vidikov.

Kliknite na Ustvari račun gumb za nastavitev dveh računov.

Na strani z nastavitvami računa ustvarite po enega za vsako vrsto računa: osebni in nato poslovni. Za prijavo boste uporabili poverilnice osebnega računa PayPal-ov peskovnik osebni račun. Po drugi strani pa boste uporabili poverilnice za poslovni račun za ustvarjanje projekta na konzoli za razvijalce za pridobitev ID-ja odjemalca PayPal.

Druga možnost je, da namesto ustvarjanja novih računov uporabite privzete račune peskovnika, ki jih ponuja PayPal, da preizkusite integracije plačil.

Ustvarite PayPal projekt

Na strani nadzorne plošče razvijalca kliknite na Aplikacije in poverilnice gumb in kliknite Ustvari aplikacijo gumb za nastavitev projekta PayPal. Nato vnesite ime svoje prijave in izberite Trgovec kot vrsto računa in izberite poverilnice za poslovni račun, ki ste ga prvotno ustvarili.

Na koncu kopirajte ID odjemalca aplikacije.

Nastavite odjemalca React

Ustvarite aplikacijo React, odprite public/index.html in dodajte svoj ID odjemalca v obliki, prikazani spodaj v razdelku elementa glave.

<scenarijsrc=" https://www.paypal.com/sdk/js? client-id=your-client-ID&currency=USD">scenarij>

Oznaka skripta naloži PayPal JavaScript SDK, knjižnico, ki zagotavlja funkcionalnost na strani odjemalca za interakcijo s PayPalovim API-jem, in jo naredi na voljo za uporabo v komponentah React.

S funkcijami SDK-ja lahko ustvarite plačilni gumb PayPal, ki upravlja tok plačila, ki vključuje pošiljanje podatkov o plačilu na PayPal, avtorizacijo plačila in obdelavo plačila odgovor.

Ustvarite komponento izdelka

V imeniku /src ustvarite novo mapo komponent in dodajte dve datoteki: Product.js in PayPalCheckout.js.

Odprite datoteko Product.js in dodajte spodnjo kodo:

uvoz Odziv, {useState} od"reagirati";
uvoz"./product.style.css";
uvoz"../assests/laptop.jpg";
funkcijoaplikacija() {
vrnitev (
"Posoda za izdelek">
"Vsebina izdelka">
"izdelek"> 
zahtevati("../assests/laptop.jpg")} alt="prenosni računalnik" />
 </div>
"desc">
 MacBook Pro</h2>



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

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


izvozprivzeto aplikacija;

Ta koda upodobi preprosto komponento izdelka.

Ustvarite komponento PayPal Checkout

Dodajte to kodo v datoteko PayPalCheckout.js:

uvoz React, {useRef, useEffect, useState} od"reagirati";
uvoz PaymentFailure od"./PaymentFailure";
uvoz PaymentSuccess od"./PaymentSuccess";
funkcijoPayPalCheckout() {
konst paypal = useRef();
konst [transactionStatus, setTransactionStatus] = useState(nič);
 useEffect(() => {
okno.paypal
 .Buttons({
 createOrder: (podatki, dejanja, napake) => {
vrnitev actions.order.create({
 namen: "CAPTURE",
 nakupne_enote: [
 {
 opis: "Prenosni računalnik MacBook",
 znesek: {
 koda_valute: "AMERIŠKI DOLAR",
 vrednost: 350.00,
 },
 },
 ],
 });
 },
 onApprove: asinh (podatki, dejanja) => {
konst naročilo = čakati akcije.naročilo.zajem();
konzola.log("uspeh", naročilo);
 setTransactionStatus("uspeh");
 },
 onError: (napaka) => {
konzola.log (napaka);
 setTransactionStatus("neuspeh");
 },
 })
 .render (paypal.current);
 }, []);
če (Stanje transakcije "uspeh") {
vrnitev<PaymentSuccess />;
 }
če (Stanje transakcije "neuspeh") {
vrnitev<PaymentFailure />;
 }
vrnitev (



</div>
 </div>
 );
}
izvozprivzeto PayPalCheckout;

Ta koda uporablja tri React kljuke: useRef, useState in useEffect. Uporablja useRef za ustvarjanje sklica na element div, ki bo deloval kot vsebnik za gumb za odjavo PayPal.

Uporablja useEffect za ustvarjanje gumba PayPal z paypal. Gumbi in nato upodobi ta gumb v elementu div, na katerega se sklicuje paypal.current metoda.

The paypal. Gumbi funkcija sprejme objekt z več lastnostmi:

• createOrder: Ta funkcija vrne objekt, ki vsebuje podrobnosti naročila, ki ga je ustvaril uporabnik. Podrobnosti naročila bodo vključevale posebne podrobnosti izdelka ali storitve, kot so znesek, ime izdelka, opis in valuta.
• onApprove: Ta funkcija se zažene, ko je plačilo odobreno. Zajame plačilo in sporočilo o uspehu zabeleži v konzolo. Prav tako določa transakcijski status država do uspeh.
• onError: Ta funkcija se zažene, ko plačilo naleti na napako. Sporočilo o napaki zabeleži v konzolo in nastavi transakcijski status država do neuspeh.

Končno komponenta pogojno upodobi bodisi PaymentSuccess oz PaymentFailure komponenta glede na vrednost transakcijski status država.

Ti dve komponenti bosta upodobljeni šele po uspešni ali neuspeli transakciji. Nadaljujte in ustvarite dve datoteki: PaymentSuccess.js in PaymentFailure.js v mapi komponent in dodajte funkcionalno komponento z elementom odstavka, ki upodablja status transakcije.

Posodobite komponento App.js

Odprite datoteko src/App.js in dodajte spodnjo kodo:

uvoz Odziv, {useState} od"reagirati";
uvoz Izdelek od"./components/Product";
uvoz PayPalCheckout od"./components/PayPalCheckout";
uvoz"./App.css";
funkcijoaplikacija() {
konst [odjava, setCheckOut] = useState(lažno);
vrnitev (

"Aplikacija">
"Glava aplikacije">
 {preveri? (

 ): (
"Izdelek">
 className="preveri"
 onClick={() => {
 setCheckOut(prav);
 }}
 >
 Dodaj v košarico in plačaj
 </button>

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

Ta koda uporablja pristop pogojnega upodabljanja za prikaz komponente PayPalCheckout ali komponente izdelka. Kavelj useState inicializira spremenljivko stanja, imenovano checkout, kot false, ki spremlja trenutno stanje, ko se stran naloži.

Na začetku React upodobi komponento izdelka, vključno z gumbom za odjavo. Ko uporabnik klikne gumb za odjavo, sproži funkcija za obravnavo onClick, da posodobi spremenljivko za odjavo na true. Ta posodobitev pozove komponento aplikacije, naj namesto tega upodablja komponento PayPalCheckout.

Dodatne funkcije plačila PayPal

Plačilne funkcije PayPal, kot sta One Touch in PayPal Credit, zagotavljajo, da lahko vaše stranke uživajo v poenostavljenem plačilnem postopku, ki je varen, zanesljiv in udoben.

Medtem ko lahko svojo lastno storitev za obdelavo plačil zgradite iz nič, je uporaba plačilne platforme, kot je PayPal, po možnosti bolj prilagodljiva in učinkovita alternativa. V bistvu vam z vzpostavljeno plačilno rešitvijo ni treba skrbeti za upravljanje infrastrukture, ki je potrebna za vzpostavitev plačilne storitve po meri.