Kako integrirati PayPal Checkout u React aplikaciju

U prostoru e-trgovine, rješenja za digitalno plaćanje pridonijela su značajnom povećanju prihoda i ukupnom rastu poslovanja omogućavanjem i jednostavnom obradom prekograničnih plaćanja.

PayPal nudi jednostavno i fleksibilno rješenje za digitalno plaćanje za upravljanje internetskim transakcijama. Uključivanjem PayPal-a u svoje web-aplikacije, kupcima možete osigurati pristup besprijekornom i sigurnom iskustvu plaćanja, što zauzvrat može dovesti do povećane prodaje i ukupnog povjerenja u marku.

Pročitajte kako biste saznali kako integrirati PayPal u svoje React aplikacije.

Postavite PayPal Sandbox račun

PayPal Sandbox okruženje je za testiranje koje pruža PayPal tako da možete testirati integracije plaćanja unutar svojih aplikacija. Nudi simulirano okruženje koje uključuje sve značajke plaćanja koje se nalaze u PayPalovom proizvodnom okruženju uživo.

Jednostavno, sandbox pruža platformu za testiranje integracija plaćanja bez potrebe za pravim novcem.

Korištenjem sandbox računa možete pristupiti virtualnom PayPal računu s testnim sredstvima, što vam omogućuje simulaciju različitih vrsta transakcija i integracija plaćanja.

Da biste stvorili račun sandboxa, idite na PayPal konzola za razvojne programere i prijavite se vjerodajnicama svog PayPal računa. Zatim na nadzornoj ploči razvojnog programera kliknite na Sandbox računi dugme.

Za obradu PayPal transakcije iz vaše React aplikacije potrebna su vam dva sandbox računa: poslovni račun i osobni račun. Ova dva računa pomoći će vam da simulirate potpunu transakciju—i iz pogleda kupca i iz pogleda trgovca (poslovnog).

Važno je testirati funkcionalnost integracije plaćanja na svojoj aplikaciji iz obje perspektive.

Klikni na Napravi račun gumb za postavljanje dvaju računa.

Na stranici s postavkama računa stvorite po jedan od svake vrste računa: osobni, zatim poslovni. Za prijavu ćete koristiti vjerodajnice osobnog računa PayPal sandbox osobni račun. S druge strane, koristit ćete vjerodajnice za poslovni račun za izradu projekta na konzoli za razvojne programere kako biste dobili PayPal ID klijenta.

Alternativno, umjesto stvaranja novih računa, možete koristiti zadane račune sandboxa koje nudi PayPal za testiranje integracija plaćanja.

Stvorite PayPal projekt

Na stranici nadzorne ploče razvojnog programera kliknite na Aplikacije i vjerodajnice gumb i kliknite Izradi aplikaciju gumb za postavljanje PayPal projekta. Zatim unesite naziv svoje prijave, odaberite Trgovac kao vrstu računa i odaberite vjerodajnice za poslovni račun koji ste prvotno stvorili.

Na kraju kopirajte ID klijenta aplikacije.

Postavite React klijenta

Napravite React aplikaciju, otvori javno/index.html datoteku i dodajte svoj ID klijenta u formatu prikazanom u nastavku u odjeljku elementa glave.

<skriptasrc=" https://www.paypal.com/sdk/js? client-id=vas-client-ID&currency=USD">skripta>

Oznaka skripte učitava PayPal JavaScript SDK, biblioteku koja pruža funkcionalnost na strani klijenta za interakciju s PayPalovim API-jem, i čini ga dostupnim za korištenje u React komponentama.

Koristeći funkcije SDK-a, možete stvoriti PayPal gumb za plaćanje koji upravlja tijek plaćanja koji uključuje slanje podataka o plaćanju na PayPal, autorizaciju plaćanja i obradu plaćanja odgovor.

Stvorite komponentu proizvoda

U direktoriju /src stvorite novu mapu komponenti i dodajte dvije datoteke: Product.js i PayPalCheckout.js.

Otvorite datoteku Product.js i dodajte kod u nastavku:

uvoz Reagiraj, {useState} iz"reagirati";
uvoz"./product.style.css";
uvoz"../assets/laptop.jpg";
funkcijaaplikacija() {
povratak (
"Spremnik proizvoda">
"Sadržaj proizvoda">
"proizvod"> 
zahtijevati("../assets/laptop.jpg")} alt="laptop" />
 </div>
"desc">
 MacBook Pro</h2>



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

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


izvozzadano aplikacija;

Ovaj kod prikazuje jednostavnu komponentu proizvoda.

Napravite komponentu PayPal Checkout

Dodajte sljedeći kod u datoteku PayPalCheckout.js:

uvoz Reagiraj, {useRef, useEffect, useState} iz"reagirati";
uvoz PaymentFailure iz"./PaymentFailure";
uvoz Uspjeh plaćanja iz"./Uspjeh plaćanja";
funkcijaPayPalCheckout() {
konst paypal = useRef();
konst [transactionStatus, setTransactionStatus] = useState(ništavan);
 useEffect(() => {
prozor.paypal
 .Gumbi({
 stvoriti narudžbu: (podaci, radnje, pogr) => {
povratak akcije.narudžba.stvori({
 namjera: "UHVATITI",
 kupovne_jedinice: [
 {
 opis: "Laptop MacBook",
 iznos: {
 Šifra valute: "USD",
 vrijednost: 350.00,
 },
 },
 ],
 });
 },
 onApprove: asinkroni (podaci, akcije) => {
konst narudžba = čekati akcije.narudžba.hvatanje();
konzola.log("uspjeh", narudžba);
 setTransactionStatus("uspjeh");
 },
 onError: (pogriješiti) => {
konzola.log (pogreška);
 setTransactionStatus("neuspjeh");
 },
 })
 .render (paypal.current);
 }, []);
ako (Status transakcije "uspjeh") {
povratak<Uspjeh plaćanja />;
 }
ako (Status transakcije "neuspjeh") {
povratak<PaymentFailure />;
 }
povratak (



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

Ovaj kod koristi tri Reagirajte kuke: useRef, useState i useEffect. Koristi useRef za stvaranje reference na div element, koji će djelovati kao spremnik za PayPal gumb za naplatu.

Koristi useEffect za stvaranje PayPal gumba s paypal. Gumbi funkciju, a zatim prikazuje taj gumb u elementu div na koji se poziva paypal.current metoda.

The paypal. Gumbi funkcija uzima objekt s nekoliko svojstava:

• createOrder: ova funkcija vraća objekt koji sadrži pojedinosti o narudžbi koju je korisnik stvorio. Pojedinosti o narudžbi uključivat će specifične pojedinosti proizvoda ili usluge kao što su iznos, naziv proizvoda, opis i valuta.
• onApprove: ova se funkcija pokreće kada je plaćanje odobreno. Hvata plaćanje i bilježi poruku o uspjehu na konzolu. Također postavlja transakcijski status navesti da uspjeh.
• onError: Ova se funkcija pokreće kada plaćanje naiđe na pogrešku. Zapisuje poruku o pogrešci u konzolu i postavlja transakcijski status navesti da neuspjeh.

Konačno, komponenta uvjetno prikazuje ili Uspjeh plaćanja ili PaymentFailure komponenta ovisno o vrijednosti transakcijski status država.

Ove dvije komponente prikazat će se samo nakon uspješne ili neuspješne transakcije. Kreirajte dvije datoteke: PaymentSuccess.js i PaymentFailure.js u mapu komponenti i dodajte funkcionalnu komponentu s elementom paragrafa koji prikazuje status transakcije.

Ažurirajte App.js komponentu

Otvorite datoteku src/App.js i dodajte kod u nastavku:

uvoz Reagiraj, {useState} iz"reagirati";
uvoz Proizvod iz"./components/Product";
uvoz PayPalCheckout iz"./components/PayPalCheckout";
uvoz"./App.css";
funkcijaaplikacija() {
konst [odjava, setCheckOut] = useState(lažno);
povratak (

"Aplikacija">
"Zaglavlje aplikacije">
 {provjeri? (

 ): (
"Proizvod">
 ime klase="provjeri"
 onClick={() => {
 setCheckOut(pravi);
 }}
 >
 Dodaj u košaricu i naplati
 </button>

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

Ovaj kod koristi pristup uvjetnog prikazivanja za prikaz komponente PayPalCheckout ili komponente proizvoda. UseState hook inicijalizira varijablu stanja pod nazivom checkout kao false, koja prati trenutno stanje kada se stranica učita.

U početku React renderira komponentu proizvoda, uključujući gumb za naplatu. Kada korisnik klikne gumb za odjavu, funkcija rukovatelja onClick pokreće ažuriranje varijable odjave na istinito. Ovo ažuriranje traži od komponente aplikacije da umjesto nje renderira komponentu PayPalCheckout.

Dodatne značajke PayPal plaćanja

PayPal značajke plaćanja, kao što su One Touch i PayPal Credit, osiguravaju da vaši klijenti mogu uživati ​​u pojednostavljenom procesu plaćanja koji je siguran, pouzdan i praktičan.

Iako možete izgraditi vlastitu uslugu obrade plaćanja od nule, korištenje platforme za plaćanje kao što je PayPal poželjno je fleksibilnija i učinkovitija alternativa. U biti, uz postavljeno rješenje za plaćanje, ne morate se brinuti o upravljanju infrastrukturom potrebnom za postavljanje prilagođene usluge plaćanja.