Integrace PayPal v Reactu

Jako vývojáři máme často tendenci vytvářet služby, které mohou vyžadovat, abychom dostali platby od zákazníků. Nejlepším příkladem může být web elektronického obchodu. Za tímto účelem potřebujeme do naší aplikace integrovat spolehlivou platební bránu. Takže v tomto příspěvku budu psát o tom, jak byste mohli integrovat PayPal Checkout do vaší aplikace React a získat nějaké peníze 💰💰.

Tak jdeme na to...
A ano, než začneme, rád bych vám doporučil kódovat, protože je potřeba dodržet poměrně dost kroků a některé mohou být trochu složité.
Takže v případě, že se rozhodnete řídit se mými radami, existuje několik odkazů, které by měly být otevřeny ve vašem prohlížeči, abyste je mohli sledovat.

  • PayPal Developer Dashboard
  • PayPal Sandbox Dashboard

Vytvoření aplikace React

Protože se jedná o integraci aplikace React, budete ji potřebovat k nastavení platební brány. Chcete-li vytvořit aplikaci pro reakci, jednoduše napište příkaz

npx create-react-app paypal

ve vašem terminálu a vytvoří pro vás aplikaci pro reakci s názvem „paypal“.

Nyní příkazem cd paypal zadejte adresář aplikace a spusťte příkaz npm start ke spuštění vývojového serveru na vašem počítači hostujícího vaši nově vytvořenou aplikaci na localhost:3000 .
V okně prohlížeče byste měli vidět následující.

Nyní provedu několik změn v souborech

  • /src/App.js
  • /src/App.css

získat uživatelské rozhraní pro volání platební brány. Poté bude aplikace vypadat

Kód najdete v mém úložišti GitHub.
A máme hotovo se základním nastavením. Je čas začít prozkoumávat řídicí panel PayPal.

Vytváření účtů PayPal Sandbox

Nyní přejděte na PayPal Developer Dashboard, vytvořte si účet PayPal a přihlaste se pomocí něj. Ve výchozím nastavení budete přesměrováni na Moje aplikace a přihlašovací údaje v režimu Sandbox.

Nyní vytvoříme dva účty izolovaného prostoru pro účely testování a napodobování živých transakcí v části Účty kartu v části Sandbox. V sekci Účty izolovaného prostoru najdete dva standardně vygenerované účty sandboxu.

Pro naši aplikaci vytvoříme další dva. Jedním by byl Firemní účet který bude přijímat platby, zatímco druhý bude Osobní účet prostřednictvím kterého budeme provádět platby. Chcete-li je vytvořit, jednoduše klikněte na

  1. Vytvořit účet
  2. Vyberte typ účtu
  3. Vyberte svou zemi/oblast
  4. Klikněte na Vytvořit

Ve výchozím nastavení budou účty vytvořeny s hroznými detaily. Můžete je upravit kliknutím na ... v části Spravovat účty sloupec.
Nyní máte dva účty PayPal Sandbox k napodobení transakce. Ale počkejte, k úspěšnému přijetí platby budete také potřebovat aplikaci PayPal, tak si ji vytvoříme.

Vytvoření aplikace PayPal

Vraťte se do Moje aplikace a přihlašovací údaje sekce. V části Aplikace REST API můžete vidět jednu aplikaci vygenerovanou ve výchozím nastavení. Vytvoříme jeden pro sebe. Chcete-li to provést jednoduše

  1. Klikněte na Vytvořit aplikaci tlačítko
  2. Pojmenujte svou aplikaci, já jsem ji pojmenoval React-Test
  3. Propojte jej s firemním účtem Sandbox, který jste právě vytvořili
  4. Klikněte na Vytvořit

Nyní získáte přístup k přihlašovacím údajům vaší aplikace včetně ID klienta a Tajné .

Zkopírujte si je někam, budeme je potřebovat, jakmile se vrátíme ke kódování naší aplikace pro reakce.

Než se přesuneme dále, přihlaste se pomocí našeho účtu Business Sandbox na řídicím panelu PayPal Sandbox a zkontrolujte řídicí panel firemního účtu, který by vypadal takto

Takže teď, když máme připravené jak naše sandboxové účty, tak naši PayPal aplikaci, můžeme přejít k části kódování.

