Kuidas integreerida PayPal Checkout Reacti rakendusse

E-kaubanduse valdkonnas on digitaalsed makselahendused aidanud kaasa märkimisväärsele tulude kasvule ja ettevõtete üldisele kasvule, võimaldades ja töödelda piiriüleseid makseid hõlpsalt.

PayPal pakub lihtsat ja paindlikku digitaalsete maksete lahendust veebitehingute haldamiseks. Kui lisate oma veebirakendustesse PayPali, saate tagada klientidele sujuva ja turvalise maksekogemuse, mis omakorda võib suurendada müüki ja suurendada üldist brändi usaldust.

Lugege edasi, et õppida, kuidas PayPali oma Reacti rakendustesse integreerida.

Looge PayPali liivakasti konto

PayPali liivakast on PayPali pakutav testimiskeskkond, et saaksite oma rakendustes maksete integreerimist testida. See pakub simuleeritud keskkonda, mis sisaldab kõiki PayPali reaalajas tootmiskeskkonnas leiduvaid maksefunktsioone.

Liivakast pakub lihtsalt platvormi maksete integreerimise testimiseks, ilma et oleks vaja päris raha.

Liivakastikontot kasutades pääsete testvahenditega ligi virtuaalsele PayPali kontole, mis võimaldab simuleerida erinevat tüüpi tehinguid ja maksete integreerimist.

Liivakasti konto loomiseks minge aadressile PayPali arendajakonsool ja logige sisse oma PayPali konto mandaatidega. Järgmisena klõpsake arendaja armatuurlaual nuppu Liivakasti kontod nuppu.

PayPali tehingu töötlemiseks oma Reacti rakendusest on teil vaja kahte liivakastikontot: ettevõttekontot ja isiklikku kontot. Need kaks kontot aitavad teil simuleerida täielikku tehingut – nii kliendi kui ka kaupmehe (äri) vaates.

Oluline on testida oma rakenduse maksete integreerimise funktsionaalsust mõlemast vaatenurgast.

Klõpsake nuppu Loo konto nuppu, et seadistada kaks kontot.

Konto seadete lehel looge üks igat tüüpi kontodest: isiklik, seejärel ärikonto. Sisselogimiseks kasutate isikliku konto mandaate PayPali liivakast isiklik konto. Teisest küljest kasutate PayPali kliendi ID hankimiseks arendajakonsoolis projekti loomiseks ettevõtte konto mandaate.

Teise võimalusena võite uute kontode loomise asemel kasutada maksete integreerimise testimiseks PayPali pakutavaid liivakasti vaikekontosid.

Looge PayPali projekt

Arendaja armatuurlaua lehel klõpsake nuppu Rakendused ja mandaadid nuppu ja klõpsake Loo rakendus nuppu PayPali projekti seadistamiseks. Järgmisena sisestage oma rakenduse nimi, valige Kaupmees konto tüübina ja valige algselt loodud ettevõttekonto mandaadid.

Lõpuks kopeerige rakenduse kliendi ID.

Seadistage Reacti klient

Looge rakendus React, ava public/index.html faili ja lisage oma kliendi ID allolevas peaelemendi jaotises näidatud vormingus.

<stsenaariumsrc=" https://www.paypal.com/sdk/js? klient-id=teie-kliendi-ID&valuuta=USD">stsenaarium>

Skriptimärgend laadib PayPali JavaScripti SDK – teegi, mis pakub kliendipoolseid funktsioone PayPali API-ga suhtlemiseks ja teeb selle Reacti komponentides kasutamiseks kättesaadavaks.

SDK funktsioone kasutades saate luua PayPali maksenupu, mis haldab maksevoogu, mis hõlmab makseandmete saatmist PayPalile, makse autoriseerimist ja makse käsitlemist vastuseks.

Looge tootekomponent

Looge kataloogis /src uus komponentide kaust ja lisage kaks faili: Product.js ja PayPalCheckout.js.

Avage fail Product.js ja lisage allolev kood:

