Fra start til slut fører denne vejledning dig gennem trinene for at få PayPal-betalinger op at køre.

Inden for e-handelsområdet har digitale betalingsløsninger bidraget til en betydelig stigning i omsætningen og den samlede vækst for virksomheder ved at muliggøre og behandle grænseoverskridende betalinger med lethed.

PayPal tilbyder en enkel og fleksibel digital betalingsløsning til styring af onlinetransaktioner. Ved at inkorporere PayPal i dine webapplikationer kan du sikre kunderne adgang til en problemfri og sikker betalingsoplevelse, som igen kan føre til øget salg og overordnet brandtillid.

Læs videre for at lære, hvordan du integrerer PayPal i dine React-applikationer.

Opret en PayPal Sandbox-konto

PayPal Sandbox er et testmiljø leveret af PayPal, så du kan teste betalingsintegrationer i dine applikationer. Det tilbyder et simuleret miljø, der inkluderer alle betalingsfunktioner, der findes i PayPals live-produktionsmiljø.

Simpelthen giver sandkassen en platform til at teste betalingsintegrationer uden behov for rigtige penge.

instagram viewer

Ved at bruge sandkassekontoen kan du få adgang til en virtuel PayPal-konto med testmidler, som giver dig mulighed for at simulere forskellige typer transaktioner og betalingsintegrationer.

Gå over til for at oprette en sandbox-konto PayPal Developer Console og log ind med dine PayPal-kontooplysninger. Dernæst skal du på udviklerens dashboard klikke på Sandkassekonti knap.

For at behandle en PayPal-transaktion fra din React-applikation skal du bruge to sandbox-konti: en virksomhedskonto og en personlig konto. Disse to konti vil hjælpe dig med at simulere en komplet transaktion – fra både en kundes og en sælgers (forretnings-) visning.

Det er vigtigt at teste funktionaliteten af ​​betalingsintegrationen på din applikation fra begge perspektiver.

Klik på Opret konto knappen for at oprette de to konti.

På siden med kontoindstillinger skal du oprette en af ​​hver type konto: personlig og derefter virksomhed. Du skal bruge de personlige kontooplysninger til at logge ind på PayPals sandkasse personlig konto. På den anden side vil du bruge legitimationsoplysningerne til virksomhedskontoen til at oprette et projekt på udviklerkonsollen for at få PayPals klient-id.

Alternativt, i stedet for at oprette nye konti, kan du bruge standardsandbox-konti fra PayPal til at teste betalingsintegrationerne.

Opret et PayPal-projekt

På siden for udviklerkontrolpanelet skal du klikke på Apps og legitimationsoplysninger knappen og klik Opret app knappen for at oprette et PayPal-projekt. Udfyld derefter navnet på din ansøgning, vælg Købmand som kontotype, og vælg legitimationsoplysningerne for den virksomhedskonto, du oprindeligt oprettede.

Til sidst kopierer du appens klient-id.

Konfigurer React Client

Opret en React-applikation, åbn public/index.html fil, og tilføj dit klient-id i formatet vist nedenfor i hovedelementsektionen.

<manuskriptsrc=" https://www.paypal.com/sdk/js? client-id=dit-klient-id&currency=USD">manuskript>

Script-tagget indlæser PayPal JavaScript SDK, et bibliotek, der giver klientsidefunktionalitet til interaktion med PayPals API, og gør det tilgængeligt til brug i React-komponenterne.

Ved hjælp af SDK's funktioner kan du oprette en PayPal betalingsknap, der håndterer betalingsflowet, som involverer at sende betalingsoplysninger til PayPal, godkende betalingen og håndtere betalingen respons.

Du kan finde dette projekts kode i dens GitHub-depot.

Opret en produktkomponent

I mappen /src skal du oprette en ny komponentmappe og tilføje to filer: Product.js og PayPalCheckout.js.

Åbn filen Product.js, og tilføj koden nedenfor:

importere Reager, { useState } fra"reagere";
importere"./product.style.css";
importere"../assests/laptop.jpg";
fungereApp() {
Vend tilbage (
"Produkt-container">
"Produktindhold">
"produkt"> 
kræve("../assests/laptop.jpg")} alt="bærbar" />
 </div>
"desc">
 MacBook Pro</h2>





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


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






eksportStandard App;

Denne kode gengiver en simpel produktkomponent.

Opret PayPal Checkout-komponenten

Tilføj følgende kode til filen PayPalCheckout.js:

importere Reager, { useRef, useEffect, useState } fra"reagere";
importere Betalingsfejl fra"./Payment Failure";
importere Betalingssucces fra"./PaymentSuccess";
fungerePayPalCheckout() {
konst paypal = useRef();
konst [transactionStatus, setTransactionStatus] = useState(nul);


 useEffect(() => {
vindue.paypal
 .Buttons({
 oprette ordre: (data, handlinger, fejl) => {
Vend tilbage actions.order.create({
 hensigt: "FANGE",
 købsenheder: [
 {
 beskrivelse: "MacBook bærbar",
 beløb: {
 valuta_kode: "USD",
 værdi: 350.00,
 },
 },
 ],
 });
 },
 ved godkend: asynkron (data, handlinger) => {
konst ordre = vente actions.order.capture();


konsol.log("succes", ordre);
 sætTransaktionsstatus("succes");
 },
 onFejl: (fejl) => {
konsol.log (fejl);
 sætTransaktionsstatus("fiasko");
 },
 })
 .render (paypal.current);
 }, []);


hvis (transaktionsstatus "succes") {
Vend tilbage<Betalingssucces />;
 }


hvis (transaktionsstatus "fiasko") {
Vend tilbage<Betalingsfejl />;
 }


Vend tilbage (




</div>
 </div>
 );
}


eksportStandard PayPalCheckout;

Denne kode bruger tre Reager kroge: useRef, useState og useEffect. Den bruger useRef til at oprette en reference til et div-element, som vil fungere som en beholder for PayPal-kasseknappen.

Den bruger useEffect til at oprette en PayPal-knap med paypal. Knapper funktion, og gengiver derefter denne knap i div-elementet, der refereres til af paypal.current metode.

Det paypal. Knapper funktion tager et objekt med flere egenskaber:

  • createOrder: Denne funktion returnerer et objekt, der indeholder detaljerne for den ordre, som brugeren har oprettet. Ordreoplysningerne vil omfatte de specifikke detaljer om produktet eller tjenesten, såsom beløb, produktnavn, beskrivelse og valuta.
  • onApprove: Denne funktion kører, når betalingen er godkendt. Det fanger betalingen og logger succesmeddelelsen til konsollen. Det sætter også transaktionsstatus stat til succes.
  • onError: Denne funktion kører, når betalingen støder på en fejl. Det logger fejlmeddelelsen til konsollen og indstiller transaktionsstatus stat til fiasko.

Endelig gengiver komponenten betinget enten Betalingssucces eller Betalingsfejl komponent afhængig af værdien af transaktionsstatus stat.

Disse to komponenter gengives kun efter enten en vellykket transaktion eller en mislykket. Gå videre og opret to filer: PaymentSuccess.js og PaymentFailure.js i mappen komponenter og tilføje en funktionel komponent med et afsnitselement, der gengiver status for transaktionen.

Opdater App.js-komponenten

Åbn filen src/App.js og tilføj koden nedenfor:

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


Vend tilbage (


"App">
"App-header">
 {checkout? (

 ): (
"Produkt">
 klassenavn="kasse"
 onClick={() => {
 setCheckOut(rigtigt);
 }}
 >
 Læg i kurv og kassen
 </button>

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


eksportStandard App;

Denne kode bruger en betinget gengivelsestilgang til at vise enten PayPalCheckout-komponenten eller produktkomponenten. useState hook initialiserer en tilstandsvariabel kaldet checkout som falsk, som holder styr på den aktuelle tilstand, når siden indlæses.

I første omgang gengiver React Produktkomponenten, inklusive checkout-knappen. Når en bruger klikker på checkout-knappen, udløser onClick-håndteringsfunktionen for at opdatere checkout-variablen til sand. Denne opdatering beder app-komponenten om at gengive PayPalCheckout-komponenten i stedet.

Yderligere PayPal-betalingsfunktioner

PayPals betalingsfunktioner, såsom One Touch og PayPal Credit, sikrer, at dine kunder kan nyde en strømlinet betalingsproces, der er sikker, pålidelig og bekvem.

Selvom du kan bygge din egen betalingsbehandlingstjeneste fra bunden, er brugen af ​​en betalingsplatform som PayPal helst et mere fleksibelt og effektivt alternativ. Med en betalingsløsning på plads behøver du i det væsentlige ikke at bekymre dig om at administrere den infrastruktur, der kræves for at konfigurere en tilpasset betalingstjeneste.