Kā integrēt PayPal Checkout React lietojumprogrammā

E-komercijas telpā digitālo maksājumu risinājumi ir veicinājuši ievērojamu ieņēmumu pieaugumu un uzņēmumu kopējo izaugsmi, ļaujot un ērti apstrādāt pārrobežu maksājumus.

PayPal piedāvā vienkāršu un elastīgu digitālo maksājumu risinājumu tiešsaistes darījumu pārvaldībai. Iekļaujot PayPal savās tīmekļa lietojumprogrammās, jūs varat nodrošināt klientiem netraucētu un drošu maksājumu pieredzi, kas savukārt var palielināt pārdošanas apjomu un vispārējo zīmola uzticēšanos.

Lasiet tālāk, lai uzzinātu, kā integrēt PayPal savās React lietojumprogrammās.

Izveidojiet PayPal Sandbox kontu

PayPal Sandbox ir PayPal nodrošināta testēšanas vide, lai jūs varētu pārbaudīt maksājumu integrāciju savās lietojumprogrammās. Tā piedāvā simulētu vidi, kas ietver visas maksājumu funkcijas, kas atrodamas PayPal tiešraides ražošanas vidē.

Vienkārši smilškaste nodrošina platformu maksājumu integrāciju testēšanai bez reālas naudas nepieciešamības.

Izmantojot smilškastes kontu, varat piekļūt virtuālajam PayPal kontam ar testa līdzekļiem, kas ļauj simulēt dažāda veida darījumus un maksājumu integrācijas.

Lai izveidotu smilškastes kontu, dodieties uz PayPal izstrādātāja konsole un pierakstieties ar saviem PayPal konta akreditācijas datiem. Pēc tam izstrādātāja informācijas panelī noklikšķiniet uz Sandbox konti pogu.

Lai apstrādātu PayPal darījumu no savas React lietojumprogrammas, jums ir nepieciešami divi smilškastes konti: uzņēmuma konts un personīgais konts. Šie divi konti palīdzēs simulēt pilnīgu darījumu — gan no klienta, gan no tirgotāja (uzņēmuma) skatījuma.

Ir svarīgi pārbaudīt maksājumu integrācijas funkcionalitāti savā lietojumprogrammā no abām perspektīvām.

Noklikšķiniet uz Izveidot profilu pogu, lai iestatītu abus kontus.

Konta iestatījumu lapā izveidojiet vienu no katra veida konta: personīgais, pēc tam uzņēmuma konts. Lai pierakstītos, jūs izmantosit personīgā konta akreditācijas datus PayPal smilšu kaste personīgais konts. No otras puses, jūs izmantosit uzņēmuma konta akreditācijas datus, lai izstrādātāja konsolē izveidotu projektu, lai iegūtu PayPal klienta ID.

Alternatīvi, tā vietā, lai izveidotu jaunus kontus, varat izmantot PayPal nodrošinātos noklusējuma smilškastes kontus, lai pārbaudītu maksājumu integrāciju.

Izveidojiet PayPal projektu

Izstrādātāja informācijas paneļa lapā noklikšķiniet uz Lietotnes un akreditācijas dati pogu un noklikšķiniet Izveidot lietotni pogu, lai iestatītu PayPal projektu. Pēc tam ievadiet pieteikuma nosaukumu, izvēlieties Tirgotājs kā konta veidu un atlasiet sākotnēji izveidotā uzņēmuma konta akreditācijas datus.

Visbeidzot nokopējiet lietotnes klienta ID.

Iestatiet React Client

Izveidojiet React lietojumprogrammu, atveriet public/index.html failu un pievienojiet savu klienta ID formātā, kas norādīts tālāk sadaļā head elementa.

<skriptssrc=" https://www.paypal.com/sdk/js? klienta-id=jūsu-klienta-ID&currency=USD">skripts>

Skripta tags ielādē PayPal JavaScript SDK — bibliotēku, kas nodrošina klienta puses funkcionalitāti mijiedarbībai ar PayPal API, un padara to pieejamu lietošanai React komponentos.

Izmantojot SDK funkcijas, varat izveidot PayPal maksājuma pogu, kas apstrādā maksājumu plūsmu, kas ietver maksājuma informācijas nosūtīšanu PayPal, maksājuma autorizāciju un maksājuma apstrādi atbildi.

Izveidojiet produkta komponentu

Direktorijā /src izveidojiet jaunu komponentu mapi un pievienojiet divus failus: Product.js un PayPalCheckout.js.

Atveriet failu Product.js un pievienojiet tālāk norādīto kodu:

