Come integrare PayPal Checkout in un'applicazione React

Nello spazio dell'e-commerce, le soluzioni di pagamento digitale hanno contribuito a un aumento significativo delle entrate e alla crescita complessiva delle imprese consentendo ed elaborando con facilità i pagamenti transfrontalieri.

PayPal offre una soluzione di pagamento digitale semplice e flessibile per la gestione delle transazioni online. Incorporando PayPal nelle tue applicazioni web, puoi garantire ai clienti l'accesso a un'esperienza di pagamento semplice e sicura che a sua volta può portare a un aumento delle vendite e alla fiducia complessiva del marchio.

Continua a leggere per sapere come integrare PayPal nelle tue applicazioni React.

Configura un account sandbox PayPal

PayPal Sandbox è un ambiente di test fornito da PayPal che ti consente di testare le integrazioni dei pagamenti all'interno delle tue applicazioni. Offre un ambiente simulato che include tutte le funzionalità di pagamento presenti nell'ambiente di produzione live di PayPal.

Semplicemente, la sandbox fornisce una piattaforma per testare le integrazioni dei pagamenti senza la necessità di denaro reale.

Utilizzando l'account sandbox è possibile accedere a un conto PayPal virtuale con fondi di prova, che consente di simulare vari tipi di transazioni e integrazioni di pagamento.

Per creare un account sandbox, vai su Console per sviluppatori PayPal e accedi con le credenziali del tuo conto PayPal. Successivamente, nella dashboard dello sviluppatore, fai clic su Conti sandbox pulsante.

Per elaborare una transazione PayPal dalla tua applicazione React, hai bisogno di due account sandbox: un account aziendale e un account personale. Questi due account ti aiuteranno a simulare una transazione completa, sia dal punto di vista del cliente che dal punto di vista del commerciante (aziendale).

È importante testare la funzionalità dell'integrazione dei pagamenti sulla tua applicazione da entrambe le prospettive.

Clicca sul Creare un account pulsante per configurare i due account.

Nella pagina delle impostazioni dell'account, crea un account per ogni tipo: personale, quindi aziendale. Utilizzerai le credenziali dell'account personale per accedere La sandbox di PayPal account personale. D'altra parte, utilizzerai le credenziali per l'account aziendale per creare un progetto sulla console per sviluppatori per ottenere l'ID cliente di PayPal.

In alternativa, invece di creare nuovi account, puoi utilizzare gli account sandbox predefiniti forniti da PayPal per testare le integrazioni di pagamento.

Crea un progetto PayPal

Nella pagina del dashboard per sviluppatori, fai clic su App e credenziali pulsante e fare clic Crea app pulsante per impostare un progetto PayPal. Quindi, inserisci il nome della tua applicazione, scegli Mercante come tipo di account e seleziona le credenziali per l'account aziendale creato inizialmente.

Infine, copia l'ID client dell'app.

Configura il client React

Crea un'applicazione React, apri il public/index.html file e aggiungi il tuo ID cliente nel formato mostrato di seguito nella sezione dell'elemento head.

<copionesrc=" https://www.paypal.com/sdk/js? ID-cliente=ID-tuo-cliente&valuta=USD">copione>

Il tag script carica l'SDK JavaScript PayPal, una libreria che fornisce funzionalità lato client per l'interazione con l'API di PayPal e lo rende disponibile per l'uso nei componenti React.

Utilizzando le funzioni dell'SDK, puoi creare un pulsante di pagamento PayPal che gestisce il flusso di pagamento che comporta l'invio dei dettagli di pagamento a PayPal, l'autorizzazione del pagamento e la gestione del pagamento risposta.

Creare un componente del prodotto

Nella directory /src, crea una nuova cartella dei componenti e aggiungi due file: Product.js e PayPalCheckout.js.

Apri il file Product.js e aggiungi il codice seguente:

importare Reagisci, { useState } da"reagire";
importare"./prodotto.stile.css";
importare"../assets/laptop.jpg";
funzioneApp() {
ritorno (
"Prodotto-contenitore">
"Contenuto del prodotto">
"Prodotto"> 
richiedere("../assets/laptop.jpg")} alternativo="computer portatile" />
 </div>
"discesa">
 MacBookPro</h2>



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

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


esportarepredefinito Applicazione;

Questo codice esegue il rendering di un semplice componente del prodotto.

Crea il componente PayPal Checkout

Aggiungi il seguente codice al file PayPalCheckout.js:

importare Reagire, {useRef, useEffect, useState} da"reagire";
importare Pagamento fallito da"./Mancato pagamento";
importare Successo del pagamento da"./Pagamento riuscito";
funzionePagamento PayPal() {
cost paypal = useRef();
cost [transactionStatus, setTransactionStatus] = useState(nullo);
 usaEffetto(() => {
finestra.paypal
 .Buttons({
 creareOrdine: (dati, azioni, err) => {
ritorno azioni.ordine.create({
 intento: "CATTURARE",
 unità_di_acquisto: [
 {
 descrizione: "MacBook Portatile",
 quantità: {
 codice valuta: "DOLLARO STATUNITENSE",
 valore: 350.00,
 },
 },
 ],
 });
 },
 suApprova: asincrono (dati, azioni) => {
cost ordine = aspetta azioni.ordine.capture();
consolare.tronco d'albero("successo", ordine);
 impostaStatoTransazione("successo");
 },
 suErrore: (errare) => {
consolare.log (err);
 impostaStatoTransazione("fallimento");
 },
 })
 .render (paypal.current);
 }, []);
Se (Stato transazione "successo") {
ritorno<Successo del pagamento />;
 }
Se (Stato transazione "fallimento") {
ritorno<Pagamento fallito />;
 }
ritorno (



</div>
 </div>
 );
}
esportarepredefinito Pagamento PayPal;

Questo codice ne utilizza tre Reagisci ai ganci: useRef, useState e useEffect. Utilizza useRef per creare un riferimento a un elemento div, che fungerà da contenitore per il pulsante di pagamento PayPal.

Usa useEffect per creare un pulsante PayPal con il PayPal. Bottoni funzione, quindi esegue il rendering del pulsante nell'elemento div a cui fa riferimento paypal.currenmetodo t.

IL PayPal. Bottoni funzione prende un oggetto con diverse proprietà:

• createOrder: Questa funzione restituisce un oggetto contenente i dettagli dell'ordine che l'utente ha creato. I dettagli dell'ordine includeranno i dettagli specifici del prodotto o servizio come l'importo, il nome del prodotto, la descrizione e la valuta.
• onApprov: questa funzione viene eseguita quando il pagamento viene approvato. Cattura il pagamento e registra il messaggio di successo nella console. Imposta anche il stato della transazione stato a successo.
• onError: questa funzione viene eseguita quando il pagamento incontra un errore. Registra il messaggio di errore nella console e imposta il file stato della transazione stato a fallimento.

Infine, il componente esegue il rendering condizionale di the Successo del pagamento O Pagamento fallito componente a seconda del valore del stato della transazione stato.

Questi due componenti eseguiranno il rendering solo dopo una transazione riuscita o fallita. Vai avanti e crea due file: PaymentSuccess.js E PaymentFailure.js nella cartella dei componenti e aggiungi un componente funzionale con un elemento di paragrafo che rappresenta lo stato della transazione.

Aggiorna il componente App.js

Apri il file src/App.js e aggiungi il codice seguente:

importare Reagisci, { useState } da"reagire";
importare Prodotto da"./componenti/Prodotto";
importare Pagamento PayPal da"./componenti/PayPalCheckout";
importare"./App.css";
funzioneApp() {
cost [checkout, setCheckOut] = useState(falso);
ritorno (

"App">
"Intestazione app">
 {guardare? (

 ): (
"Prodotto">
 nomeclasse="guardare"
 al Clic={() => {
 setCheckOut(VERO);
 }}
 >
 Aggiungi al carrello e alla cassa
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
esportarepredefinito Applicazione;

Questo codice utilizza un approccio di rendering condizionale per visualizzare il componente PayPalCheckout o il componente Prodotto. L'hook useState inizializza una variabile di stato chiamata checkout come false, che tiene traccia dello stato corrente quando la pagina viene caricata.

Inizialmente, React esegue il rendering del componente Product, incluso il pulsante di checkout. Quando un utente fa clic sul pulsante checkout, la funzione del gestore onClick si attiva per aggiornare la variabile checkout su true. Questo aggiornamento richiede invece al componente App di eseguire il rendering del componente PayPalCheckout.

Ulteriori funzioni di pagamento PayPal

Le funzionalità di pagamento di PayPal, come One Touch e PayPal Credit, garantiscono ai tuoi clienti un processo di pagamento semplificato, sicuro, affidabile e conveniente.

Sebbene tu possa creare il tuo servizio di elaborazione dei pagamenti da zero, l'utilizzo di una piattaforma di pagamento come PayPal è preferibilmente un'alternativa più flessibile ed efficiente. In sostanza, con una soluzione di pagamento in atto, non è necessario preoccuparsi di gestire l'infrastruttura necessaria per configurare un servizio di pagamento personalizzato.