BacodoBACODO

Дополнение React Native

Интеграция Stripe для React Native

Добавьте @stripe/stripe-react-native Payment Sheet в существующее приложение React Native без создания собственных форм карт, 3-D Secure и ошибок секретного ключа с нуля. React Native не поддерживает веб-перехватчики — они есть в вашем API.

  • Полный исходный код включен и ваш навсегда
  • Дополнительный лицензионный ключ или повторяющаяся лицензия не требуются.
  • Готов к производству и протестирован
  • Интегрирован в существующий проект и стек React Native.
  • Включена техническая поддержка в течение 30 дней после передачи
  • Дополнительная расширенная техническая поддержка на 6 месяцев за 20 % от стоимости дополнения.

От

$145

USD · React Native

Интеграция Stripe для React Native · React Native

Полный исходный кодНет лицензионного ключаГотов к производствуПротестированная интеграция30-дневная поддержка

Requirements

What Интеграция Stripe для React Native needs

  • Существующий проект на React Native
  • Доступ к Stripe Test Mode
  • Для безопасных платежей нужен бэкенд

Доступ к репозиторию не нужен. Доступ к проекту требуется, только если Bacodo должен интегрировать решение напрямую.

Что делает

Платежный лист в вашем приложении React Native — API по-прежнему владеет секретами

Bacodo интегрирует Stripe в уже имеющийся у вас проект React Native (Expo или голый). После передачи исходный код React Native находится в вашем репозитории. Секретный ключ и вебхук остаются на серверной части, которую вы уже используете. Вы по-прежнему владеете учетной записью Stripe и комиссиями Stripe.

Проблема, которую он решает

Приложение React Native не может безопасно создавать PaymentIntents или проверять веб-перехватчики. Ему нужен платежный лист и серверная часть, которая возвращает секрет клиента. При построении с неправильным разделением секретный ключ передается в двоичном виде.

Как это отражается в проекте

Мы добавляем @stripe/stripe-react-native, представляем платежный лист из существующего действия проверки React Native и подключаем вызовы выборки, которые уже нужны вашему API для PaymentIntents. Проверка вебхука осуществляется в этом API, а не внутри React Native.

Почему это экономит время разработки

Ваша команда пропускает первую производственную реализацию Stripe React Native: платежный лист, SCA, собственную конфигурацию и передачу, документирующую, как приложение взаимодействует с вашим API.

Для кого это

Разработчики и агентства, у которых уже есть приложение React Native для iOS/Android и API и которым нужен удобный в обслуживании путь Stripe без переписывания приложения во Flutter.

Ключевые возможности

Что входит в Интеграция Stripe для React Native

Платежный лист в React Native

Предоставьте платежную ведомость Stripe с @stripe/stripe-react-native из вашего платежного действия React Native. Данные карты остаются в Stripe, а не в состоянии React Native, которое вы сохраняете.

React Native извлекает секреты клиента, а не секретный ключ

Приложение React Native использует только публикуемый ключ и недолговечный секрет клиента из вашего API. Интеграция Stripe для React Native не помещает STRIPE_SECRET_KEY в пакет JS или собственный двоичный файл.

Apple Pay и Google Pay в React Native

Включите кошельки в таблице платежей, если это разрешено вашей учетной записью Stripe, идентификатором продавца Apple и настройками Google Pay. Резервный вариант React Native остается на листе оплаты карты.

Тестовый режим React Native, а затем публикуемый ключ в реальном времени.

Сначала отправьте приложение React Native с публикуемым ключом для тестирования Stripe. Live Cutover — это документированное изменение окружения/варианта плюс соответствующий живой секрет в вашем API.

Выполнение — это не экран успеха React Native

Экран благодарности React Native не является источником истины. Ваш API проверяет вебхук Stripe, затем приложение React Native считывает платное состояние из этого API.

React Native ошибка и отмена состояний

Обрабатывайте отклоненные карты, отмененные платежные листы, сбои сети и неполную защиту 3-D Secure, чтобы пользовательский интерфейс React Native не оставлял клиента на мертвом экране.

Сценарии

Когда подходит Интеграция Stripe для React Native

Существующий магазин React Native на iOS и Android.

