A PayPal Checkout integrálása egy React alkalmazásba

Az e-kereskedelmi területen a digitális fizetési megoldások hozzájárultak a bevételek jelentős növekedéséhez és a vállalkozások általános növekedéséhez a határokon átnyúló fizetések egyszerű lehetővé tételével és feldolgozásával.

A PayPal egyszerű és rugalmas digitális fizetési megoldást kínál az online tranzakciók kezelésére. A PayPal webalkalmazásaiba történő beépítésével biztosíthatja, hogy ügyfelei zökkenőmentes és biztonságos fizetési élményhez jussanak, ami viszont megnövekedett értékesítéshez és általános márkabizalomhoz vezethet.

Olvasson tovább, hogy megtudja, hogyan integrálhatja a PayPal-t React alkalmazásaiba.

Hozzon létre egy PayPal Sandbox fiókot

A PayPal Sandbox a PayPal által biztosított tesztelési környezet, így tesztelheti a fizetési integrációkat az alkalmazásain belül. Szimulált környezetet kínál, amely magában foglalja a PayPal élő termelési környezetében található összes fizetési funkciót.

Egyszerűen a sandbox platformot biztosít a fizetési integrációk teszteléséhez valódi pénz nélkül.

A sandbox fiók használatával hozzáférhet egy virtuális PayPal számlához tesztpénzekkel, amely lehetővé teszi a különböző típusú tranzakciók és fizetési integrációk szimulálását.

Sandbox-fiók létrehozásához lépjen a következőre: PayPal fejlesztői konzol és jelentkezzen be PayPal-fiókja hitelesítő adataival. Ezután a fejlesztői irányítópulton kattintson a gombra Sandbox fiókok gomb.

A React alkalmazásból történő PayPal-tranzakció feldolgozásához két sandbox-fiókra van szüksége: egy üzleti és egy személyes fiókra. Ez a két fiók segít egy teljes tranzakció szimulációjában – mind az ügyfél, mind a kereskedő (üzleti) szemszögéből.

Fontos, hogy mindkét szempontból tesztelje a fizetési integráció funkcionalitását az alkalmazáson.

Kattintson a Fiók létrehozása gombot a két fiók beállításához.

A fiókbeállítások oldalon hozzon létre egyet az egyes fióktípusok közül: személyes, majd üzleti fiók. A bejelentkezéshez a személyes fiók hitelesítő adatait fogja használni A PayPal homokozója személyes fiók. Másrészt az üzleti fiókhoz tartozó hitelesítési adatok segítségével hozzon létre egy projektet a fejlesztői konzolon a PayPal ügyfél-azonosítójának beszerzéséhez.

Alternatív megoldásként új fiókok létrehozása helyett használhatja a PayPal által biztosított alapértelmezett sandbox fiókokat a fizetési integrációk tesztelésére.

Hozzon létre egy PayPal projektet

A fejlesztői irányítópult oldalán kattintson a Alkalmazások és hitelesítő adatok gombra, és kattintson Alkalmazás létrehozása gombot a PayPal projekt beállításához. Ezután írja be az alkalmazás nevét, és válassza ki Kereskedő fióktípusként, és válassza ki az eredetileg létrehozott üzleti fiók hitelesítő adatait.

Végül másolja ki az alkalmazás ügyfélazonosítóját.

Állítsa be a React klienst

Hozzon létre egy React alkalmazást, nyissa meg a public/index.html fájlt, és adja hozzá ügyfél-azonosítóját az alábbi formátumban, a fejelem részben.

<forgatókönyvsrc=" https://www.paypal.com/sdk/js? kliens-azonosító=ügyfél-azonosító&currency=USD">forgatókönyv>

A szkriptcímke betölti a PayPal JavaScript SDK-t, egy olyan könyvtárat, amely ügyféloldali funkciókat biztosít a PayPal API-jával való interakcióhoz, és elérhetővé teszi azt a React összetevőiben.

Az SDK funkcióival létrehozhat egy PayPal fizetési gombot, amely kezeli a fizetési folyamatot, amely magában foglalja a fizetési adatok PayPal részére történő elküldését, a fizetés engedélyezését és a fizetés kezelését válasz.

Hozzon létre egy termékkomponenst

A /src könyvtárban hozzon létre egy új összetevő mappát, és adjon hozzá két fájlt: Product.js és PayPalCheckout.js.

Nyissa meg a Product.js fájlt, és adja hozzá az alábbi kódot:

