Kaip integruoti „PayPal Checkout“ į „React“ programą

Elektroninės prekybos erdvėje skaitmeninių mokėjimų sprendimai prisidėjo prie reikšmingo pajamų padidėjimo ir bendro verslo augimo, nes įgalino ir lengvai apdoroja tarptautinius mokėjimus.

„PayPal“ siūlo paprastą ir lankstų skaitmeninių mokėjimų sprendimą internetinėms operacijoms valdyti. Įtraukę „PayPal“ į savo žiniatinklio programas, galite užtikrinti, kad klientai galėtų sklandžiai ir saugiai naudotis mokėjimais, o tai savo ruožtu gali padidinti pardavimus ir bendrą pasitikėjimą prekės ženklu.

Skaitykite toliau, kad sužinotumėte, kaip integruoti „PayPal“ į „React“ programas.

Sukurkite „PayPal Sandbox“ paskyrą

„PayPal Sandbox“ yra „PayPal“ teikiama testavimo aplinka, kad galėtumėte išbandyti mokėjimo integravimą savo programose. Ji siūlo imituojamą aplinką, kurioje yra visos mokėjimo funkcijos, esančios tiesioginėje PayPal gamybos aplinkoje.

Paprasčiausiai smėlio dėžė suteikia platformą mokėjimų integravimui išbandyti nenaudojant tikrų pinigų.

Naudodami smėlio dėžės paskyrą galite pasiekti virtualią PayPal paskyrą su bandomomis lėšomis, kuri leidžia imituoti įvairių tipų operacijas ir mokėjimų integravimą.

Norėdami sukurti smėlio dėžės paskyrą, eikite į „PayPal“ kūrėjų pultas ir prisijunkite naudodami savo PayPal paskyros kredencialus. Tada kūrėjo prietaisų skydelyje spustelėkite Smėlio dėžės paskyros mygtuką.

Norėdami apdoroti PayPal operaciją iš savo React programos, jums reikia dviejų smėlio dėžės paskyrų: verslo paskyros ir asmeninės paskyros. Šios dvi paskyros padės imituoti visą operaciją – ir kliento, ir prekybininko (verslo) požiūriu.

Svarbu išbandyti mokėjimo integravimo savo programoje funkcionalumą iš abiejų perspektyvų.

Spustelėkite ant Sukurti paskyrą mygtuką, kad nustatytumėte dvi paskyras.

Paskyros nustatymų puslapyje sukurkite vieną iš kiekvieno tipo paskyros: asmeninė, tada verslo. Prisijungdami naudosite asmeninės paskyros kredencialus „PayPal“ smėlio dėžė Asmeninė paskyra. Kita vertus, naudodami verslo paskyros kredencialus sukursite projektą kūrėjo pulte, kad gautumėte PayPal kliento ID.

Arba vietoj naujų paskyrų kūrimo galite naudoti numatytąsias smėlio dėžės paskyras, kurias teikia PayPal, kad išbandytumėte mokėjimo integravimą.

Sukurkite „PayPal“ projektą

Kūrėjo prietaisų skydelio puslapyje spustelėkite Programos ir kredencialai mygtuką ir spustelėkite Sukurti programą mygtuką, norėdami nustatyti PayPal projektą. Tada įveskite savo paraiškos pavadinimą, pasirinkite Prekybininkas kaip paskyros tipą ir pasirinkite iš pradžių sukurtos verslo paskyros kredencialus.

Galiausiai nukopijuokite programos kliento ID.

Nustatykite „React Client“.

Sukurkite programą „React“., Atidaryk public/index.html failą ir pridėkite savo kliento ID tokiu formatu, kaip nurodyta toliau skiltyje „head element“.

<scenarijussrc=" https://www.paypal.com/sdk/js? client-id=jūsų-kliento-ID&currency=USD">scenarijus>

Scenarijaus žyma įkelia „PayPal JavaScript“ SDK – biblioteką, kuri teikia kliento funkcijas sąveikaujant su „PayPal“ API, ir leidžia ją naudoti „React“ komponentuose.

Naudodami SDK funkcijas galite sukurti PayPal mokėjimo mygtuką, kuris tvarko mokėjimo srautą, kuris apima mokėjimo informacijos siuntimą į PayPal, mokėjimo patvirtinimą ir mokėjimo tvarkymą atsakymą.

Sukurkite produkto komponentą

Kataloge /src sukurkite naują komponentų aplanką ir pridėkite du failus: Product.js ir PayPalCheckout.js.

Atidarykite failą Product.js ir pridėkite toliau esantį kodą:

importuoti Reaguoti, { useState } iš"reaguoti";
importuoti"./product.style.css";
importuoti"../assests/laptop.jpg";
funkcijaProgramėlė() {
grąžinti (
"Produktas-konteineris">
"Produkto turinys">
"produktas"> 
reikalauti("../assests/laptop.jpg")} alt="nešiojamas kompiuteris" />
 </div>
"nusileidimas">
 MacBook Pro</h2>



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

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


eksportuotinumatytas Programėlė;

Šis kodas pateikia paprastą produkto komponentą.

Sukurkite „PayPal Checkout“ komponentą

Pridėkite šį kodą prie PayPalCheckout.js failo:

importuoti Reaguoti, { useRef, useEffect, useState } iš"reaguoti";
importuoti Mokėjimo nesėkmė iš"./PaymentFailure";
importuoti Mokėjimas Sėkmės iš"./PaymentSuccess";
funkcijaPayPalCheckout() {
konst paypal = useRef();
konst [transactionStatus, setTransactionStatus] = useState(nulinis);
 useEffect (() => {
langas.paypal
 .Buttons({
 sukurti užsakymą: (duomenys, veiksmai, klaida) => {
grąžinti action.order.create({
 tikslas: "UŽGAUTI",
 pirkimo_vienetai: [
 {
 apibūdinimas: "MacBook nešiojamas kompiuteris",
 suma: {
 valiutos kodas: "USD",
 vertė: 350.00,
 },
 },
 ],
 });
 },
 patvirtinti: async (duomenys, veiksmai) => {
konst tvarka = laukti action.order.capture();
konsolė.log("sėkmė", įsakymas);
 setTransactionStatus("sėkmė");
 },
 onError: (klysti) => {
konsolė.log (err);
 setTransactionStatus("nesėkmė");
 },
 })
 .render (paypal.current);
 }, []);
jeigu (transakcijos būsena "sėkmė") {
grąžinti<Mokėjimas Sėkmės />;
 }
jeigu (transakcijos būsena "nesėkmė") {
grąžinti<Mokėjimo nesėkmė />;
 }
grąžinti (



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

Šis kodas naudoja tris Reaguoti kabliukai: useRef, useState ir useEffect. Jis naudoja useRef, kad sukurtų nuorodą į div elementą, kuris veiks kaip PayPal patikros mygtuko talpykla.

Jis naudoja useEffect, kad sukurtų „PayPal“ mygtuką su paypal. Mygtukai funkcija, o tada atvaizduoja tą mygtuką div elemente, kuriame nurodoma paypal.current metodas.

The paypal. Mygtukai funkcija paima objektą su keliomis savybėmis:

• createOrder: ši funkcija grąžina objektą, kuriame yra vartotojo sukurto užsakymo informacija. Išsamioje užsakymo dalyje bus nurodyta konkreti produkto ar paslaugos informacija, pvz., suma, prekės pavadinimas, aprašymas ir valiuta.
• onApprove: ši funkcija veikia, kai patvirtinamas mokėjimas. Jis užfiksuoja mokėjimą ir užregistruoja sėkmės pranešimą konsolėje. Jis taip pat nustato sandorio būsena būsite į sėkmė.
• onError: ši funkcija paleidžiama, kai aptinkama mokėjimo klaida. Jis registruoja klaidos pranešimą konsolėje ir nustato sandorio būsena būsite į nesėkmė.

Galiausiai komponentas sąlyginai pateikia arba Mokėjimas Sėkmės arba Mokėjimo nesėkmė komponentas, priklausantis nuo vertės sandorio būsena valstybė.

Šie du komponentai bus pateikti tik po sėkmingos arba nesėkmingos operacijos. Eikite į priekį ir sukurkite du failus: PaymentSuccess.js ir PaymentFailure.js komponentų aplanke ir pridėkite funkcinį komponentą su pastraipos elementu, kuris parodo operacijos būseną.

Atnaujinkite App.js komponentą

Atidarykite failą src/App.js ir pridėkite toliau esantį kodą:

importuoti Reaguoti, { useState } iš"reaguoti";
importuoti Produktas iš"./components/Product";
importuoti PayPalCheckout iš"./components/PayPalCheckout";
importuoti"./App.css";
funkcijaProgramėlė() {
konst [checkout, setCheckOut] = useState(klaidinga);
grąžinti (

"Programėlė">
"Programos antraštė">
 {išsiregistruoti? (

 ): (
"Produktas">
 className="išsiregistruoti"
 onClick={() => {
 setCheckOut(tiesa);
 }}
 >
 Pridėti į krepšelį ir atsiskaityti
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
eksportuotinumatytas Programėlė;

Šiame kode naudojamas sąlyginis pateikimo metodas, kad būtų rodomas komponentas PayPalCheckout arba produkto komponentas. „useState“ kabliukas inicijuoja būsenos kintamąjį, vadinamą patikra, kaip false, kuris stebi esamą būseną, kai įkeliamas puslapis.

Iš pradžių „React“ pateikia produkto komponentą, įskaitant patikros mygtuką. Kai vartotojas spustelėja atsiskaitymo mygtuką, suaktyvinama funkcija onClick tvarkyklės, kad patikros kintamasis būtų atnaujintas į teisingą. Šis naujinimas ragina programos komponentą pateikti PayPalCheckout komponentą.

Papildomos PayPal mokėjimo funkcijos

„PayPal“ mokėjimo funkcijos, tokios kaip „One Touch“ ir „PayPal Credit“, užtikrina, kad jūsų klientai galėtų mėgautis supaprastintu mokėjimo procesu, kuris yra saugus, patikimas ir patogus.

Nors galite sukurti savo mokėjimų apdorojimo paslaugą nuo nulio, geriau naudoti tokią mokėjimo platformą kaip „PayPal“ yra lankstesnė ir efektyvesnė alternatyva. Iš esmės, kai įdiegtas mokėjimo sprendimas, jums nereikia rūpintis infrastruktūros, reikalingos tinkintai mokėjimo paslaugai nustatyti, valdymu.