Hur man integrerar PayPal Checkout i en React-applikation

Inom e-handelsområdet har digitala betalningslösningar bidragit till en betydande ökning av intäkter och övergripande tillväxt för företag genom att möjliggöra och hantera gränsöverskridande betalningar med lätthet.

PayPal erbjuder en enkel och flexibel digital betalningslösning för att hantera onlinetransaktioner. Genom att integrera PayPal i dina webbapplikationer kan du säkerställa att kunderna får tillgång till en sömlös och säker betalningsupplevelse som i sin tur kan leda till ökad försäljning och övergripande varumärkesförtroende.

Läs vidare för att lära dig hur du integrerar PayPal i dina React-applikationer.

Skapa ett PayPal Sandbox-konto

PayPal Sandbox är en testmiljö som tillhandahålls av PayPal så att du kan testa betalningsintegrationer i dina applikationer. Den erbjuder en simulerad miljö som inkluderar alla betalningsfunktioner som finns i PayPals liveproduktionsmiljö.

Sandlådan ger helt enkelt en plattform för att testa betalningsintegrationer utan att behöva pengar.

Med hjälp av sandlådekontot kan du komma åt ett virtuellt PayPal-konto med testmedel, vilket låter dig simulera olika typer av transaktioner och betalningsintegrationer.

För att skapa ett sandlådekonto, gå till PayPals utvecklarkonsol och logga in med dina PayPal-kontouppgifter. Klicka sedan på på utvecklarens instrumentpanel Sandlådekonton knapp.

För att behandla en PayPal-transaktion från din React-applikation behöver du två sandlådekonton: ett företagskonto och ett personligt konto. Dessa två konton hjälper dig att simulera en fullständig transaktion – från både en kunds och en handlares (affärs-) synvinkel.

Det är viktigt att testa betalningsintegrationens funktion i din applikation ur båda perspektiven.

Klicka på Skapa konto för att ställa in de två kontona.

På sidan med kontoinställningar skapar du ett av varje typ av konto: personligt, sedan företag. Du kommer att använda de personliga kontouppgifterna för att logga in på PayPals sandlåda personligt konto. Å andra sidan kommer du att använda autentiseringsuppgifterna för företagskontot för att skapa ett projekt på utvecklarkonsolen för att få PayPals klient-ID.

Alternativt, istället för att skapa nya konton, kan du använda standardsandlådekonton som tillhandahålls av PayPal för att testa betalningsintegreringarna.

Skapa ett PayPal-projekt

På sidan för utvecklarinstrumentpanelen klickar du på Appar och användaruppgifter knappen och klicka Skapa app för att skapa ett PayPal-projekt. Fyll sedan i namnet på din ansökan, välj Handlare som kontotyp och välj autentiseringsuppgifterna för det företagskonto du först skapade.

Slutligen kopierar du appens klient-ID.

Konfigurera React Client

Skapa en React-applikation, öppna public/index.html fil och lägg till ditt klient-ID i formatet som visas nedan i rubrikelementsektionen.

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

Skriptaggen laddar PayPal JavaScript SDK, ett bibliotek som tillhandahåller klientsidans funktionalitet för att interagera med PayPals API, och gör den tillgänglig för användning i React-komponenterna.

Med hjälp av SDK: s funktioner kan du skapa en PayPal-betalningsknapp som hanterar betalningsflödet som innebär att skicka betalningsuppgifter till PayPal, auktorisera betalningen och hantera betalningen svar.

Skapa en produktkomponent

Skapa en ny komponentmapp i katalogen /src och lägg till två filer: Product.js och PayPalCheckout.js.

Öppna filen Product.js och lägg till koden nedan:

importera Reagera, { useState } från"reagera";
importera"./product.style.css";
importera"../assests/laptop.jpg";
fungeraApp() {
lämna tillbaka (
"Produkt-container">
"Produktinnehåll">
"produkt"> 
behöva("../assests/laptop.jpg")} alt="bärbar dator" />
 </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>
 );
}


exporterastandard App;

Denna kod återger en enkel produktkomponent.

Skapa PayPal Checkout-komponenten

Lägg till följande kod i filen PayPalCheckout.js:

