Jak zintegrować PayPal Checkout z aplikacją React

W obszarze handlu elektronicznego cyfrowe rozwiązania płatnicze przyczyniły się do znacznego wzrostu przychodów i ogólnego rozwoju przedsiębiorstw, umożliwiając łatwe przetwarzanie płatności transgranicznych.

PayPal oferuje proste i elastyczne rozwiązanie płatności cyfrowych do zarządzania transakcjami online. Włączając PayPal do swoich aplikacji internetowych, możesz zapewnić klientom dostęp do płynnych i bezpiecznych płatności, co z kolei może prowadzić do zwiększenia sprzedaży i ogólnego zaufania do marki.

Czytaj dalej, aby dowiedzieć się, jak zintegrować PayPal z aplikacjami React.

Skonfiguruj konto Sandbox PayPal

PayPal Sandbox to środowisko testowe udostępniane przez firmę PayPal, umożliwiające testowanie integracji płatności w ramach aplikacji. Oferuje symulowane środowisko, które obejmuje wszystkie funkcje płatności dostępne w środowisku produkcyjnym na żywo PayPal.

Po prostu piaskownica zapewnia platformę do testowania integracji płatności bez konieczności posiadania prawdziwych pieniędzy.

Korzystając z konta sandbox, możesz uzyskać dostęp do wirtualnego konta PayPal ze środkami testowymi, co pozwala symulować różne rodzaje transakcji i integracji płatności.

Aby utworzyć konto piaskownicy, przejdź do Konsola programisty PayPal i zaloguj się przy użyciu danych logowania do konta PayPal. Następnie na pulpicie programisty kliknij na Konta piaskownicy przycisk.

Aby przetworzyć transakcję PayPal z aplikacji React, potrzebujesz dwóch kont piaskownicy: konta firmowego i konta osobistego. Te dwa konta pomogą Ci przeprowadzić symulację całej transakcji — zarówno z punktu widzenia klienta, jak i handlowca (biznesowego).

Ważne jest, aby przetestować funkcjonalność integracji płatności w Twojej aplikacji z obu perspektyw.

Kliknij na Utwórz konto przycisk, aby skonfigurować dwa konta.

Na stronie ustawień konta utwórz po jednym koncie każdego typu: osobiste, a następnie biznesowe. Do zalogowania się będziesz używać poświadczeń konta osobistego Piaskownica PayPala konto osobiste. Z drugiej strony użyjesz poświadczeń konta firmowego do utworzenia projektu w konsoli programisty w celu uzyskania identyfikatora klienta PayPal.

Alternatywnie, zamiast tworzyć nowe konta, możesz użyć domyślnych kont piaskownicy dostarczonych przez PayPal, aby przetestować integracje płatności.

Utwórz projekt PayPal

Na stronie pulpitu nawigacyjnego programisty kliknij plik Aplikacje i poświadczenia przycisk i kliknij Utwórz aplikację przycisk, aby skonfigurować projekt PayPal. Następnie wpisz nazwę swojej aplikacji, wybierz Kupiec jako typ konta i wybierz poświadczenia dla pierwotnie utworzonego konta firmowego.

Na koniec skopiuj identyfikator klienta aplikacji.

Skonfiguruj klienta React

Utwórz aplikację React, otworzyć public/index.html plik i dodaj swój identyfikator klienta w formacie pokazanym poniżej w sekcji elementu head.

<scenariuszźródło=" https://www.paypal.com/sdk/js? id-klienta=twój-identyfikator-klienta&waluta=USD">scenariusz>

Tag skryptu ładuje zestaw PayPal JavaScript SDK, bibliotekę, która zapewnia funkcjonalność po stronie klienta do interakcji z interfejsem API PayPal i udostępnia ją do użytku w komponentach React.

Korzystając z funkcji zestawu SDK, możesz utworzyć przycisk płatności PayPal, który obsługuje przepływ płatności obejmuje przesłanie szczegółów płatności do PayPal, autoryzację płatności i obsługę płatności odpowiedź.

Utwórz komponent produktu

W katalogu /src utwórz nowy folder komponentów i dodaj dwa pliki: Product.js i PayPalCheckout.js.

Otwórz plik Product.js i dodaj poniższy kod:

import Reaguj, { stan użycia } z"reagować";
import"./produkt.styl.css";
import"../zasoby/laptop.jpg";
funkcjonowaćAplikacja() {
powrót (
„Pojemnik na produkt”>
„Zawartość produktu”>
"produkt"> 
wymagać("../zasoby/laptop.jpg")} alt="laptop" />
 </div>
„opis”>
 MacBooka Pro</h2>



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

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


eksportdomyślny Aplikacja;

Ten kod renderuje prosty składnik produktu.

Utwórz komponent PayPal Checkout

Dodaj następujący kod do pliku PayPalCheckout.js:

import Zareaguj, { useRef, useEffect, useState } z"reagować";
import Błąd płatności z„./Błąd płatności”;
import Transakcja zakończona sukcesem z"./Transakcja zakończona sukcesem";
funkcjonowaćPayPalCheckout() {
konst paypal = useRef();
konst [Stan Transakcji, ustawStan Transakcji] = StanUżycia(zero);
 użyjEfekt(() => {
okno.paypal
 .Guziki({
 utwórzZamówienie: (dane, działania, błąd) => {
powrót akcje.zamówienie.utwórz({
 zamiar: "SCHWYTAĆ",
 jednostki_zakupu: [
 {
 opis: „Laptop MacBooka”,
 kwota: {
 kod waluty: „USD”,
 wartość: 350.00,
 },
 },
 ],
 });
 },
 przy zatwierdzaniu: asynchroniczny (dane, działania) => {
konst zamówienie = czekać na akcje.zamówienie.przechwyć();
konsola.dziennik("powodzenie", zamówienie);
 setTransactionStatus("powodzenie");
 },
 onBłąd: (błądzić) => {
konsola.log (błąd);
 setTransactionStatus("awaria");
 },
 })
 .render (paypal.current);
 }, []);
Jeśli (stan transakcji "powodzenie") {
powrót<Transakcja zakończona sukcesem />;
 }
Jeśli (stan transakcji "awaria") {
powrót<Błąd płatności />;
 }
powrót (



</div>
 </div>
 );
}
eksportdomyślny PayPalCheckout;

Ten kod używa trzech Haki reakcji: useRef, useState i useEffect. Używa useRef do utworzenia odniesienia do elementu div, który będzie działał jako kontener dla przycisku płatności PayPal.

Używa useEffect do utworzenia przycisku PayPal z PayPal. guziki funkcji, a następnie renderuje ten przycisk w elemencie div, do którego odwołuje się paypal. walutametoda.

The PayPal. guziki funkcja przyjmuje obiekt o kilku właściwościach:

• createOrder: Ta funkcja zwraca obiekt zawierający szczegóły zamówienia utworzonego przez użytkownika. Szczegóły zamówienia będą zawierać szczegółowe informacje o produkcie lub usłudze, takie jak kwota, nazwa produktu, opis i waluta.
• onApprove: Ta funkcja jest uruchamiana po zatwierdzeniu płatności. Przechwytuje płatność i rejestruje komunikat o powodzeniu w konsoli. Ustawia również status transakcji stan do powodzenie.
• onError: Ta funkcja jest uruchamiana, gdy płatność napotka błąd. Rejestruje komunikat o błędzie w konsoli i ustawia status transakcji stan do awaria.

Na koniec komponent warunkowo renderuje plik Transakcja zakończona sukcesem Lub Błąd płatności składnik w zależności od wartości status transakcji państwo.

Te dwa komponenty będą renderowane tylko po udanej lub nieudanej transakcji. Śmiało i utwórz dwa pliki: PaymentSuccess.js I Błąd płatności.js w folderze komponentów i dodaj komponent funkcjonalny z elementem akapitu, który renderuje status transakcji.

Zaktualizuj komponent App.js

Otwórz plik src/App.js i dodaj poniższy kod:

import Reaguj, { stan użycia } z"reagować";
import Produkt z„./komponenty/Produkt”;
import PayPalCheckout z„./components/PayPalCheckout”;
import"./Aplikacja.css";
funkcjonowaćAplikacja() {
konst [do kasy, ustaw do kasy] = useState(FAŁSZ);
powrót (

„Aplikacja”>
„Nagłówek aplikacji”>
 {wymeldować się? (

 ): (
"Produkt">
 nazwa klasy="wymeldować się"
 onClick={() => {
 setCheckOut(PRAWDA);
 }}
 >
 Dodaj do koszyka i kasy
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
eksportdomyślny Aplikacja;

W tym kodzie zastosowano metodę renderowania warunkowego w celu wyświetlenia składnika PayPalCheckout lub składnika produktu. Hak useState inicjuje zmienną stanu o nazwie checkout jako false, która śledzi bieżący stan podczas ładowania strony.

Początkowo React renderuje komponent Product, w tym przycisk kasy. Gdy użytkownik kliknie przycisk kasy, funkcja obsługi onClick wyzwala aktualizację zmiennej kasy do wartości true. Ta aktualizacja monituje komponent aplikacji o renderowanie zamiast tego komponentu PayPalCheckout.

Dodatkowe funkcje płatności PayPal

Funkcje płatności PayPal, takie jak One Touch i PayPal Credit, zapewniają Twoim klientom usprawniony proces płatności, który jest bezpieczny, niezawodny i wygodny.

Chociaż możesz zbudować własną usługę przetwarzania płatności od podstaw, skorzystanie z platformy płatniczej, takiej jak PayPal, jest bardziej elastyczną i wydajną alternatywą. Zasadniczo, mając gotowe rozwiązanie płatnicze, nie musisz martwić się o zarządzanie infrastrukturą wymaganą do skonfigurowania niestandardowej usługi płatniczej.