Плавно принимайте платежи на React Native: руководство по интеграции платежного шлюза Stripe

Представьте себе реализацию платежного шлюза с использованием традиционного метода: когда пользователь нажимает кнопку «Купить», вы загружаете HTML в WebView. Затем вам нужно будет постоянно отслеживать изменения URL-адресов, чтобы определить конечные точки успеха и неудачи, отбрасывая любые другие изменения URL-адресов. Наконец, вам нужно будет подтвердить статус платежа на сервере приложений. Этот процесс может быть довольно утомительным и трудоемким.

Но что, если я скажу вам, что вы можете справиться со всеми этими утомительными задачами с помощью простого вызова функции? Это было бы так просто, правда?

С выпуском Stripe React Native SDK принимать платежи или настраивать подписки через Stripe стало невероятно просто.

В этом руководстве мы проведем вас через процесс приема платежей с использованием Stripe React Native SDK. К концу у вас будет четкое понимание того, как этот SDK может значительно сократить время интеграции и улучшить UI/UX.

Вот что мы рассмотрим:

  • Что такое полоса?
  • Нативный SDK Stripe React
  • Настройка учетной записи Stripe
  • Внедрение Способов оплаты, таких как Giropay, EPS, Klarna, Apple Pay и Google Pay
  • Как сохранить карты для будущего использования

Чтобы следовать этому руководству по React Native, у вас должно быть:

  • Знакомство с React Native Framework
  • Эмулятор Android и симулятор iOS для тестирования
  • Редактор кода, установленный на вашем компьютере для разработки (например, VS Code)

Что такое полоса?

Stripe описывает себя как «платежную инфраструктуру для Интернета». С Stripe мы можем принимать платежи, отправлять выплаты и управлять нашим бизнесом в Интернете.

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

Мы можем легко интегрировать Stripe в наше приложение с его надежным и универсальным API и многочисленными библиотеками. Что делает Stripe настолько популярным, так это его способность покрывать практически все платежные требования в приложении.

Хотя Stripe является лишь вторым по популярности платежным шлюзом (PayPal остается первым), его использование компаниями во всем мире неуклонно растет.

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

Нативный SDK Stripe React

React Native SDK имеет открытый исходный код и полностью документирован. Внутри он использует SDK Stripe iOS и Stripe Android. Давайте подробно изучим Stripe React Native SDK и посмотрим, что он может предложить.

Apple Pay и другие способы оплаты

SDK поддерживает несколько вариантов оплаты, таких как банковские переводы, дебет и переадресация, кредитные карты, покупка сейчас, оплата позже, ваучеры, цифровые кошельки и способы оплаты, такие как Apple Pay, Google Pay, Giropay, EPS и другие.

Родной пользовательский интерфейс

С помощью Stripe React Native SDK мы можем безопасно принимать платежи на Android и iOS, используя нативные экраны и элементы.

Безопасность

Он также помогает собирать конфиденциальные данные, такие как номера кредитных карт, при безопасном приеме платежей. Это делается путем отправки данных в API Stripe вместо передачи их через наш внутренний сервер.

Готовый платежный интерфейс

Stripe React Native SDK предлагает готовый пользовательский интерфейс для оплаты, позволяющий легко интегрировать необходимые варианты оплаты, просто добавляя значения к параметрам.

Настройка учетной записи Stripe

Как и для любого другого SDK, для Stripe требуются персональные ключи доступа. Чтобы внедрить SDK в наше приложение, мы должны зарегистрировать нашу учетную запись и получить необходимые ключи.

После регистрации или входа в систему мы можем найти ключи API тестового и живого режима, посетив https://stripe.com/docs/keys.

Держите ключ доступа к своей учетной записи Stripe в секрете; это ключ к доступу к вашей учетной записи.

Установите React Native Stripe SDK

Чтобы установить Stripe React Native SDK, запустите одну из следующих команд в каталоге вашего проекта (в зависимости от того, какой менеджер пакетов вы используете):

yarn add @stripe/stripe-react-native
Or
npm install @stripe/stripe-react-native

Для iOS перейдите в папку iOS и запустите

pod install

Инициализация полосы

Для инициализации Stripe заверните весь экран в Stripe Wrapper, как показано ниже.

Только параметр publishableKey является обязательным. То же самое мы можем найти по ссылке https://stripe.com/docs/keys.

Для 3D-защиты и банковских перенаправлений нам нужно упомянуть urlScheme , который будет ссылаться на наше приложение при повторном посещении приложения из WebView.

Для Apple Pay необходим параметр merchantIdentifier, значение которого должно совпадать с тем, что мы прописали на сайте Apple Developer.

Способы оплаты

Теперь давайте рассмотрим наиболее часто используемые способы оплаты. Для этого нам нужно установить Stripe, как указано в предыдущих шагах, в нашем приложении React Native.

Все способы оплаты следуют аналогичным шагам, а именно:

  • Создайте клиента Stripe, если он еще не существует (желательно на стороне сервера)
  • Создайте платежное намерение (желательно на стороне сервера)
  • Подтвердить платежное намерение (на стороне клиента)

Хорошей практикой является обработка первых двух шагов со стороны сервера. Мы подготовили конечную точку в Node.js для требований на стороне сервера. Ниже приведен фрагмент кода для конечной точки Node.js, которую мы будем вызывать из нашего приложения React Native.

Теперь давайте вызовем указанную выше конечную точку из нашего приложения React Native. Ниже приведен фрагмент кода для вызова вышеуказанной конечной точки, который даст нам clientSecretэтонеобходимо для подтверждения платежного намерения.