У вас уже есть приложение React Native и API. Вам необходимо оформление платежного листа без переписывания каталога во Flutter.

Агентство передает клиентское приложение React Native в производство

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

Платный доступ SaaS в React Native

Приложение React Native выбирает первый способ оплаты, а подписки остаются на вашем API и Stripe Billing, если вы их уже используете.

Приложение React Native, Django или Node API уже установлены.

Интеграция Stripe для React Native — это мобильная клиентская часть. Если вам также нужен встроенный API, объем которого определяется отдельно — эта цена не является новым бэкэндом.

Демо

Предварительный просмотр потока платежей React Native

Предварительный просмотр пути оформления заказа React Native: действие оплаты, платежный лист, подтверждение и состояния отказа. Живая песочница для вашей учетной записи Stripe доступна после проверки совместимости. Эта страница не обрабатывает реальные платежи.

Как это работает

Как осуществляется интеграция Stripe для React Native

Стандартный рабочий процесс надстройки Bacodo со специфичными для React Native проверками Expo и Bare, целевыми объектами iOS/Android и API, который приложение уже вызывает.

  1. 01

    Выберите React Native Stripe.

    Подтвердите интеграцию Stripe для React Native и убедитесь, что у вас есть (или будет использоваться) API, который может создавать PaymentIntents.

  2. 02

    Проверка совместимости React Native

    Просмотрите версию React Native, Expo или простой рабочий процесс, существующий пользовательский интерфейс оформления заказа и язык серверной части, который уже использует приложение.

  3. 03

    Интеграция с React Native

    Добавьте @stripe/stripe-react-native, презентацию платежного листа, собственную конфигурацию и контракт выборки в конечную точку PaymentIntent.

  4. 04

    Настройте приложение React Native

    Подключите публикуемый ключ через env или Flavor. Секретный ключ и вебхук остаются в API.

  5. 05

    Проверьте путь оплаты React Native

    Запустите тестовые карты Stripe на iOS и Android, 3-D Secure, отмените/отклоните и подтвердите, что обновления веб-перехватчика API считываются приложением React Native.

  6. 06

    Передача исходного кода React Native

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

Архитектура

Как Stripe подключается к проекту React Native

Бинарный файл React Native никогда не хранит секретный ключ. Платежный лист использует секрет клиента из вашего API. Stripe уведомляет этот API с помощью веб-перехватчика. Затем React Native считывает состояние заказа.

Приложение React NativeПлатежный листВаш APIПлатежные намерения StripeВебхук → APIReact Native считывает состояние оплаты

Поддерживаемые технологии

Что Интеграция Stripe для React Native реально использует

React Native на iOS и Android

Текущий React Native на выставке Expo или пустой рабочий процесс. Это не веб-сайт React и не Flutter — посмотрите эти стопки на лендингах Stripe.

@stripe/stripe-react-native

Официальный SDK Stripe React Native для платежных листов и кошельков.

Ваш существующий API

PaymentIntent создает и проверяет веб-перехватчик на бэкэнде, который уже вызывает приложение React Native. Это дополнение не заменяет этот API службой, предназначенной только для Bacodo.

Учетная запись Stripe для приложения React Native

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

Требуемый бэкэнд

Приложение React Native является клиентом. Вебхук не может жить только на телефоне. Проект только для приложения без API не может пройти этот путь оформления заказа.

Что входит

Что включает в себя интеграция Stripe для React Native

  • Интеграция в существующий проект React Native.
  • Полный исходный код в вашем репозитории
  • Конверт с публикуемым ключом и презентация платежного листа
  • Получите контракт в свой API PaymentIntent.
  • Перед передачей протестированы потоки платежей React Native на iOS и Android.
  • Примечания по передаче для переключения между тестированием и эксплуатацией
  • 30-дневная техническая поддержка после передачи

Не входит в дополнительную цену

  • Учетная запись Stripe, ключи API и плата за обработку Stripe — они принадлежат вам.
  • Новый бэкэнд, если у вас нет API, который может создавать PaymentIntents.
  • Переписывание React Native на Flutter
  • Замена встроенных покупок Apple или Google
  • Marketplace Connect или индивидуальное выставление счетов, если только оно не является индивидуальной работой.