importera Reagera, { useRef, useEffect, useState } från"reagera";
importera Betalningsfel från"./Payment Failure";
importera Betalningsframgång från"./PaymentSuccess";
fungeraPayPalCheckout() {
konst paypal = useRef();
konst [transactionStatus, setTransactionStatus] = useState(null);
 useEffect(() => {
fönster.paypal
 .Buttons({
 skapaOrder: (data, åtgärder, fel) => {
lämna tillbaka actions.order.create({
 avsikt: "FÅNGA",
 inköpsenheter: [
 {
 beskrivning: "MacBook Laptop",
 belopp: {
 Valutakod: "USD",
 värde: 350.00,
 },
 },
 ],
 });
 },
 på Godkänn: asynkron (data, åtgärder) => {
konst beställa = vänta actions.order.capture();
trösta.logga("Framgång", beställa);
 setTransactionStatus("Framgång");
 },
 onError: (fela) => {
trösta.log (fel);
 setTransactionStatus("fel");
 },
 })
 .render (paypal.current);
 }, []);
om (transaktionsstatus "Framgång") {
lämna tillbaka<Betalningsframgång />;
 }
om (transaktionsstatus "fel") {
lämna tillbaka<Betalningsfel />;
 }
lämna tillbaka (



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

Denna kod använder tre Reagera krokar: useRef, useState och useEffect. Den använder useRef för att skapa en referens till ett div-element, som kommer att fungera som en behållare för PayPal-utcheckningsknappen.

Den använder useEffect för att skapa en PayPal-knapp med paypal. Knappar funktion och renderar sedan den knappen i div-elementet som refereras av paypal.current metod.

De paypal. Knappar funktion tar ett objekt med flera egenskaper:

• createOrder: Den här funktionen returnerar ett objekt som innehåller detaljerna för den order som användaren har skapat. Beställningsinformationen kommer att inkludera specifika detaljer för produkten eller tjänsten såsom belopp, produktnamn, beskrivning och valuta.
• onApprove: Denna funktion körs när betalningen är godkänd. Den fångar betalningen och loggar framgångsmeddelandet till konsolen. Den ställer också in transaktionsstatus ange till Framgång.
• onError: Denna funktion körs när betalningen stöter på ett fel. Den loggar felmeddelandet till konsolen och ställer in transaktionsstatus ange till fel.

Slutligen återger komponenten villkorligt antingen Betalningsframgång eller Betalningsfel komponent beroende på värdet av transaktionsstatus stat.

Dessa två komponenter återges endast efter antingen en lyckad transaktion eller en misslyckad. Fortsätt och skapa två filer: PaymentSuccess.js och PaymentFailure.js i komponentmappen och lägg till en funktionell komponent med ett styckeelement som återger transaktionens status.

Uppdatera App.js-komponenten

Öppna filen src/App.js och lägg till koden nedan:

importera Reagera, { useState } från"reagera";
importera Produkt från"./komponenter/Produkt";
importera PayPalCheckout från"./components/PayPalCheckout";
importera"./App.css";
fungeraApp() {
konst [checkout, setCheckOut] = useState(falsk);
lämna tillbaka (

"App">
"App-header">
 {kolla upp? (

 ): (
"Produkt">
 klassnamn="kolla upp"
 onClick={() => {
 setCheckOut(Sann);
 }}
 >
 Lägg i varukorg & kassan
 </button>

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

Den här koden använder en villkorlig återgivningsmetod för att visa antingen PayPalCheckout-komponenten eller produktkomponenten. useState-kroken initierar en tillståndsvariabel som kallas checkout som falsk, som håller reda på det aktuella tillståndet när sidan laddas.

Inledningsvis återger React Produktkomponenten, inklusive kassaknappen. När en användare klickar på utcheckningsknappen utlöses onClick-hanteraren för att uppdatera utcheckningsvariabeln till sant. Den här uppdateringen uppmanar appkomponenten att rendera PayPalCheckout-komponenten istället.

Ytterligare PayPal-betalningsfunktioner

PayPals betalningsfunktioner, som One Touch och PayPal Credit, säkerställer att dina kunder kan njuta av en strömlinjeformad betalningsprocess som är säker, pålitlig och bekväm.

Även om du kan bygga din egen betalningshanteringstjänst från grunden, är att använda en betalningsplattform som PayPal helst ett mer flexibelt och effektivt alternativ. I grund och botten, med en betalningslösning på plats, behöver du inte oroa dig för att hantera den infrastruktur som krävs för att skapa en anpassad betaltjänst.