В этом руководстве от начала до конца вы узнаете, как настроить и запустить платежи PayPal.

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

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

Читайте дальше, чтобы узнать, как интегрировать PayPal в ваши приложения React.

Настройка учетной записи песочницы PayPal

PayPal Sandbox — это тестовая среда, предоставляемая PayPal, чтобы вы могли протестировать интеграцию платежей в свои приложения. Он предлагает смоделированную среду, которая включает в себя все платежные функции, имеющиеся в реальной производственной среде PayPal.

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

instagram viewer

Используя учетную запись песочницы, вы можете получить доступ к виртуальной учетной записи PayPal с тестовыми средствами, что позволяет моделировать различные типы транзакций и интеграцию платежей.

Чтобы создать учетную запись песочницы, перейдите на Консоль разработчика PayPal и войдите в систему, используя данные своей учетной записи PayPal. Далее в панели разработчика нажмите кнопку Учетные записи песочницы кнопка.

Чтобы обработать транзакцию PayPal из вашего приложения React, вам нужны две учетные записи песочницы: бизнес-аккаунт и личный аккаунт. Эти две учетные записи помогут вам имитировать полную транзакцию — как с точки зрения покупателя, так и с точки зрения продавца (бизнеса).

Важно протестировать функциональность интеграции платежей в вашем приложении с обеих точек зрения.

Нажать на Зарегистрироваться кнопку для настройки двух учетных записей.

На странице настроек учетной записи создайте по одной учетной записи каждого типа: личной, затем деловой. Вы будете использовать учетные данные личной учетной записи для входа в Песочница PayPal персональный аккаунт. С другой стороны, вы будете использовать учетные данные для бизнес-аккаунта, чтобы создать проект на консоли разработчика, чтобы получить идентификатор клиента PayPal.

Кроме того, вместо создания новых учетных записей вы можете использовать учетные записи песочницы по умолчанию, предоставленные PayPal, для тестирования интеграции платежей.

Создать проект PayPal

На странице панели разработчика нажмите кнопку Приложения и учетные данные кнопку и нажмите Создать приложение кнопку, чтобы настроить проект PayPal. Далее заполните название вашего приложения, выберите Торговец в качестве типа учетной записи и выберите учетные данные для первоначально созданной бизнес-учетной записи.

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

Настройте клиент React

Создать React-приложение, Открой общедоступный/index.html файл и добавьте свой идентификатор клиента в формате, показанном ниже, в разделе элемента head.

<сценарийисточник=" https://www.paypal.com/sdk/js? client-id=your-client-ID&currency=USD">сценарий>

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

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

Вы можете найти код этого проекта в его Репозиторий GitHub.

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

В каталоге /src создайте новую папку компонентов и добавьте два файла: Product.js и PayPalCheckout.js.

Откройте файл Product.js и добавьте следующий код:

Импортировать Реагировать, {useState} от"реагировать";
Импортировать"./продукт.стиль.css";
Импортировать"../ассеты/ноутбук.jpg";
функцияПриложение() {
возвращаться (
«Товар-контейнер»>
«Продукт-контент»>
"продукт"> 
требовать("../ассеты/ноутбук.jpg")} альт="ноутбук" />
 </div>
"деск">
 Макбук Про</h2>





 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Maxime mollitia, molestiae quas vel sint commodi repudiandae
 следствие.
 </p>


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






экспортпо умолчанию Приложение;

Этот код отображает простой компонент продукта.

Создайте компонент проверки PayPal

Добавьте следующий код в файл PayPalCheckout.js:

Импортировать Реагировать, {useRef, useEffect, useState} от"реагировать";
Импортировать Ошибка оплаты от"./Ошибка платежа";
Импортировать ОплатаУспех от"./ПлатежУспех";
функцияPayPalCheckout() {
константа PayPal = использованиеСсылка();
константа [transactionStatus, setTransactionStatus] = useState(нулевой);


 использоватьЭффект(() => {
окно.paypal
 .Кнопки({
 создатьЗаказ: (данные, действия, ошибка) => {
возвращаться действия.порядок.создать({
 намерение: "ЗАХВАТЫВАТЬ",
 покупка_единиц: [
 {
 описание: «Ноутбук Макбук»,
 количество: {
 код валюты: "ДОЛЛАР США",
 ценить: 350.00,
 },
 },
 ],
 });
 },
 onApprove: асинхронный (данные, действия) => {
константа заказ = Ждите действия.порядок.захват();


консоль.бревно("успех", заказ);
 установитьСтатусТранзакции("успех");
 },
 ошибка: (ошибаться) => {
консоль.log (ошибка);
 установитьСтатусТранзакции("отказ");
 },
 })
 .render (paypal.current);
 }, []);


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


если (состояние транзакции "отказ") {
возвращаться<Ошибка оплаты />;
 }


возвращаться (




</div>
 </div>
 );
}


экспортпо умолчанию PayPalCheckout;

Этот код использует три Реагировать на хуки: useRef, useState и useEffect. Он использует useRef для создания ссылки на элемент div, который будет действовать как контейнер для кнопки оплаты PayPal.

Он использует useEffect для создания кнопки PayPal с PayPal. Кнопки функцию, а затем отображает эту кнопку в элементе div, на который ссылается PayPal.currenт метод.

PayPal. Кнопки функция принимает объект с несколькими свойствами:

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

Наконец, компонент условно отображает либо ОплатаУспех или Ошибка оплаты компонент в зависимости от величины статус транзакции состояние.

Эти два компонента будут отображаться только после успешной или неудачной транзакции. Идем дальше и создаем два файла: PaymentSuccess.js и PaymentFailure.js в папке компонентов и добавьте функциональный компонент с элементом абзаца, отображающим статус транзакции.

Обновите компонент App.js

Откройте файл src/App.js и добавьте следующий код:

Импортировать Реагировать, {useState} от"реагировать";
Импортировать Продукт от"./компоненты/продукт";
Импортировать PayPalCheckout от"./компоненты/PayPalCheckout";
Импортировать"./Приложение.css";
функцияПриложение() {
константа [оформить заказ, setCheckOut] = useState(ЛОЖЬ);


возвращаться (


"Приложение">
"Заголовок приложения">
 {проверить? (

 ): (
"Продукт">
 имя_класса="проверить"
 onClick={() => {
 установитьCheckOut(истинный);
 }}
 >
 Добавить в корзину и оформить заказ
 </button>

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


экспортпо умолчанию Приложение;

В этом коде используется условный подход к отображению для отображения либо компонента PayPalCheckout, либо компонента Product. Хук useState инициализирует переменную состояния checkout как false, которая отслеживает текущее состояние при загрузке страницы.

Первоначально React отображает компонент Product, включая кнопку оформления заказа. Когда пользователь нажимает кнопку проверки, срабатывает функция обработчика onClick, которая обновляет переменную проверки до значения true. Это обновление предлагает компоненту приложения вместо этого отображать компонент PayPalCheckout.

Дополнительные платежные функции PayPal

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

Хотя вы можете создать свою собственную службу обработки платежей с нуля, использование платежной платформы, такой как PayPal, предпочтительно является более гибкой и эффективной альтернативой. По сути, при наличии платежного решения вам не нужно беспокоиться об управлении инфраструктурой, необходимой для настройки собственной платежной службы.