Hvordan integrere PayPal Checkout i en React-applikasjon

I e-handelsområdet har digitale betalingsløsninger bidratt til en betydelig økning i inntekter og generell vekst for virksomheter ved å muliggjøre og behandle grenseoverskridende betalinger med letthet.

PayPal tilbyr en enkel og fleksibel digital betalingsløsning for å administrere nettbaserte transaksjoner. Ved å inkorporere PayPal i nettapplikasjonene dine kan du sikre kundene tilgang til en sømløs og sikker betalingsopplevelse som igjen kan føre til økt salg og generell merkevaretillit.

Les videre for å lære hvordan du integrerer PayPal i React-applikasjonene dine.

Sett opp en PayPal Sandbox-konto

PayPal Sandbox er et testmiljø levert av PayPal slik at du kan teste betalingsintegrasjoner i applikasjonene dine. Den tilbyr et simulert miljø som inkluderer alle betalingsfunksjonene som finnes i PayPals live-produksjonsmiljø.

Ganske enkelt gir sandkassen en plattform for å teste betalingsintegrasjoner uten behov for ekte penger.

Ved å bruke sandkassekontoen kan du få tilgang til en virtuell PayPal-konto med testmidler, som lar deg simulere ulike typer transaksjoner og betalingsintegrasjoner.

For å opprette en sandkassekonto, gå over til PayPal utviklerkonsoll og logg på med PayPal-kontolegitimasjonen din. Deretter klikker du på utviklerdashbordet Sandbox-kontoer knapp.

For å behandle en PayPal-transaksjon fra React-applikasjonen din trenger du to sandkassekontoer: en bedriftskonto og en personlig konto. Disse to kontoene vil hjelpe deg å simulere en fullstendig transaksjon – både fra en kundes syn og en selgers (forretnings) syn.

Det er viktig å teste funksjonaliteten til betalingsintegrasjonen på applikasjonen din fra begge perspektiver.

Klikk på Opprett konto for å sette opp de to kontoene.

På siden med kontoinnstillinger oppretter du en av hver type konto: personlig, deretter bedrift. Du vil bruke den personlige kontolegitimasjonen for å logge på PayPals sandkasse personlig konto. På den annen side vil du bruke legitimasjonen for bedriftskontoen til å opprette et prosjekt på utviklerkonsollen for å få PayPals klient-ID.

Alternativt, i stedet for å opprette nye kontoer, kan du bruke standard sandkassekontoer levert av PayPal for å teste betalingsintegrasjonene.

Opprett et PayPal-prosjekt

På utvikleroversiktssiden klikker du på Apper og legitimasjon knappen og klikk Lag app for å sette opp et PayPal-prosjekt. Deretter fyller du inn navnet på søknaden din, velg Kjøpmann som kontotype, og velg legitimasjonen for bedriftskontoen du opprinnelig opprettet.

Til slutt kopierer du appens klient-ID.

Sett opp React Client

Opprett en React-applikasjon, åpne public/index.html fil, og legg til klient-ID-en din i formatet vist nedenfor i hodeelement-delen.

<manussrc=" https://www.paypal.com/sdk/js? client-id=din-klient-ID&currency=USD">manus>

Skript-taggen laster PayPal JavaScript SDK, et bibliotek som gir klientsidefunksjonalitet for samhandling med PayPals API, og gjør den tilgjengelig for bruk i React-komponentene.

Ved å bruke SDK sine funksjoner kan du lage en PayPal betalingsknapp som håndterer betalingsflyten som innebærer å sende betalingsdetaljer til PayPal, autorisere betalingen og håndtere betalingen respons.

Lag en produktkomponent

I /src-katalogen, opprett en ny komponentmappe, og legg til to filer: Product.js og PayPalCheckout.js.

Åpne Product.js-filen og legg til koden nedenfor:

import Reager, { useState } fra"reagere";
import"./product.style.css";
import"../assests/laptop.jpg";
funksjonApp() {
komme tilbake (
"Produktbeholder">
"Produktinnhold">
"produkt"> 
krever("../assests/laptop.jpg")} alt="laptop" />
 </div>
"desc">
 MacBook Pro</h2>



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

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


eksportmisligholde App;

Denne koden gjengir en enkel produktkomponent.

Opprett PayPal Checkout-komponenten

Legg til følgende kode i PayPalCheckout.js-filen:

import Reager, { useRef, useEffect, useState } fra"reagere";
import Betalingsfeil fra"./Payment Failure";
import Betalingssuksess fra"./PaymentSuccess";
funksjonPayPalCheckout() {
konst paypal = useRef();
konst [transactionStatus, setTransactionStatus] = useState(null);
 useEffect(() => {
vindu.paypal
 .Buttons({
 oppretteOrdre: (data, handlinger, feil) => {
komme tilbake actions.order.create({
 hensikt: "FANG",
 kjøpsenheter: [
 {
 beskrivelse: "MacBook bærbar",
 beløp: {
 valutakode: "USD",
 verdi: 350.00,
 },
 },
 ],
 });
 },
 på godkjenning: asynkron (data, handlinger) => {
konst rekkefølge = avvente actions.order.capture();
konsoll.Logg("suksess", rekkefølge);
 setTransactionStatus("suksess");
 },
 onError: (feil) => {
konsoll.log (feil);
 setTransactionStatus("fiasko");
 },
 })
 .render (paypal.current);
 }, []);
hvis (transaksjonsstatus "suksess") {
komme tilbake<Betalingssuksess />;
 }
hvis (transaksjonsstatus "fiasko") {
komme tilbake<Betalingsfeil />;
 }
komme tilbake (



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

Denne koden bruker tre Reager kroker: useRef, useState og useEffect. Den bruker useRef for å lage en referanse til et div-element, som vil fungere som en beholder for PayPal-kasseknappen.

Den bruker useEffect til å lage en PayPal-knapp med paypal. Knapper funksjon, og gjengir deretter knappen i div-elementet det refereres til av paypal.current metode.

De paypal. Knapper funksjon tar et objekt med flere egenskaper:

• createOrder: Denne funksjonen returnerer et objekt som inneholder detaljene for ordren som brukeren har opprettet. Bestillingsdetaljene vil inkludere de spesifikke detaljene for produktet eller tjenesten som beløp, produktnavn, beskrivelse og valuta.
• onApprove: Denne funksjonen kjører når betalingen er godkjent. Den fanger opp betalingen og logger suksessmeldingen til konsollen. Det setter også transaksjonsstatus stat til suksess.
• onError: Denne funksjonen kjører når betalingen støter på en feil. Den logger feilmeldingen til konsollen og stiller inn transaksjonsstatus stat til feil.

Til slutt gjengir komponenten betinget enten Betalingssuksess eller Betalingsfeil komponent avhengig av verdien av transaksjonsstatus stat.

Disse to komponentene vil bare gjengis etter enten en vellykket transaksjon eller en mislykket. Fortsett og lag to filer: PaymentSuccess.js og PaymentFailure.js i komponenter-mappen og legg til en funksjonell komponent med et avsnittselement som gjengir statusen til transaksjonen.

Oppdater App.js-komponenten

Åpne src/App.js-filen og legg til koden nedenfor:

import Reager, { useState } fra"reagere";
import Produkt fra"./komponenter/Produkt";
import PayPalCheckout fra"./components/PayPalCheckout";
import"./App.css";
funksjonApp() {
konst [checkout, setCheckOut] = useState(falsk);
komme tilbake (

"App">
"App-header">
 {Sjekk ut? (

 ): (
"Produkt">
 klassenavn="Sjekk ut"
 onClick={() => {
 settCheckOut(ekte);
 }}
 >
 Legg i handlekurven og kassen
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
eksportmisligholde App;

Denne koden bruker en betinget gjengivelsesmetode for å vise enten PayPalCheckout-komponenten eller produktkomponenten. useState-kroken initialiserer en tilstandsvariabel kalt checkout som falsk, som holder styr på gjeldende tilstand når siden lastes.

Til å begynne med gjengir React Produktkomponenten, inkludert utsjekkingsknappen. Når en bruker klikker på utsjekkingsknappen, utløses onClick-behandlingsfunksjonen for å oppdatere utsjekkingsvariabelen til sann. Denne oppdateringen ber app-komponenten om å gjengi PayPalCheckout-komponenten i stedet.

Ytterligere PayPal-betalingsfunksjoner

PayPals betalingsfunksjoner, som One Touch og PayPal Credit, sikrer at kundene dine kan nyte en strømlinjeformet betalingsprosess som er sikker, pålitelig og praktisk.

Mens du kan bygge din egen betalingsbehandlingstjeneste fra bunnen av, er bruk av en betalingsplattform som PayPal fortrinnsvis et mer fleksibelt og effektivt alternativ. I hovedsak, med en betalingsløsning på plass, trenger du ikke å bekymre deg for å administrere infrastrukturen som kreves for å sette opp en tilpasset betalingstjeneste.