imports Reaģēt, { useState } no"reaģēt";
imports"./product.style.css";
imports"../assests/laptop.jpg";
funkcijuApp() {
atgriezties (
"Produkts-konteiners">
"Produkta saturs">
"produkts"> 
pieprasīt("../assests/laptop.jpg")} alt="klēpjdators" />
 </div>
"desc">
 MacBook Pro</h2>



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

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


eksportētnoklusējuma Lietotne;

Šis kods atveido vienkāršu produkta komponentu.

Izveidojiet PayPal Checkout komponentu

Pievienojiet failam PayPalCheckout.js šādu kodu:

imports Reaģēt, { useRef, useEffect, useState } no"reaģēt";
imports Maksājuma neveiksme no"./PaymentFailure";
imports Maksājuma veiksme no"./PaymentSuccess";
funkcijuPayPalCheckout() {
konst paypal = useRef();
konst [transactionStatus, setTransactionStatus] = useState(null);
 useEffect(() => {
logs.paypal
 .Buttons({
 izveidot pasūtījumu: (dati, darbības, kļūda) => {
atgriezties action.order.create({
 nolūks: "NOTVERT",
 iegādes_vienības: [
 {
 apraksts: "MacBook klēpjdators",
 summa: {
 valūtas kods: "USD",
 vērtība: 350.00,
 },
 },
 ],
 });
 },
 onApstiprināt: asinhrons (dati, darbības) => {
konst pasūtījums = gaidīt action.order.capture();
konsole.log("panākumi", pasūtījums);
 setTransactionStatus("panākumi");
 },
 onError: (kļūda) => {
konsole.log (err);
 setTransactionStatus("neveiksme");
 },
 })
 .render (paypal.current);
 }, []);
ja (darījuma statuss "panākumi") {
atgriezties<Maksājuma veiksme />;
 }
ja (darījuma statuss "neveiksme") {
atgriezties<Maksājuma neveiksme />;
 }
atgriezties (



</div>
 </div>
 );
}
eksportētnoklusējuma PayPalCheckout;

Šis kods izmanto trīs Reaģēt āķi: useRef, useState un useEffect. Tas izmanto useRef, lai izveidotu atsauci uz div elementu, kas darbosies kā PayPal izrakstīšanās pogas konteiners.

Tas izmanto useEffect, lai izveidotu PayPal pogu ar paypal. Pogas funkciju un pēc tam atveido šo pogu div elementā, uz kuru atsaucas paypal.current metode.

The paypal. Pogas funkcija aizņem objektu ar vairākām īpašībām:

• createOrder: šī funkcija atgriež objektu, kurā ir informācija par lietotāja izveidoto pasūtījumu. Pasūtījuma detaļās tiks iekļauta konkrēta informācija par produktu vai pakalpojumu, piemēram, summa, produkta nosaukums, apraksts un valūta.
• onApprove: šī funkcija darbojas, kad maksājums ir apstiprināts. Tas uztver maksājumu un reģistrē veiksmes ziņojumu konsolē. Tas arī nosaka darījuma statuss valsts uz panākumus.
• onError: šī funkcija darbojas, kad maksājumā rodas kļūda. Tas reģistrē kļūdas ziņojumu konsolē un iestata darījuma statuss valsts uz neveiksme.

Visbeidzot, komponents nosacīti atveido vai nu Maksājuma veiksme vai Maksājuma neveiksme komponents atkarībā no vērtības darījuma statuss Valsts.

Šie divi komponenti tiks renderēti tikai pēc veiksmīga vai neveiksmīga darījuma. Turpiniet un izveidojiet divus failus: PaymentSuccess.js un PaymentFailure.js komponentu mapē un pievienojiet funkcionālu komponentu ar rindkopas elementu, kas atveido darījuma statusu.

Atjauniniet App.js komponentu

Atveriet failu src/App.js un pievienojiet tālāk norādīto kodu:

imports Reaģēt, { useState } no"reaģēt";
imports Produkts no"./components/Produkts";
imports PayPalCheckout no"./components/PayPalCheckout";
imports"./App.css";
funkcijuApp() {
konst [checkout, setCheckOut] = useState(viltus);
atgriezties (

"Lietotne">
"Lietotnes galvene">
 {izrakstīšanās? (

 ): (
"Produkts">
 klasesNosaukums="izrakstīšanās"
 onClick={() => {
 setCheckOut(taisnība);
 }}
 >
 Pievienot grozam un izrakstīties
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Šajā kodā tiek izmantota nosacījuma renderēšanas pieeja, lai parādītu komponentu PayPalCheckout vai produkta komponentu. Āķis useState inicializē stāvokļa mainīgo, ko sauc par izrakstīšanos, kā nepatiesu, kas seko pašreizējam stāvoklim, kad lapa tiek ielādēta.

Sākotnēji React atveido produkta komponentu, tostarp izrakstīšanās pogu. Kad lietotājs noklikšķina uz norēķināšanās pogas, funkcija onClick apstrādātājs aktivizē norēķinu mainīgā atjaunināšanu uz True. Šis atjauninājums aicina lietotnes komponentu tā vietā renderēt PayPalCheckout komponentu.

Papildu PayPal maksājumu funkcijas

PayPal maksājumu funkcijas, piemēram, One Touch un PayPal Credit, nodrošina, ka jūsu klienti var baudīt racionalizētu maksājumu procesu, kas ir drošs, uzticams un ērts.

Lai gan jūs varat izveidot savu maksājumu apstrādes pakalpojumu no nulles, vēlams, lai elastīgāka un efektīvāka alternatīva būtu izmantot maksājumu platformu, piemēram, PayPal. Būtībā, ja ir ieviests maksājumu risinājums, jums nav jāuztraucas par infrastruktūras pārvaldību, kas nepieciešama pielāgota maksājumu pakalpojuma iestatīšanai.