import React, { useState } tól től"reagál";
import"./product.style.css";
import"../assests/laptop.jpg";
funkcióApp() {
Visszatérés (
"Termék-tartály">
"Terméktartalom">
"termék"> 
igényelnek("../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
 consequuntur.
 </p>

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


exportalapértelmezett App;

Ez a kód egy egyszerű termékkomponenst jelenít meg.

Hozza létre a PayPal Checkout komponenst

Adja hozzá a következő kódot a PayPalCheckout.js fájlhoz:

import React, { useRef, useEffect, useState } tól től"reagál";
import Fizetési hiba tól től"./PaymentFailure";
import Sikeres fizetés tól től"./PaymentSuccess";
funkcióPayPalCheckout() {
const paypal = useRef();
const [transactionStatus, setTransactionStatus] = useState(nulla);
 useEffect(() => {
ablak.paypal
 .Buttons({
 CreateOrder: (adatok, műveletek, hiba) => {
Visszatérés action.order.create({
 elszánt: "ELFOG",
 vásárlási egységek: [
 {
 leírás: "MacBook laptop",
 összeg: {
 pénznem kód: "USADOLLÁR",
 érték: 350.00,
 },
 },
 ],
 });
 },
 onApprove: async (adatok, műveletek) => {
const sorrend = várja action.order.capture();
konzol.log("siker", rendelés);
 setTransactionStatus("siker");
 },
 onError: (téved) => {
konzol.log (hiba);
 setTransactionStatus("kudarc");
 },
 })
 .render (paypal.current);
 }, []);
ha (tranzakcióStatus "siker") {
Visszatérés<Sikeres fizetés />;
 }
ha (tranzakcióStatus "kudarc") {
Visszatérés<Fizetési hiba />;
 }
Visszatérés (



</div>
 </div>
 );
}
exportalapértelmezett PayPalCheckout;

Ez a kód hármat használ Reagálás horgok: useRef, useState és useEffect. A useRef segítségével hivatkozást hoz létre egy div elemre, amely a PayPal fizetési gombjának tárolójaként fog működni.

A useEffect segítségével létrehoz egy PayPal gombot a paypal. Gombok függvényt, majd megjeleníti azt a gombot a div elemben, amelyre hivatkozik paypal.current módszerrel.

A paypal. Gombok A függvény több tulajdonsággal rendelkező objektumot vesz fel:

• createOrder: Ez a függvény egy objektumot ad vissza, amely tartalmazza a felhasználó által létrehozott rendelés részleteit. A megrendelés részletei tartalmazzák a termék vagy szolgáltatás konkrét adatait, például az összeget, a termék nevét, a leírást és a pénznemet.
• onApprove: Ez a funkció a fizetés jóváhagyásakor fut. Rögzíti a fizetést, és naplózza a sikerüzenetet a konzolon. Azt is beállítja a tranzakcióStatus állam, hogy siker.
• onError: Ez a funkció akkor fut le, ha a fizetés hibát észlel. A hibaüzenetet naplózza a konzolon, és beállítja a tranzakcióStatus állam, hogy kudarc.

Végül az összetevő feltételesen megjeleníti vagy a Sikeres fizetés vagy Fizetési hiba komponens értékétől függően a tranzakcióStatus állapot.

Ez a két összetevő csak egy sikeres vagy egy sikertelen tranzakció után jelenik meg. Lépjen tovább, és hozzon létre két fájlt: PaymentSuccess.js és PaymentFailure.js az összetevők mappában, és adjon hozzá egy funkcionális összetevőt egy bekezdéselemmel, amely megjeleníti a tranzakció állapotát.

Frissítse az App.js komponenst

Nyissa meg az src/App.js fájlt, és adja hozzá az alábbi kódot:

import React, { useState } tól től"reagál";
import Termék tól től"./components/Product";
import PayPalCheckout tól től"./components/PayPalCheckout";
import"./App.css";
funkcióApp() {
const [checkout, setCheckOut] = useState(hamis);
Visszatérés (

"Alkalmazás">
"Alkalmazás fejléc">
 {kijelentkezés? (

 ): (
"Termék">
 osztálynév="pénztár"
 onClick={() => {
 setCheckOut(igaz);
 }}
 >
 Kosárba helyezés és fizetés
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
exportalapértelmezett App;

Ez a kód feltételes megjelenítési megközelítést használ a PayPalCheckout vagy a Termék összetevő megjelenítéséhez. A useState hook hamisként inicializálja a checkout nevű állapotváltozót, amely nyomon követi az aktuális állapotot az oldal betöltésekor.

A React kezdetben a Termék összetevőt jeleníti meg, beleértve a fizetés gombot is. Amikor a felhasználó rákattint a fizetés gombra, az onClick kezelő funkció aktiválja a fizetési változó igaz értékre frissítését. Ez a frissítés arra kéri az App összetevőt, hogy helyette a PayPalCheckout összetevőt jelenítse meg.

További PayPal fizetési funkciók

A PayPal fizetési funkciói, mint például a One Touch és a PayPal Credit, biztosítják, hogy ügyfelei biztonságos, megbízható és kényelmes fizetési folyamatot élvezhessenek.

Míg a semmiből felépítheti saját fizetésfeldolgozási szolgáltatását, az olyan fizetési platformok használata, mint a PayPal, lehetőleg rugalmasabb és hatékonyabb alternatíva. Lényegében egy fizetési megoldással nem kell aggódnia az egyéni fizetési szolgáltatás beállításához szükséges infrastruktúra kezelésével kapcsolatban.