Pricing

Интеграция Stripe для ценообразования React Native

Эта цена указана только для платформы React Native. Он не использует цены на надстройки Next.js, React, Django или Flutter.

Интеграция Stripe для React Native

Добавьте готовый к использованию платежный лист Stripe в существующее приложение React Native и сохраните исходный код.

Требования

  • Существующий проект на React Native
  • Доступ к Stripe Test Mode
  • Для безопасных платежей нужен бэкенд

$145

разово

React Native

Нужен бэкенд?

  • Полный исходный код
  • Без лицензионной платы
  • 30 дней поддержки
  • Полная интеграция

Безопасная оплата черезstripe

Передача и безопасность

Практика доставки и безопасности React Native

Предполагаемая доставка React Native

Типичная проверка React Native Stripe осуществляется после проверки совместимости React Native. Временная шкала зависит от Expo, от текущего пользовательского интерфейса оформления заказа и API.

Протестировано на React Native перед передачей

Карты тестового режима, 3-D Secure, способы отмены и отклонения проверяются на iOS и Android перед передачей.

Секреты Stripe остаются вне двоичного файла React Native

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

Проверка вебхука осуществляется через API, а не в React Native.

React Native не проверяет Stripe-Signature. Ваш API это делает, затем React Native считывает результат.

Никаких непроверяемых претензий безопасности React Native.

Мы не претендуем на сертификацию PCI или отсутствие мошенничества. React Native собирает карты через «Платежный лист», а не через специальную форму карты, которую мы храним.

FAQ

Частые вопросы

Что включает в себя интеграция Stripe для React Native?

Интеграция Stripe для React Native включает настройку @stripe/stripe-react-native, платежный лист в существующей кассе React Native, контракт выборки для вашего API PaymentIntent, покрытие тестов iOS и Android и примечания о передаче. Вы получаете исходный код React Native в своем проекте. Плата за Stripe, ваша учетная запись Stripe и создание нового бэкэнда — это отдельные вопросы.

Будете ли вы интегрировать Stripe в наше существующее приложение React Native?

Да. Интеграция Stripe для React Native создана для уже существующего проекта React Native. Мы встраиваем «Платежный лист» и точку ввода платежа в ваш текущий пользовательский интерфейс навигации и оформления заказа React Native вместо того, чтобы предоставлять отдельное демонстрационное приложение в качестве конечного результата.

Требуется ли для интеграции Stripe для React Native бэкэнд?

Да, для производственного пути React Native Stripe. PaymentIntents, секретный ключ и проверка веб-перехватчика должны находиться на сервере. Приложение React Native получает только публикуемый ключ и секрет клиента. Если у вас нет API, эта работа с серверной частью рассматривается отдельно и не включена в стоимость дополнения React Native.

Какой пакет Stripe использует Stripe Integration для React Native?

Интеграция Stripe для React Native использует @stripe/stripe-react-native, официальный SDK React Native от Stripe, для кнопок платежного листа и кошелька на iOS и Android. Мы не помещаем проверку React Native в недокументированный плагин, если он вам явно не требуется.

Поддерживает ли интеграция Stripe для React Native Apple Pay и Google Pay?

Да, если ваша учетная запись Stripe, идентификатор продавца Apple, настройки Google Pay и устройства поддерживают их. В React Native кнопки кошелька являются необязательной областью действия. Лист оплаты картой в React Native остается резервным вариантом по умолчанию.

Включена ли Expo в интеграцию Stripe для React Native?

Expo и голый React Native являются кандидатами. Мы подтверждаем совместимость Expo SDK, плагинов конфигурации и собственных модулей во время проверки совместимости React Native. Веб-сайт React — это не эта площадка — см. Интеграция Stripe для React.

Может ли Stripe Integration для React Native собирать платежи за подписку?

Клиент React Native может подтвердить PaymentIntent или получить способ оплаты через Payment Sheet. Продукты повторяющегося выставления счетов Stripe, клиентский портал и логика выставления счетов живут в вашем API. Для работы React Native с большим объемом подписки может потребоваться индивидуальное предложение.