Integrace inteligentních platebních tlačítek

Než napíšeme jakýkoli kód pro naši komponentu, musíme do naší aplikace integrovat tlačítko PayPal Smart Payment. Chcete-li to provést, přejděte na /public/index.html a vložte následující kód do HEAD štítek.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=INR"></script>

Klientské ID je stejné, jaké jsme získali při registraci naší aplikace u PayPal ve výše uvedené sekci a ano, nezapomeňte umístit &currency=YOUR_CURRENCY po vašem ID klienta, protože bez něj by nefungoval správně.

Vytvoření komponenty ReactPayPal

Pojďme nyní vytvořit hlavní komponentu, komponentu PayPal. Počínaje základní šablonou funkčních komponent

import React from 'react'

export default function reactPayPal() {
    return (
        <div>

        </div>
    )
}

Nyní vytvoříme dva stavy, jeden pro zjištění, zda byla platba provedena, a druhý pro zachycení, pokud dojde k chybě

  const [paid, setPaid] = React.useState(false);
  const [error, setError] = React.useState(null);

Nyní budeme používat useRef háček k získání proměnlivého objektu paypal ref.

  const paypalRef = React.useRef();

Naším dalším krokem by bylo získat tlačítka PayPal, jakmile se komponenta načte, k čemuž použijeme useEffect háček

React.useEffect(() => {
    window.paypal
      .Buttons({
        createOrder: (data, actions) => {
          return actions.order.create({
            intent: "CAPTURE",
            purchase_units: [
              {
                description: "Your description",
                amount: {
                  currency_code: "INR",
                  value: 500.0,
                },
              },
            ],
          });
        },
        onApprove: async (data, actions) => {
          const order = await actions.order.capture();
          setPaid(true);
          console.log(order);
        },
        onError: (err) => {
        //   setError(err),
          console.error(err);
        },
      })
      .render(paypalRef.current);
  }, []);

Objekt okna obsahuje paypal, protože jsme jeho skript zahrnuli do našeho index.html dříve. Také tento objekt obsahuje funkci nazvanou Tlačítka, která mají být vykreslena. Uvnitř tlačítek procházíme objekt a jakmile se to podaří, vykreslí tlačítka. V objektu, který má být předán Buttons, musíme předat tři funkce , jsou createOrder , onApprove , onError . Můžete se o nich dozvědět více na (docs)[developers.paypal.com/docs].
Jakmile bude platba provedena, musíme uživateli ukázat nějaké potvrzení, což provedeme pomocí podmíněného vykreslování

  // If the payment has been made
  if (paid) {
    return <div>Payment successful.!</div>;
  }

  // If any error occurs
  if (error) {
    return <div>Error Occurred in processing payment.! Please try again.</div>;
  }

a máme hotovo. Tuto komponentu musíme jednoduše zavolat v naší hlavní komponentě aplikace, kde ji vykreslíme po kliknutí na tlačítko Checkout.

Volání ReactPayPal

V současné době tedy máme statickou stránku s Pokladnou tlačítko s naší komponentou ReactPaypal připravenou. Chceme, aby tlačítka PayPal Smart Payment Buttons měla přístup k platební bráně PayPal, jakmile klikneme na pokladnu. Takže tady udělám nějaké podmíněné vykreslení, abych to udělal.

{(checkout === true) 
  ? <div className="payment-div">
    <ReactPayPal 
      total={500}
    />
  </div> 

  :<div>
    <h1>React-PayPal</h1>
    <button onClick={() => {setCheckout(true)}} className="checkout-button">Checkout</button>
  </div>
}

K tomu jsem vytvořil stav, pokladna abychom věděli, zda jsme klikli na tlačítko Pokladna.
Tak jsme konečně hotovi🤓 a pokud vše proběhlo v pořádku, měli bychom po kliknutí na Pokladnu vidět něco takového knoflík

Doufám, že vám tento článek pomohl. Kompletní kód, jak jsem již zmínil, je k dispozici na mém úložišti, takže se na něj podívejte.

coder-KO / React-PayPal

Integrace PayPal Commerce Platform do React pro přidání platební brány na váš web.

Pokračujte v kódování a užívejte si to! 😃