- Существующий проект на React
- Доступ к Stripe Test Mode
- Для безопасных платежей нужен бэкенд
Доступ к репозиторию не нужен. Доступ к проекту требуется, только если Bacodo должен интегрировать решение напрямую.
React add-on
Добавьте Stripe.js, Payment Element и секретную проверку клиента в существующий React SPA без создания элементов, 3-D Secure и ошибок секретного ключа с нуля. React не поддерживает веб-перехватчики — они есть в вашем API.
От
$145
USD · React
Интеграция Stripe для React · React
Requirements
Доступ к репозиторию не нужен. Доступ к проекту требуется, только если Bacodo должен интегрировать решение напрямую.
Что делает
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 с помощью @stripe/react-stripe-js на маршруте оформления заказа React. Данные карты остаются в Stripe, а не в состоянии React, которое вы сохраняете.
Приложение React использует только публикуемый ключ и недолговечный секрет клиента из вашего API. Интеграция Stripe для React не помещает STRIPE_SECRET_KEY в среду Vite или CRA, которая поставляется в браузер.
Включите кошельки в «Платежном элементе», если это разрешено вашей учетной записью Stripe и доменом. Резервный вариант React остается на карточных элементах.
Сначала отправьте React SPA с публикуемым ключом теста Stripe. Живое переключение — это документированное изменение env плюс соответствующий живой секрет в вашем API.
Экран успеха React не является источником истины. Ваш API проверяет вебхук Stripe, затем приложение React считывает состояние оплаты из этого API.
Обрабатывайте отклоненные карты, отмененные элементы, сбои сети и неполную защиту 3-D Secure, чтобы пользовательский интерфейс React не оставлял клиента на мертвом экране.
Сценарии
У вас уже есть React SPA и API. Вам необходимо оформить заказ Elements без переписывания каталога в Next.js.
Вам нужен поддерживаемый путь Stripe в React, исходный код в клиентском репозитории и документированное переключение с использованием живого ключа вместо демонстрации CodeSandbox.
Приложение React выбирает первый способ оплаты, а подписки остаются в вашем API и Stripe Billing, если вы их уже используете.
Интеграция Stripe для React — это сторона SPA. Если вам также нужен встроенный API, объем которого определяется отдельно — эта цена не является новым бэкэндом.
Демо
Предварительный просмотр пути оформления заказа React: действие оплаты, элемент платежа, подтверждение и состояния отказа. Живая песочница для вашей учетной записи Stripe доступна после проверки совместимости. Эта страница не обрабатывает реальные платежи.
Как это работает
Стандартный рабочий процесс надстройки Bacodo с специфичными для React проверками Vite/CRA, React Router и API, который уже вызывает SPA.
01
Подтвердите интеграцию Stripe для React и убедитесь, что у вас есть (или будет использоваться) API, который может создавать PaymentIntents.
02
Просмотрите версию React, сборщик, существующий пользовательский интерфейс оформления заказа и язык серверной части, который уже использует SPA.
03
Добавьте Stripe.js, Elements, компоненты оформления заказа и контракт выборки в конечную точку PaymentIntent.
04
Подключите публикуемый ключ через общедоступную среду Vite/CRA. Секретный ключ и вебхук остаются в API.
05
Запустите тестовые карты Stripe, 3-D Secure, отмените/отклоните и подтвердите состояние обновлений веб-перехватчика API, которое считывает приложение React.
06
Предоставьте исходный код React, заметки по окружению и контрольный список действующих ключей. Реализация React остается за вами.
Архитектура
Пакет React никогда не содержит секретного ключа. Elements использует секрет клиента из вашего API. Stripe уведомляет этот API с помощью веб-перехватчика. Затем React считывает состояние заказа.
Поддерживаемые технологии
Текущий React на Vite, CRA или аналогичном пакете SPA. Это не маршрутизатор приложений Next.js — об этом стеке см. в разделе «Интеграция Stripe для Next.js».
Официальные привязки Stripe React для платежного элемента и кошельков.
PaymentIntent создает и проверяет веб-перехватчик на бэкэнде, который уже вызывает приложение React. Это дополнение не заменяет этот API службой, предназначенной только для Bacodo.
Ваша учетная запись Stripe, тестовые и действующие ключи, конечная точка веб-перехватчика в API и события информационной панели.
React SPA может быть статическим. Вебхук не может. Статический хост без API не может пройти этот путь оформления заказа.
Что входит
Pricing
Эта цена указана только для платформы React SPA. Он не использует цены на надстройки Next.js, Django, Flutter или React Native.
Интеграция Stripe для React
Добавьте готовые платежи Stripe к существующему React SPA и сохраните исходный код.
Требования
$145
разовоReact
Нужен бэкенд?
Безопасная оплата черезstripe
Передача и безопасность
Типичная проверка React Stripe начинается после проверки совместимости React. Сроки зависят от вашего текущего пользовательского интерфейса и API React Checkout.
Карты тестового режима, 3-D Secure, пути отмены и отклонения тестируются на React SPA перед передачей.
Открытым является только публикуемый ключ. Секретные ключи и секреты веб-перехватчиков остаются на сервере, который вызывает приложение React.
React не проверяет Stripe-Signature. Ваш API это делает, затем React считывает результат.
Мы не претендуем на сертификацию PCI или отсутствие мошенничества. React собирает карточки через элементы Stripe, а не через специальную форму карточек, которую мы храним.
FAQ
Интеграция Stripe для React включает в себя Stripe.js, элемент оплаты на существующем экране оформления заказа React, контракт выборки для вашего API PaymentIntent, тестовое покрытие и заметки о передаче. Вы получаете исходный код React в своем проекте. Плата за Stripe, ваша учетная запись Stripe и создание нового бэкэнда — это отдельные вопросы.
Да. Интеграция Stripe для React создана для уже имеющегося у вас React SPA (Vite, CRA или аналогичного). Мы встраиваем элемент платежа и точку входа платежа в ваши текущие маршруты и пользовательский интерфейс React вместо того, чтобы предоставлять отдельное демонстрационное приложение в качестве конечного результата.
Да, для производственного пути React Stripe. PaymentIntents, секретный ключ и проверка веб-перехватчика должны находиться на сервере. Браузер React получает только публикуемый ключ и секрет клиента. Хост React, работающий только в статическом режиме, не может завершить этот путь оформления заказа.
Интеграция Stripe для React использует официальный Stripe.js и @stripe/react-stripe-js для платежного элемента и кошельков. Мы не помещаем проверку React в недокументированный плагин, если вам это явно не требуется.
Да, если ваша учетная запись Stripe, проверка домена и устройства поддерживают их. В React кнопки кошелька являются необязательной областью действия. Элемент оплаты картой в React остается резервным вариантом по умолчанию.
Нет. Интеграция Stripe для React — это путь SPA. Маршрутизатор приложений Next.js и обработчики маршрутов представляют собой интеграцию Stripe для Next.js. Мы не переносим React SPA на Next.js в рамках этой цены на дополнение React.
Клиент React может подтвердить PaymentIntent или получить способ оплаты через Stripe.js. Продукты повторяющегося выставления счетов Stripe, клиентский портал и логика выставления счетов живут в вашем API. Для работы React с большим объемом подписки может потребоваться индивидуальное предложение.
Браузер React использует публикуемый ключ Stripe только через общедоступную среду Vite или CRA. Секретный ключ и секрет подписи веб-перехватчика остаются в вашем API. Интеграция Stripe для React не помещает секретные ключи в пакет React.
Сначала мы реализуем интеграцию Stripe для React с тестовыми ключами и тестовыми карточками Stripe. Запуск в эксплуатацию — это документированное изменение публикуемого ключа в React, а также соответствующий действующий секретный ключ и веб-перехватчик в вашем API, а не активация дополнительной лицензии.
Платежный элемент Stripe поддерживает 3-D Secure через Stripe.js. Страница React должна поддерживать поток оформления заказа до тех пор, пока Stripe не вернет окончательный статус; Интеграция Stripe для React явно связывает эти состояния.
Да, для выполнения после React Payment Element. Пользовательский интерфейс React не является источником истины. Ваш API проверяет подписи веб-перехватчиков Stripe, а затем отмечает оплаченный заказ, разблокирует контент или уведомляет о выполнении. Затем React считывает это состояние.
Да. Интеграция Stripe для React обычно сохраняет ваш продукт React, корзину и кнопку оплаты и монтирует платежный элемент из этого действия. Пользовательская форма карты React, которая касается необработанных данных PAN, выходит за рамки области действия по умолчанию, поскольку элемент платежа является более безопасным путем PCI.
Нет. Вы создаете и владеете учетной записью Stripe, ключами API и комиссией за обработку Stripe. Цена дополнения React — это внедрение в ваш проект React, а не платежная лицензия Bacodo.
Нет. Цифровые товары, продаваемые в магазине приложений, часто по-прежнему требуют IAP. Интеграция Stripe для React предназначена для оформления заказа Stripe на веб-сайте React или SPA, где Stripe — это разрешенный способ оплаты для вашего типа продукта.
Да. Метаданные PaymentIntent, записи о клиентах и поля, которые вы сохраняете после подтверждения веб-перехватчика, приводятся в соответствие с существующей моделью заказов во время интеграции Stripe для React. Приложение React отображает только то, что возвращает ваш API.
Исходный код React находится в вашем репозитории, поэтому ваша команда может его поддерживать. Включенная 30-дневная поддержка охватывает технические вопросы и дефекты в поставляемой области интеграции Stripe для React, а не работу несвязанных функций React.
В течение 30-дневного периода мы помогаем устранить сбои в предоставленной интеграции React, вызванные задокументированными изменениями в Stripe или Stripe.js. Постоянные обновления пакета React после этого — это ваше обслуживание или расширенная техническая поддержка, если вы его покупаете.
Мы документируем, как читать статус PaymentIntent, журналы Stripe Dashboard и доставку веб-перехватчиков из пути оформления заказа React. 30-дневная поддержка включает в себя устранение неполадок, отказов от 3-D Secure и неправильной настройки ключей для доставленного потока React.
Мы подтверждаем вашу версию React, пакет (Vite, CRA или аналогичный) и API, который SPA уже вызывает для версии Stripe.js, которую мы закрепляем во время интеграции. Старым или сильно разветвленным средам выполнения React могут потребоваться дополнительные возможности.
30 дней после передачи включены в доставленный путь React Stripe. Расширенная техническая поддержка является необязательной и стоит 20 % от стоимости дополнения React и покрывает еще шесть месяцев технической помощи по той же интеграции React, а не по созданию нового продукта.
Добавьте готовые платежи Stripe к существующему React SPA, сохраните исходный код и сохраните секреты в своем API.
$145