BacodoBACODO

React add-on

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

Добавьте Stripe.js, Payment Element и секретную проверку клиента в существующий React SPA без создания элементов, 3-D Secure и ошибок секретного ключа с нуля. React не поддерживает веб-перехватчики — они есть в вашем API.

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

От

$145

USD · React

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

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

Requirements

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

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

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

Что делает

Элементы Stripe в вашем React SPA — API по-прежнему хранит секреты

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

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

React SPA не может безопасно создавать PaymentIntents или проверять веб-перехватчики. Ему нужны Stripe.js, Elements или Checkout и серверная часть, возвращающая секрет клиента. В результате неправильного разделения секретный ключ поставляется в комплекте.

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

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

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

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

Для кого это

Разработчики и агентства, у которых уже есть интерфейс React и API и которым нужен удобный в обслуживании путь Stripe без миграции SPA на Next.js.

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

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

Элемент оплаты в React

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

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

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

Apple Pay и Google Pay в React Elements

Включите кошельки в «Платежном элементе», если это разрешено вашей учетной записью Stripe и доменом. Резервный вариант React остается на карточных элементах.

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

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

Выполнение — это не благодарность React

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

Реагировать на ошибку и отменять состояния

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

Сценарии

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

Существующая витрина React на Vite или CRA

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

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

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

Экран настроек SaaS в React

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

Интерфейс React, Django или Node API уже установлены.

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

Демо

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

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

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

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

Стандартный рабочий процесс надстройки Bacodo с специфичными для React проверками Vite/CRA, React Router и API, который уже вызывает SPA.

  1. 01

    Выберите React Stripe

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

  2. 02

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

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

  3. 03

    Интеграция в React

    Добавьте Stripe.js, Elements, компоненты оформления заказа и контракт выборки в конечную точку PaymentIntent.

  4. 04

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

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

  5. 05

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

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

  6. 06

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

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

Архитектура

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

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

Реагировать СПАStripe.js / ЭлементыВаш APIПлатежные намерения StripeВебхук → APIReact считывает состояние оплаты

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

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

Реагировать СПА

Текущий React на Vite, CRA или аналогичном пакете SPA. Это не маршрутизатор приложений Next.js — об этом стеке см. в разделе «Интеграция Stripe для Next.js».

@stripe/react-stripe-js и Stripe.js

Официальные привязки Stripe React для платежного элемента и кошельков.

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

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

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

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

Обязательное разделение хостинга

React SPA может быть статическим. Вебхук не может. Статический хост без API не может пройти этот путь оформления заказа.

Что входит

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

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

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

  • Учетная запись Stripe, ключи API и плата за обработку Stripe — они принадлежат вам.
  • Новый бэкэнд, если у вас нет API, который может создавать PaymentIntents.
  • Миграция с React на Next.js
  • Marketplace Connect или индивидуальное выставление счетов, если только оно не является индивидуальной работой.

Pricing

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

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

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

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

Требования

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

$145

разово

React

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

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

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

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

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

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

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

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

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

Секреты Stripe остаются вне пакета React

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

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

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

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

Мы не претендуем на сертификацию PCI или отсутствие мошенничества. React собирает карточки через элементы Stripe, а не через специальную форму карточек, которую мы храним.

FAQ

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

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

Интеграция Stripe для React включает в себя Stripe.js, элемент оплаты на существующем экране оформления заказа React, контракт выборки для вашего API PaymentIntent, тестовое покрытие и заметки о передаче. Вы получаете исходный код React в своем проекте. Плата за Stripe, ваша учетная запись Stripe и создание нового бэкэнда — это отдельные вопросы.

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

Да. Интеграция Stripe для React создана для уже имеющегося у вас React SPA (Vite, CRA или аналогичного). Мы встраиваем элемент платежа и точку входа платежа в ваши текущие маршруты и пользовательский интерфейс React вместо того, чтобы предоставлять отдельное демонстрационное приложение в качестве конечного результата.

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

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

Какие пакеты Stripe использует Stripe Integration for React?

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

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

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

Включен ли Next.js в интеграцию Stripe для React?

Нет. Интеграция Stripe для React — это путь SPA. Маршрутизатор приложений Next.js и обработчики маршрутов представляют собой интеграцию Stripe для Next.js. Мы не переносим React SPA на Next.js в рамках этой цены на дополнение React.

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

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

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

Браузер React использует публикуемый ключ Stripe только через общедоступную среду Vite или CRA. Секретный ключ и секрет подписи веб-перехватчика остаются в вашем API. Интеграция Stripe для React не помещает секретные ключи в пакет React.

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

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

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

Платежный элемент Stripe поддерживает 3-D Secure через Stripe.js. Страница React должна поддерживать поток оформления заказа до тех пор, пока Stripe не вернет окончательный статус; Интеграция Stripe для React явно связывает эти состояния.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мы подтверждаем вашу версию React, пакет (Vite, CRA или аналогичный) и API, который SPA уже вызывает для версии Stripe.js, которую мы закрепляем во время интеграции. Старым или сильно разветвленным средам выполнения React могут потребоваться дополнительные возможности.

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

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

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

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

$145