importida Reageerige, { useState } alates"reageerida";
importida"./product.style.css";
importida"../assests/laptop.jpg";
funktsiooniRakendus() {
tagasi (
"Toote konteiner">
"Toote sisu">
"toode"> 
nõuda("../assests/laptop.jpg")} alt="sülearvuti" />
 </div>
"langetamine">
 MacBook Pro</h2>



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

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


eksportidavaikimisi Rakendus;

See kood muudab lihtsa tootekomponendi.

Looge PayPal Checkouti komponent

Lisage faili PayPalCheckout.js järgmine kood:

importida Reageerida, { useRef, useEffect, useState } alates"reageerida";
importida Maksetõrge alates"./PaymentFailure";
importida Makse õnnestumine alates"./Payment Success";
funktsiooniPayPalCheckout() {
konst paypal = useRef();
konst [transactionStatus, setTransactionStatus] = useState(null);
 useEffect(() => {
aken.paypal
 .Buttons({
 loo tellimus: (andmed, toimingud, eksimine) => {
tagasi action.order.create({
 kavatsus: "PALDUSTA",
 ostu_ühikud: [
 {
 kirjeldus: "MacBooki sülearvuti",
 summa: {
 Valuuta kood: "USD",
 väärtus: 350.00,
 },
 },
 ],
 });
 },
 Kinnita: asünkr (andmed, toimingud) => {
konst tellimus = ootama action.order.capture();
konsool.log("edu", tellida);
 setTransactionStatus("edu");
 },
 onError: (eks) => {
konsool.log (err);
 setTransactionStatus("ebaõnnestumine");
 },
 })
 .render (paypal.current);
 }, []);
kui (tehingu olek "edu") {
tagasi<Makse õnnestumine />;
 }
kui (tehingu olek "ebaõnnestumine") {
tagasi<Maksetõrge />;
 }
tagasi (



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

See kood kasutab kolme Reageeri konksud: useRef, useState ja useEffect. See kasutab funktsiooni useRef, et luua viide div-elemendile, mis toimib PayPali kassanupu konteinerina.

See kasutab funktsiooni useEffect PayPali nupu loomiseks paypal. Nupud funktsioon ja renderdab seejärel selle nupu elemendis div, millele viitab paypal.current meetod.

The paypal. Nupud funktsioon võtab objekti, millel on mitu omadust:

• createOrder: see funktsioon tagastab objekti, mis sisaldab kasutaja loodud tellimuse üksikasju. Tellimuse üksikasjad sisaldavad toote või teenuse konkreetseid üksikasju, nagu summa, toote nimi, kirjeldus ja valuuta.
• onApprove: see funktsioon käivitub, kui makse on kinnitatud. See salvestab makse ja logib konsooli eduteate. See määrab ka tehingu olek olekusse edu.
• onError: see funktsioon käivitub, kui maksel ilmneb tõrge. See logib veateate konsooli ja määrab tehingu olek olekusse ebaõnnestumine.

Lõpuks renderdab komponent tingimuslikult kas Makse õnnestumine või Maksetõrge komponent sõltuvalt väärtusest tehingu olek olek.

Need kaks komponenti renderdatakse ainult pärast edukat või ebaõnnestunud tehingut. Jätkake ja looge kaks faili: PaymentSuccess.js ja PaymentFailure.js komponentide kausta ja lisage funktsionaalne komponent koos lõigu elemendiga, mis renderdab tehingu oleku.

Värskendage komponenti App.js

Avage fail src/App.js ja lisage allolev kood:

importida Reageerige, { useState } alates"reageerida";
importida Toode alates"./components/Product";
importida PayPalCheckout alates"./components/PayPalCheckout";
importida"./App.css";
funktsiooniRakendus() {
konst [checkout, setCheckOut] = useState(vale);
tagasi (

"Rakendus">
"Rakenduse päis">
 { checkout? (

 ): (
"toode">
 klassinimi="kassasse"
 onClick={() => {
 setCheckOut(tõsi);
 }}
 >
 Lisa ostukorvi ja kassasse
 </button>

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

See kood kasutab komponendi PayPalCheckout või toote komponendi kuvamiseks tingimusliku renderdamise lähenemisviisi. Konks useState lähtestab olekumuutuja nimega checkout valeks, mis jälgib lehe laadimisel hetkeolekut.

Esialgu renderdab React toote komponendi, sealhulgas kassanupu. Kui kasutaja klõpsab kassanupul, käivitab funktsioon onClick töötleja, et värskendada kassamuutuja väärtuseks Tõene. See värskendus palub rakenduse komponendil renderdada selle asemel PayPalCheckouti komponendi.

Täiendavad PayPali maksefunktsioonid

PayPali maksefunktsioonid, nagu One Touch ja PayPal Credit, tagavad, et teie kliendid saavad nautida sujuvat makseprotsessi, mis on turvaline, usaldusväärne ja mugav.

Kuigi saate luua oma maksete töötlemise teenuse nullist, on sellise makseplatvormi kasutamine nagu PayPal eelistatavalt paindlikum ja tõhusam alternatiiv. Põhimõtteliselt, kui makselahendus on paigas, ei pea te muretsema kohandatud makseteenuse seadistamiseks vajaliku infrastruktuuri haldamise pärast.