Где в приложении React Native хранятся публикуемые и секретные ключи Stripe?

Приложение React Native использует только публикуемый ключ Stripe, обычно через env или безопасный вариант. Секретный ключ и секрет подписи веб-перехватчика остаются на сервере. Интеграция Stripe для React Native не помещает секретные ключи в APK или IPA.

Как режим тестирования Stripe и режим реального времени работают в React Native?

Сначала мы реализуем интеграцию Stripe для React Native с использованием тестовых ключей и тестовых карточек Stripe. Выход в эксплуатацию — это задокументированное переключение ключа и веб-перехватчика на панели мониторинга Stripe и в серверной среде, используемой приложением React Native, а не активация дополнительной лицензии.

Как интеграция Stripe для React Native обрабатывает 3-D Secure/SCA?

React Native Payment Sheet и PaymentIntents обрабатывают 3-D Secure через @stripe/stripe-react-native. Приложение React Native должно поддерживать поток листов до тех пор, пока Stripe не вернет окончательный статус; Интеграция Stripe для React Native явно связывает эти состояния.

Требуются ли веб-хуки Stripe для оформления заказа React Native?

Да, для выполнения после React Native Payment Sheet. Пользовательский интерфейс React Native не является источником истины. Ваш сервер проверяет подписи веб-перехватчиков Stripe, а затем отмечает оплаченный заказ, разблокирует контент или уведомляет о выполнении.

Можем ли мы сохранить текущий интерфейс оформления заказа React Native с помощью Stripe?

Да. Интеграция Stripe для React Native обычно сохраняет ваш продукт React Native, корзину и кнопку оплаты и отображает платежный лист от этого действия. Пользовательская форма карты React Native, которая касается необработанных данных PAN, выходит за рамки области действия по умолчанию, поскольку «Платежный лист» является более безопасным путем PCI.

Включает ли цена интеграции Stripe для React Native учетную запись Stripe или сборы?

Нет. Вы создаете и владеете учетной записью Stripe, ключами API и комиссией за обработку Stripe. Цена дополнения React Native — это внедрение в ваш проект React Native, а не платежная лицензия Bacodo.

Заменит ли интеграция Stripe для React Native покупку внутри приложения Apple или Google?

Нет. Цифровые товары, продаваемые в магазине iOS или Android, часто по-прежнему требуют IAP. Интеграция Stripe для React Native предназначена для оформления заказа Stripe в приложении React Native, где Stripe — это разрешенный способ оплаты для вашего типа продукта.

Можем ли мы настроить квитанции и метаданные Stripe в React Native?

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

Какая поддержка React Native включена после передачи Stripe?

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

Как обновления Stripe-React-native или Stripe API обрабатываются в React Native?

В течение 30-дневного периода мы помогаем устранить сбои в поставляемой интеграции React Native, вызванные задокументированным изменением Stripe или @stripe/stripe-react-native. Постоянные обновления пакета React Native после этого — это ваше обслуживание или расширенная техническая поддержка, если вы его покупаете.

Что, если платежи Stripe не будут выполнены в рабочем приложении React Native?

Мы документируем, как читать статус PaymentIntent, журналы Stripe Dashboard и доставку веб-перехватчиков из пути оформления заказа React Native. 30-дневная поддержка включает устранение неполадок, отказов от 3-D Secure и неправильной настройки ключей для доставленного потока React Native.

Какие версии React Native совместимы с интеграцией Stripe для React Native?

Мы подтверждаем вашу версию React Native, Expo или пустой рабочий процесс, цель развертывания iOS и Android minSdk в соответствии с выпуском @stripe/stripe-react-native, который мы закрепляем во время интеграции. Старым или сильно разветвленным средам выполнения React Native могут потребоваться дополнительные возможности.

Что такое 30-дневная поддержка по сравнению с 6-месячной расширенной технической поддержкой для интеграции Stripe для React Native?

30 дней после передачи включены в предоставленный путь React Native Stripe. Расширенная техническая поддержка является необязательной и стоит 20 % от стоимости дополнения React Native и покрывает еще шесть месяцев технической помощи по той же интеграции React Native, а не по созданию нового продукта.

Интеграция Stripe для React Native

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

$145