Cum se integrează PayPal Checkout într-o aplicație React

În spațiul comerțului electronic, soluțiile de plată digitală au contribuit la o creștere semnificativă a veniturilor și la creșterea generală a afacerilor prin activarea și procesarea plăților transfrontaliere cu ușurință.

PayPal oferă o soluție de plată digitală simplă și flexibilă pentru gestionarea tranzacțiilor online. Încorporând PayPal în aplicațiile dvs. web, vă puteți asigura că clienții au acces la o experiență de plată fără întreruperi și sigură, care, la rândul său, poate duce la creșterea vânzărilor și a încrederii generale în brand.

Citiți mai departe pentru a afla cum să integrați PayPal în aplicațiile dvs. React.

Configurați un cont PayPal Sandbox

PayPal Sandbox este un mediu de testare oferit de PayPal, astfel încât să puteți testa integrările de plată în aplicațiile dvs. Oferă un mediu simulat care include toate caracteristicile de plată găsite în mediul de producție live al PayPal.

Pur și simplu, sandbox-ul oferă o platformă pentru testarea integrărilor de plată fără a fi nevoie de bani reali.

Folosind contul sandbox, puteți accesa un cont PayPal virtual cu fonduri de testare, care vă permite să simulați diferite tipuri de tranzacții și integrări de plăți.

Pentru a crea un cont sandbox, accesați Consola pentru dezvoltatori PayPal și conectați-vă cu acreditările contului dvs. PayPal. Apoi, pe tabloul de bord pentru dezvoltatori, faceți clic pe Conturi Sandbox buton.

Pentru a procesa o tranzacție PayPal din aplicația React, aveți nevoie de două conturi sandbox: un cont de afaceri și un cont personal. Aceste două conturi vă vor ajuta să simulați o tranzacție completă, atât din punctul de vedere al clientului, cât și din punctul de vedere al comerciantului (afacere).

Este important să testați funcționalitatea integrării plăților pe aplicația dvs. din ambele perspective.

Faceți clic pe Creează cont butonul pentru a configura cele două conturi.

În pagina de setări a contului, creați unul din fiecare tip de cont: personal, apoi de afaceri. Veți folosi acreditările contului personal pentru a vă conecta Cutia de nisip PayPal cont personal. Pe de altă parte, veți folosi acreditările pentru contul de afaceri pentru a crea un proiect pe consola pentru dezvoltatori pentru a obține ID-ul de client PayPal.

Alternativ, în loc să creați conturi noi, puteți utiliza conturile standard sandbox furnizate de PayPal pentru a testa integrările de plată.

Creați un proiect PayPal

Pe pagina tabloului de bord pentru dezvoltatori, faceți clic pe Aplicații și acreditări butonul și faceți clic Creați aplicație butonul pentru a configura un proiect PayPal. Apoi, completați numele aplicației dvs., alegeți Comerciant ca tip de cont și selectați acreditările pentru contul de afaceri pe care l-ați creat inițial.

În cele din urmă, copiați ID-ul de client al aplicației.

Configurați clientul React

Creați o aplicație React, deschide public/index.html fișier și adăugați ID-ul dvs. de client în formatul afișat mai jos în secțiunea element head.

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

Eticheta de script încarcă SDK-ul JavaScript PayPal, o bibliotecă care oferă funcționalități la nivelul clientului pentru interacțiunea cu API-ul PayPal și o face disponibilă pentru utilizare în componentele React.

Folosind funcțiile SDK-ului, puteți crea un buton de plată PayPal care se ocupă de fluxul de plată care implică trimiterea detaliilor de plată către PayPal, autorizarea plății și gestionarea plății raspuns.

Creați o componentă de produs

În directorul /src, creați un nou folder de componente și adăugați două fișiere: Product.js și PayPalCheckout.js.

Deschideți fișierul Product.js și adăugați codul de mai jos:

import Reacționează, { useState } din"reacţiona";
import„./product.style.css”;
import„../assess/laptop.jpg”;
funcţieApp() {
întoarcere (
„Container-produs”>
„Conținutul produsului”>
"produs"> 
cere(„../assess/laptop.jpg”)} alt="laptop" />
 </div>
"desc">
 MacBook Pro</h2>



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

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


exportMod implicit Aplicație;

Acest cod redă o componentă simplă a produsului.

Creați componenta PayPal Checkout

Adăugați următorul cod în fișierul PayPalCheckout.js:

import Reacționează, { useRef, useEffect, useState } din"reacţiona";
import PaymentFailure din„./PaymentFailure”;
import PlataSucces din„./PaymentSuccess”;
funcţiePayPalCheckout() {
const paypal = useRef();
const [transactionStatus, setTransactionStatus] = useState(nul);
 useEffect(() => {
fereastră.paypal
 .Butoane({
 createOrder: (date, acțiuni, eroare) => {
întoarcere actions.order.create({
 intentie: "CAPTURĂ",
 buy_units: [
 {
 Descriere: „Laptop MacBook”,
 Cantitate: {
 currency_code: "USD",
 valoare: 350.00,
 },
 },
 ],
 });
 },
 onApprove: asincron (date, acțiuni) => {
const comanda = așteaptă actions.order.capture();
consolă.Buturuga("succes", Ordin);
 setTransactionStatus("succes");
 },
 onError: (a greșit) => {
consolă.log (err);
 setTransactionStatus("eșec");
 },
 })
 .renda (paypal.current);
 }, []);
dacă (Starea tranzacției "succes") {
întoarcere<PlataSucces />;
 }
dacă (Starea tranzacției "eșec") {
întoarcere<PaymentFailure />;
 }
întoarcere (



</div>
 </div>
 );
}
exportMod implicit PayPalCheckout;

Acest cod folosește trei Cârlige de reacție: useRef, useState și useEffect. Utilizează useRef pentru a crea o referință la un element div, care va acționa ca un container pentru butonul de plată PayPal.

Utilizează useEffect pentru a crea un buton PayPal cu paypal. Butoane funcția și apoi redă acel buton în elementul div la care face referire paypal.currenmetoda t.

The paypal. Butoane funcția preia un obiect cu mai multe proprietăți:

• createOrder: Această funcție returnează un obiect care conține detaliile comenzii pe care utilizatorul a creat-o. Detaliile comenzii vor include detaliile specifice ale produsului sau serviciului, cum ar fi suma, numele produsului, descrierea și moneda.
• onApprove: Această funcție rulează atunci când plata este aprobată. Captează plata și înregistrează mesajul de succes pe consolă. De asemenea, stabilește statutul tranzacției stare să succes.
• onError: Această funcție rulează atunci când plata întâmpină o eroare. Înregistrează mesajul de eroare pe consolă și setează statutul tranzacției stare să eșec.

În cele din urmă, componenta redă condiționat fie PlataSucces sau PaymentFailure componenta in functie de valoarea statutul tranzacției stat.

Aceste două componente se vor reda numai după o tranzacție reușită sau după una eșuată. Continuați și creați două fișiere: PaymentSuccess.js și PaymentFailure.js în folderul componente și adăugați o componentă funcțională cu un element de paragraf care redă starea tranzacției.

Actualizați componenta App.js

Deschideți fișierul src/App.js și adăugați codul de mai jos:

import Reacționează, { useState } din"reacţiona";
import Produs din„./components/Product”;
import PayPalCheckout din„./components/PayPalCheckout”;
import„./App.css”;
funcţieApp() {
const [checkout, setCheckOut] = useState(fals);
întoarcere (

„Aplicație”>
„Aplicație antet”>
 {verifică? (

 ): (
"Produs">
 className="verifică"
 onClick={() => {
 setCheckOut(Adevărat);
 }}
 >
 Adăugați în coș și comandă
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
exportMod implicit Aplicație;

Acest cod folosește o abordare de randare condiționată pentru a afișa fie componenta PayPalCheckout, fie componenta Produs. Cârligul useState inițializează o variabilă de stare numită checkout ca false, care ține evidența stării curente atunci când pagina se încarcă.

Inițial, React redă componenta Produs, inclusiv butonul de finalizare. Când un utilizator dă clic pe butonul de finalizare a achiziției, funcția de gestionare onClick declanșează actualizarea variabilei de finalizare a achiziției la true. Această actualizare solicită componentei App să redeze componenta PayPalCheckout.

Caracteristici suplimentare de plată PayPal

Funcțiile de plată ale PayPal, cum ar fi One Touch și Credit PayPal, asigură clienților tăi un proces de plată simplificat, sigur, fiabil și convenabil.

Deși vă puteți construi propriul serviciu de procesare a plăților de la zero, utilizarea unei platforme de plată precum PayPal este de preferință o alternativă mai flexibilă și mai eficientă. În esență, cu o soluție de plată în vigoare, nu trebuie să vă faceți griji cu privire la gestionarea infrastructurii necesare pentru a configura un serviciu de plată personalizat.