Мы передаем параметр gateway, чтобы различать различные методы в дополнение к сумме и валюте.

Приведенный выше код реализует первый и второй шаги и будет общим для всех способов оплаты. Для третьего шага давайте рассмотрим каждый метод в отдельности.

Apple Pay

SDK предоставляет способ открыть Платежный лист Apple в нашем приложении и управлять покупками. Чтобы использовать Apple Pay, мы должны сначала настроить наше приложение, как описано в официальном документе.

После завершения настройки выполните следующие шаги и продолжайте. Нажав кнопку Apple Pay, выполните следующие действия:

  1. Вызовите fetchPaymentIntentClientSecret(), который вернет clientSecret.
  2. Используя clientSecret, вызовите confirmApplePayPayment()из @stripe/stripe-react-native. Мы получаем обратный вызов об успехе или неудаче обработки происходящих событий.

Выход:

Вот и все!! Apple Pay интегрирован. Apple Pay также можно протестировать в симуляторе. Если мы хотим протестировать Apple Pay на реальном устройстве в тестовой среде, нам необходимо выполнить следующие шаги:

  • Зарегистрируйте учетную запись песочницы в App Store Connect.
  • Войдите с той же учетной записью на устройстве.
  • В качестве региона укажите США или любую другую страну, которая поддерживает Apple Pay.
  • Убедитесь, что хотя бы одна карта добавлена ​​в Apple Wallet. Мы можем добавить тестовые карты для Apple Pay здесь, если мы используем учетную запись песочницы в устройстве.

Google Pay

Чтобы включить Google Pay в нашем приложении, нам нужно добавить следующий код в AndroidManifest.xml:

После этого выполните шаги, указанные ниже для Google Pay. Они аналогичны Apple Pay.

  • Инициализируйте Google Pay при загрузке страницы, используя initGooglePay() из @stripe/stripe-react-native. Полный код указан в официальном документе.
  • Нажав кнопку Google Pay, например Apple Pay, позвоните fetchPaymentIntentClientSecret(), чтобы получить clientSecret.
  • Используя clientSecret, вызовите presentGooglePay() из @stripe/stripe-react-native. Мы получаем обратный вызов об успехе или неудаче обработки происходящих событий.

Выход:

Самый важный шаг — одобрить Google Pay перед отправкой в ​​Play Store. Их беспокоит кнопка Google Pay, которую мы используем.

Рекомендуется следовать инструкциям, указанным в рекомендациях по разработке дизайна кнопки Google Pay. Не забудьте ознакомиться с разделом Начало работы с Google Pay.

Гиропай

Выполните следующие шаги, чтобы интегрировать Giropay в приложение. Нажав кнопку Giropay, выполните следующие действия:

  • Вызовите fetchPaymentIntentClientSecret(), который вернет clientSecret.
  • Используя clientSecret, вызовите confirmPayment() из @stripe/stripe-react-native. Мы получаем обратный вызов об успехе или неудаче обработки происходящих событий.

paymentMethodType: 'Giropay'

Выход:

Интеграция Giropay завершена. Мы можем подтвердить то же самое на панели инструментов Stripe в разделе оплаты, как показано на снимке экрана ниже.

Прибыль на акцию

Просто изменив параметр в приведенном выше методе, мы можем интегрировать различные способы оплаты, которые предоставляет Stripe. Чтобы интегрировать EPS, выполните те же действия, что и Giropay, только изменив параметр confirmPayment() .

paymentMethodType: 'Eps'

Выход:

Давайте проверим то же самое на панели инструментов Stripe.

Кларна

Чтобы интегрировать Klarna, выполните те же шаги, что и для описанных выше способов, Giropay и EPS, с той лишь разницей, что в параметрах confirmPayment().

paymentMethodType: 'Klarna'

Выход:

Давайте проверим вышеуказанный платеж в панели управления Stripe с незавершенным статусом.

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

Как сохранить карту, чтобы использовать ее позже?

Stripe предоставляет красивый элемент, который также позаботится о валидации.

Шаги, которые нам нужно выполнить, чтобы добавить карту в нашу учетную запись Stripe, следующие:

  • Проверьте и добавьте нового клиента, если он не существует (предпочтительно на стороне сервера)
  • Создайте намерение установки (желательно на стороне сервера)
  • Подтвердите намерение установки (на стороне клиента)

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

Фрагмент кода конечной точки Node.js, который обрабатывает эти два шага, описан в начале руководства.

Часть 3D-secure обрабатывается в течение confirmSetUpIntent() с использованием clientSecret.

В ответ на подтверждение намерения настройки наш провайдер Stripe узнает, следует ли открывать окно 3D-secure или нет. При необходимости Stripe может открыть окно и выполнить требуемую аутентификацию.

Если аутентификация прошла успешно, карта добавляется в учетную запись клиента Stripe.

Ниже приведен фрагмент кода, который вызывает fetchSetUpIntentClientSecret() и получает в ответ clientSecret.

Выход:

Вот так, народ! Мы дошли до конца.

Вы можете найти указанный выше исходный код в GitHub Repository 🚀

Заключение

Теперь мы понимаем, что @stripe/stripe-react-native многофункционален и чрезвычайно прост в реализации. У него есть методы и компоненты, которые легко использовать в нашем приложении.

Компоненты заботятся о пользовательском интерфейсе, проверках и безопасности, что экономит много времени на разработку.

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

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