От началото до края, този урок ви превежда през стъпките, за да стартирате плащанията чрез PayPal.

В пространството на електронната търговия решенията за цифрови плащания допринесоха за значително увеличение на приходите и цялостния растеж на бизнеса, като позволяват и обработват трансгранични плащания с лекота.

PayPal предлага просто и гъвкаво решение за цифрово плащане за управление на онлайн транзакции. Като включите PayPal във вашите уеб приложения, можете да осигурите на клиентите достъп до безпроблемно и сигурно изживяване при плащане, което от своя страна може да доведе до увеличаване на продажбите и цялостно доверие на марката.

Прочетете, за да научите как да интегрирате PayPal във вашите React приложения.

Настройте PayPal Sandbox акаунт

PayPal Sandbox е среда за тестване, предоставена от PayPal, за да можете да тествате интеграции на плащания във вашите приложения. Той предлага симулирана среда, която включва всички функции за плащане, открити в производствената среда на живо на PayPal.

instagram viewer

Просто пясъчната среда предоставя платформа за тестване на интеграции на плащания без нужда от реални пари.

С помощта на акаунта в пясъчника можете да получите достъп до виртуален PayPal акаунт с тестови средства, което ви позволява да симулирате различни видове транзакции и интеграции на плащания.

За да създадете акаунт в пясъчна среда, преминете към Конзола за разработчици на PayPal и влезте с идентификационните данни на акаунта си в PayPal. След това в таблото за управление на разработчиците щракнете върху Sandbox акаунти бутон.

За да обработите PayPal транзакция от вашето приложение React, имате нужда от два акаунта в пясъчник: бизнес акаунт и личен акаунт. Тези два акаунта ще ви помогнат да симулирате пълна транзакция - както от гледна точка на клиент, така и от гледна точка на търговец (бизнес).

Важно е да тествате функционалността на интеграцията на плащанията във вашето приложение от двете гледни точки.

Кликнете върху Създай акаунт бутон за настройка на двата акаунта.

На страницата с настройки на акаунта създайте по един от всеки тип акаунт: личен, след това бизнес. Ще използвате идентификационните данни на личния акаунт, за да влезете в него Пясъчникът на PayPal лична сметка. От друга страна, ще използвате идентификационните данни за бизнес акаунта, за да създадете проект на конзолата за разработчици, за да получите клиентския идентификатор на PayPal.

Като алтернатива, вместо да създавате нови акаунти, можете да използвате акаунтите в пясъчника по подразбиране, предоставени от PayPal, за да тествате интеграциите на плащанията.

Създайте PayPal проект

На страницата на таблото за разработчици щракнете върху Приложения и идентификационни данни бутон и щракнете Създаване на приложение бутон за настройка на PayPal проект. След това попълнете името на вашето приложение, изберете Търговец като тип акаунт и изберете идентификационните данни за бизнес акаунта, който сте създали първоначално.

Накрая копирайте клиентския идентификатор на приложението.

Настройте React Client

Създайте приложение React, отвори public/index.html файл и добавете своя клиентски идентификатор във формата, показан по-долу в раздела на главния елемент.

<сценарийsrc=" https://www.paypal.com/sdk/js? client-id=вашият-клиентски-ID&currency=USD">сценарий>

Тагът на скрипта зарежда PayPal JavaScript SDK, библиотека, която предоставя функционалност от страна на клиента за взаимодействие с API на PayPal и го прави достъпен за използване в компонентите на React.

Използвайки функциите на SDK, можете да създадете бутон за плащане в PayPal, който управлява потока на плащане, който включва изпращане на данни за плащане към PayPal, оторизиране на плащането и обработка на плащането отговор.

Можете да намерите кода на този проект в него GitHub хранилище.

Създайте продуктов компонент

В директорията /src създайте нова папка с компоненти и добавете два файла: Product.js и PayPalCheckout.js.

Отворете файла Product.js и добавете кода по-долу:

импортиране Реагирайте, {useState} от"реагира";
импортиране"./product.style.css";
импортиране"../assets/laptop.jpg";
функцияПриложение() {
връщане (
"Контейнер за продукти">
„Продуктово съдържание“>
"продукт"> 
изискват("../assets/laptop.jpg")} alt="лаптоп" />
 </div>
"десен">
 MacBook Pro</h2>





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


Цена: $350.00</h3>
 </div>
 </header>
 </div>
 );
}






износпо подразбиране Приложение;

Този код изобразява прост продуктов компонент.

Създайте PayPal Checkout Component

Добавете следния код към файла PayPalCheckout.js:

импортиране Реагирайте, { useRef, useEffect, useState } от"реагира";
импортиране PaymentFailure от"./PaymentFailure";
импортиране PaymentSuccess от"./Успешно плащане";
функцияPayPalCheckout() {
конст paypal = useRef();
конст [transactionStatus, setTransactionStatus] = useState(нула);


 useEffect(() => {
прозорец.paypal
 .Бутони({
 createOrder: (данни, действия, грешка) => {
връщане actions.order.create({
 намерение: "УЛАВЯНЕ",
 единици за покупка: [
 {
 описание: "Лаптоп MacBook",
 количество: {
 валутен код: "ЩАТСКИ ДОЛАР",
 стойност: 350.00,
 },
 },
 ],
 });
 },
 onApprove: асинхронен (данни, действия) => {
конст поръчка = изчакайте actions.order.capture();


конзола.log("успех", поръчка);
 setTransactionStatus("успех");
 },
 onError: (грешка) => {
конзола.log (грешка);
 setTransactionStatus("провал");
 },
 })
 .render (paypal.current);
 }, []);


ако (състояние на транзакцията "успех") {
връщане<PaymentSuccess />;
 }


ако (състояние на транзакцията "провал") {
връщане<PaymentFailure />;
 }


връщане (




</div>
 </div>
 );
}


износпо подразбиране PayPalCheckout;

Този код използва три Реагирайте куките: useRef, useState и useEffect. Той използва useRef, за да създаде препратка към елемент div, който ще действа като контейнер за бутона за плащане на PayPal.

Той използва useEffect, за да създаде бутон PayPal с paypal. Бутони функция и след това изобразява този бутон в елемента div, посочен от paypal.current метод.

The paypal. Бутони функцията приема обект с няколко свойства:

  • createOrder: Тази функция връща обект, съдържащ детайлите на поръчката, която потребителят е създал. Подробностите за поръчката ще включват конкретни подробности за продукта или услугата, като сума, име на продукта, описание и валута.
  • onApprove: Тази функция се изпълнява, когато плащането е одобрено. Той улавя плащането и регистрира съобщението за успех в конзолата. Той също така определя TransactionStatus състояние да успех.
  • onError: Тази функция се изпълнява, когато плащането срещне грешка. Той регистрира съобщението за грешка в конзолата и задава TransactionStatus състояние да провал.

И накрая, компонентът условно изобразява или the PaymentSuccess или PaymentFailure компонент в зависимост от стойността на TransactionStatus състояние.

Тези два компонента ще се рендират само след успешна транзакция или неуспешна. Продължете и създайте два файла: PaymentSuccess.js и PaymentFailure.js в папката на компонентите и добавете функционален компонент с елемент на параграф, който изобразява състоянието на транзакцията.

Актуализирайте компонента App.js

Отворете файла src/App.js и добавете кода по-долу:

импортиране Реагирайте, {useState} от"реагира";
импортиране Продукт от"./components/Product";
импортиране PayPalCheckout от"./components/PayPalCheckout";
импортиране"./App.css";
функцияПриложение() {
конст [касиране, setCheckOut] = useState(невярно);


връщане (


"приложение">
„Заглавка на приложението“>
 {Разгледайте? (

 ): (
"продукт">
 className="Разгледайте"
 onClick={() => {
 setCheckOut(вярно);
 }}
 >
 Добавете в количката и платете
 </button>

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


износпо подразбиране Приложение;

Този код използва подход за условно изобразяване, за да покаже или компонента PayPalCheckout, или компонента на продукта. Куката useState инициализира променлива на състоянието, наречена checkout, като false, която следи текущото състояние, когато страницата се зареди.

Първоначално React изобразява компонента на продукта, включително бутона за плащане. Когато потребител щракне върху бутона за плащане, функцията за обработка на onClick се задейства, за да актуализира променливата за плащане до true. Тази актуализация подканва компонента на приложението да изобрази компонента PayPalCheckout вместо това.

Допълнителни функции за плащане на PayPal

Функциите за плащане на PayPal, като One Touch и PayPal Credit, гарантират, че вашите клиенти могат да се насладят на рационализиран процес на плащане, който е сигурен, надежден и удобен.

Въпреки че можете да изградите своя собствена услуга за обработка на плащания от нулата, използването на платежна платформа като PayPal за предпочитане е по-гъвкава и ефективна алтернатива. По същество, с налице решение за плащане, не е нужно да се притеснявате за управлението на инфраструктурата, необходима за настройка на персонализирана услуга за плащане.