Hoe PayPal Checkout te integreren in een React-applicatie

Op het gebied van e-commerce hebben digitale betalingsoplossingen bijgedragen tot een aanzienlijke stijging van de omzet en de algehele groei van bedrijven door grensoverschrijdende betalingen gemakkelijk mogelijk te maken en te verwerken.

PayPal biedt een eenvoudige en flexibele digitale betalingsoplossing voor het beheren van online transacties. Door PayPal in uw webapplicaties op te nemen, kunt u ervoor zorgen dat klanten toegang hebben tot een naadloze en veilige betalingservaring, wat op zijn beurt kan leiden tot meer verkopen en algemeen merkvertrouwen.

Lees verder om te leren hoe u PayPal kunt integreren in uw React-applicaties.

Stel een PayPal Sandbox-account in

PayPal Sandbox is een testomgeving die wordt aangeboden door PayPal, zodat u betalingsintegraties binnen uw toepassingen kunt testen. Het biedt een gesimuleerde omgeving met alle betalingsfuncties die te vinden zijn in de live productieomgeving van PayPal.

Simpel gezegd, de sandbox biedt een platform voor het testen van betalingsintegraties zonder echt geld.

Met behulp van de sandbox-account heeft u toegang tot een virtuele PayPal-rekening met testfondsen, waarmee u verschillende soorten transacties en betalingsintegraties kunt simuleren.

Ga naar om een ​​sandbox-account aan te maken PayPal-ontwikkelaarsconsole en meld u aan met uw PayPal-accountreferenties. Klik vervolgens op het ontwikkelaarsdashboard op de Sandbox-accounts knop.

Om een ​​PayPal-transactie vanuit uw React-applicatie te verwerken, heeft u twee sandbox-accounts nodig: een zakelijk account en een persoonlijk account. Met deze twee accounts kunt u een volledige transactie simuleren, zowel vanuit het oogpunt van een klant als vanuit het (zakelijke) perspectief van een handelaar.

Het is belangrijk om de functionaliteit van de betalingsintegratie op uw applicatie vanuit beide perspectieven te testen.

Klik op de Account aanmaken knop om de twee accounts in te stellen.

Maak op de pagina met accountinstellingen een van elk type account: persoonlijk en vervolgens zakelijk. U gebruikt de persoonlijke accountreferenties om u aan te melden De sandbox van PayPal persoonlijk account. Aan de andere kant gebruikt u de inloggegevens voor het zakelijke account om een ​​project op de ontwikkelaarsconsole te maken om de klant-ID van PayPal te verkrijgen.

Als alternatief kunt u, in plaats van nieuwe accounts aan te maken, de standaard sandbox-accounts van PayPal gebruiken om de betalingsintegraties te testen.

Maak een PayPal-project aan

Klik op de ontwikkelaarsdashboardpagina op de Apps en inloggegevens knop en klik App maken knop om een ​​PayPal-project op te zetten. Vul vervolgens de naam van uw applicatie in, kies Handelaar als het accounttype en selecteer de inloggegevens voor het zakelijke account dat u aanvankelijk hebt gemaakt.

Kopieer ten slotte de client-ID van de app.

Stel de React-client in

Maak een React-applicatie, open de publiek/index.html bestand en voeg uw klant-ID toe in de indeling die hieronder wordt weergegeven in het hoofdelementgedeelte.

<scriptsrc=" https://www.paypal.com/sdk/js? client-id=uw-client-ID&currency=USD">script>

De scripttag laadt de PayPal JavaScript SDK, een bibliotheek die functionaliteit aan de clientzijde biedt voor interactie met de PayPal-API, en maakt deze beschikbaar voor gebruik in de React-componenten.

Met behulp van de functies van de SDK kunt u een PayPal-betaalknop maken die de betalingsstroom afhandelt omvat het verzenden van betalingsgegevens naar PayPal, het autoriseren van de betaling en het afhandelen van de betaling antwoord.

Maak een productcomponent

Maak in de map /src een nieuwe map met componenten en voeg twee bestanden toe: Product.js en PayPalCheckout.js.

Open het bestand Product.js en voeg de onderstaande code toe:

importeren Reageer, { useState } van"Reageer";
importeren"./product.style.css";
importeren"../assets/laptop.jpg";
functieapp() {
opbrengst (
"Productcontainer">
"Product-inhoud">
"Product"> 
vereisen("../assets/laptop.jpg")} alt="laptop" />
 </div>
"omschrijven">
 MacBook Pro</h2>



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

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


exporterenstandaard App;

Deze code geeft een eenvoudige productcomponent weer.

Maak de PayPal Checkout-component

Voeg de volgende code toe aan het bestand PayPalCheckout.js:

importeren Reageren, { useRef, useEffect, useState } van"Reageer";
importeren Betalingsfout van"./Betalingsfout";
importeren Betaling gelukt van"./Betaling gelukt";
functiePayPalAfrekenen() {
const paypal = gebruikRef();
const [transactionStatus, setTransactionStatus] = useState(nul);
 gebruikEffect(() => {
raam.paypal
 .Toetsen({
 maakBestelling: (gegevens, acties, err) => {
opbrengst acties.volgorde.creëren({
 opzet: "VASTLEGGING",
 aankoopeenheden: [
 {
 beschrijving: "MacBook-laptop",
 hoeveelheid: {
 valuta code: "AMERIKAANSE DOLLAR",
 waarde: 350.00,
 },
 },
 ],
 });
 },
 opGoedkeuren: asynchroon (gegevens, acties) => {
const bestelling = wachten acties.order.capture();
troosten.log("succes", volgorde);
 setTransactionStatus("succes");
 },
 onFout: (fout) => {
troosten.log (fout);
 setTransactionStatus("mislukking");
 },
 })
 .render (paypal.stroom);
 }, []);
als (transactieStatus "succes") {
opbrengst<Betaling gelukt />;
 }
als (transactieStatus "mislukking") {
opbrengst<Betalingsfout />;
 }
opbrengst (



</div>
 </div>
 );
}
exporterenstandaard PayPalAfrekenen;

Deze code gebruikt er drie Reageer haken: useRef, useState en useEffect. Het gebruikt useRef om een ​​verwijzing naar een div-element te maken, dat zal fungeren als een container voor de PayPal-betaalknop.

Het gebruikt useEffect om een ​​PayPal-knop te maken met de PayPal. Toetsen function, en geeft die knop vervolgens weer in het div-element waarnaar wordt verwezen door paypal.current-methode.

De PayPal. Toetsen functie neemt een object met verschillende eigenschappen:

• createOrder: Deze functie retourneert een object met de details van de bestelling die de gebruiker heeft gemaakt. De bestelgegevens bevatten de specifieke details van het product of de dienst, zoals het bedrag, de productnaam, de beschrijving en de valuta.
• onApprove: Deze functie wordt uitgevoerd wanneer de betaling is goedgekeurd. Het legt de betaling vast en logt het succesbericht naar de console. Het stelt ook de transactieStatus staat aan succes.
• onError: Deze functie wordt uitgevoerd wanneer de betaling een fout tegenkomt. Het logt het foutbericht naar de console en stelt de transactieStatus staat aan mislukking.

Ten slotte geeft de component voorwaardelijk ofwel de Betaling gelukt of Betalingsfout component afhankelijk van de waarde van de transactieStatus staat.

Deze twee componenten worden alleen weergegeven na een succesvolle transactie of een mislukte transactie. Ga je gang en maak twee bestanden aan: PaymentSuccess.js En PaymentFailure.js in de map Components en voeg een functionele component toe met een alinea-element dat de status van de transactie weergeeft.

Werk de App.js-component bij

Open het bestand src/App.js en voeg de onderstaande code toe:

importeren Reageer, { useState } van"Reageer";
importeren Product van"./componenten/Product";
importeren PayPalAfrekenen van"./componenten/PayPalCheckout";
importeren"./App.css";
functieapp() {
const [afrekenen, setCheckOut] = useState(vals);
opbrengst (

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

 ): (
"Product">
 classNaam="uitchecken"
 onClick={() => {
 setCheckOut(WAAR);
 }}
 >
 Toevoegen aan winkelwagen & afrekenen
 </button>

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

Deze code gebruikt een voorwaardelijke weergavebenadering om de component PayPalCheckout of de component Product weer te geven. De useState-hook initialiseert een statusvariabele genaamd checkout als false, die de huidige status bijhoudt wanneer de pagina wordt geladen.

In eerste instantie geeft React de productcomponent weer, inclusief de afrekenknop. Wanneer een gebruiker op de afrekenknop klikt, wordt de onClick-handlerfunctie geactiveerd om de afrekenvariabele bij te werken naar waar. Deze update vraagt ​​de App-component om in plaats daarvan de PayPalCheckout-component weer te geven.

Aanvullende PayPal-betalingsfuncties

De betalingsfuncties van PayPal, zoals One Touch en PayPal Credit, zorgen ervoor dat uw klanten kunnen genieten van een gestroomlijnd betalingsproces dat veilig, betrouwbaar en gemakkelijk is.

Hoewel u uw eigen betalingsverwerkingsservice vanaf nul kunt bouwen, is het gebruik van een betalingsplatform zoals PayPal bij voorkeur een flexibeler en efficiënter alternatief. Met een betalingsoplossing hoeft u zich in wezen geen zorgen te maken over het beheer van de infrastructuur die nodig is om een ​​aangepaste betalingsdienst op te zetten.