- Существующий проект на Next.js
- Доступ к Stripe Test Mode
Доступ к репозиторию не нужен. Доступ к проекту требуется, только если Bacodo должен интегрировать решение напрямую.
Дополнение Next.js
Добавьте Stripe Checkout или Payment Element, PaymentIntents и подписанные веб-перехватчики в существующий проект Next.js App Router без создания проводки Checkout, 3-D Secure и Route Handler с нуля.
От
$145
USD · Next.js
Интеграция Stripe для Next.js · Next.js
Requirements
Доступ к репозиторию не нужен. Доступ к проекту требуется, только если Bacodo должен интегрировать решение напрямую.
Что делает
Bacodo интегрирует Stripe в уже существующий проект Next.js. После передачи реализация сохраняется в вашем репозитории, поэтому ваша команда может ее читать, изменять и расширять. Вы по-прежнему владеете учетной записью Stripe, ключами API и комиссиями Stripe.
Для оформления заказа по карте и кошельку в Next.js требуются PaymentIntents, Checkout или Payment Element, секретные ключи 3-D Secure, доступные только для сервера, и обработчик маршрута веб-перехватчика, который проверяет подписи. Строить этот путь с нуля — дело медленное, и в нем легко ошибиться.
Мы добавляем Stripe.js в клиент Next.js, обработчики маршрутов (или действия сервера), которые создают платежные намерения или сеансы оформления заказа, проверку веб-перехватчика, страницы успеха/отмены и конфигурацию тестовой/действующей среды для App Router.
Ваша команда пропускает первую производственную реализацию Stripe Next.js: обработчики App Router, SCA, состояния ошибок и передачу, документирующую, как доставлять действующие ключи.
Разработчики, технические группы, агентства и стартапы, у которых уже есть приложение Next.js и которым нужен способ оплаты, который они смогут поддерживать.
Ключевые возможности
Используйте размещенную Stripe Checkout или встроенный элемент оплаты на странице оформления заказа Next.js. Кнопки ввода карты, 3-D Secure и кошелька остаются на пути PCI Stripe, а не на специальной карте, которую вы храните.
Создайте сеансы оформления заказа или PaymentIntents в обработчиках маршрутов Next.js. Браузер использует только публикуемый ключ и секрет клиента — секретный ключ никогда не поставляется в клиентском компоненте.
Включите кнопки кошелька в Stripe Checkout или Payment Element, когда ваша учетная запись Stripe и домен подтверждены. Резервный вариант Next.js остается при оформлении карты.
Отправьте приложение Next.js с тестовыми ключами Stripe, тестовыми карточками и документированным переходом на действующие ключи. Переменные среды Next.js остаются вне клиентского пакета.
Успешный платеж в пользовательском интерфейсе Next.js не является источником истины. Обработчик маршрутов проверяет подписи Stripe и обновляет порядок или состояние прав перед выполнением.
Обрабатывайте отклоненные карты, отмену оформления заказа, сбои сети и неполную защиту 3-D Secure, чтобы пользовательский интерфейс Next.js не оставлял клиента на мертвой странице.
Сценарии
Вы уже принимаете заказы или заказы в Next.js, и вам нужно оформить заказ по карте, не переписывая каталог или процесс бронирования.
Вам нужен поддерживаемый путь Stripe в Next.js, исходный код в клиентском репозитории и документированное переключение с использованием живого ключа вместо одноразового прототипа Next.js.
Приложение Next.js должно получить первый платеж или обновить способ оплаты, в то время как подписки и счета остаются на вашем сервере и в Stripe Billing, если вы их уже используете.
Начните с взимания платы с клиентов в приложении Next.js. Плата за Stripe Connect или целевые сборы могут определяться отдельно, если они необходимы для вашей торговой модели Next.js.
Демо
Предварительный просмотр пути оформления заказа Next.js: действие корзины или оплаты, оформление заказа или элемент платежа, подтверждение и состояния сбоя. Живая песочница для вашей учетной записи Stripe доступна после проверки совместимости. Эта страница не обрабатывает реальные платежи.
Как это работает
Стандартный рабочий процесс надстройки Bacodo с специфичными для Next.js и Stripe проверками маршрутизатора приложений, обработчиков маршрутов и существующего уровня данных.
01
Подтвердите интеграцию Stripe для Next.js и убедитесь, что проверка первого дня размещена на странице Checkout или Payment Element.
02
Просмотрите версию Next.js, App Router и Pages Router, существующий пользовательский интерфейс оформления заказа, базу данных и наличие у вас уже учетной записи Stripe.
03
Добавьте Stripe.js, страницы оформления заказа, обработчики маршрутов для сеансов или PaymentIntents, а также подписанный обработчик веб-перехватчика.
04
Подключите тестовые ключи Next.js, конечную точку веб-перехватчика и конфигурацию сервера для конкретной среды.
05
Запустите тестовые карточки Stripe, 3-D Secure, пути отмены/отклонения и подтверждение веб-перехватчика в приложении Next.js.
06
Предоставьте исходный код Next.js, примечания к конфигурации и контрольный список действующих ключей. Реализация Next.js остается за вами.
Архитектура
Браузер Next.js никогда не обращается к Stripe с секретным ключом. Элемент оформления заказа или оплаты использует секрет клиента из обработчика маршрута. Stripe уведомляет ваш веб-хук Next.js перед выполнением.
Поддерживаемые технологии
Текущая стабильная версия Next.js с App Router используется по умолчанию. Pages Router может быть ограничен, если это то, что уже использует ваш репозиторий Next.js.
Официальный Stripe.js на клиенте Next.js и полоса на сервере для сеансов, PaymentIntents и проверки веб-перехватчика.
Обновления заказов или прав остаются в базе данных или API, который уже использует ваше приложение Next.js. Мы не заменяем вашу серверную часть услугой, предоставляемой только Bacodo.
Ваша учетная запись Stripe, тестовые и действующие ключи, используемые Next.js, конечной точкой веб-перехватчика и событиями информационной панели. Плата за обработку Stripe остается за Stripe.
Хост, который может запускать обработчики маршрутов Next.js и получать веб-перехватчики Stripe (например, Vercel или Node-сервер). Для этого пути оформления заказа недостаточно статического экспорта.
Что входит
Pricing
Эта цена указана только для платформы Next.js. Он не использует цены на надстройки Django или Flutter.
Интеграция Stripe для Next.js
Добавьте готовые к использованию платежи Stripe в существующее приложение Next.js и сохраните исходный код.
Требования
$145
разовоNext.js
Нужен бэкенд?
Безопасная оплата черезstripe
Передача и безопасность
Типичная интеграция проверки Next.js Stripe начинается после проверки совместимости Next.js. Временная шкала зависит от текущего пользовательского интерфейса оформления заказа Next.js и уровня данных.
Карты тестового режима, 3-D Secure, способы отмены и отклонения проверяются в приложении Next.js перед передачей.
Секретные ключи Stripe и секреты подписи веб-перехватчиков остаются в среде сервера. Браузер Next.js получает только публикуемый ключ и недолговечные секреты клиента.
Обработчик маршрутов веб-перехватчика Next.js проверяет подписи Stripe перед обновлением состояния заказа или прав.
Мы не претендуем на сертификацию PCI, отсутствие мошенничества или гарантированный уровень одобрения. Данные карты Next.js собираются через Stripe Checkout или Payment Element, а не через специальную форму карты, которую мы храним.
FAQ
Интеграция Stripe для Next.js включает в себя Stripe.js, Checkout или Payment Element на существующей странице оформления заказа Next.js, создание PaymentIntent или Checkout Session в обработчиках маршрутов, подписанный обработчик веб-перехватчика, тестовое покрытие и заметки о передаче. Вы получаете исходный код Next.js в своем проекте. Комиссия Stripe и ваша учетная запись Stripe разделены.
Да. Интеграция Stripe для Next.js создана для уже имеющегося у вас проекта Next.js. Мы встраиваем оформление заказа и точку входа платежа в ваши текущие маршруты и пользовательский интерфейс Next.js вместо того, чтобы предоставлять отдельное демонстрационное приложение в качестве конечного результата.
Да, для рабочего пути Next.js Stripe. PaymentIntents, сеансы оформления заказа и секретный ключ должны находиться на сервере. Браузер Next.js получает только публикуемый ключ и секрет клиента. Статический экспорт Next.js не может содержать этот путь веб-перехватчика.
Интеграция Stripe для Next.js использует официальный Stripe.js на клиенте и SDK узла Stripe в обработчиках маршрутов Next.js. Мы не помещаем проверку Next.js в недокументированный плагин, если он вам явно не требуется.
Да, если ваша учетная запись Stripe, проверка домена и устройства поддерживают их. В Next.js кнопки кошелька являются необязательной областью действия. Оформление заказа по карте или элемент оплаты в Next.js остается резервным вариантом по умолчанию.
Интеграция Stripe по умолчанию для области Next.js — App Router. Маршруты API Pages Router API могут быть включены, если они уже используются в вашем репозитории Next.js, и мы соглашаемся с этим во время проверки совместимости Next.js.
Клиент Next.js может подтвердить PaymentIntent или начать сеанс оформления заказа через Stripe.js. Регулярные продукты Stripe Billing, клиентский портал и логика выставления счетов находятся на сервере. Для работы Next.js с большим объемом подписки может потребоваться индивидуальное предложение.
Браузер Next.js использует только публикуемый ключ Stripe. Секретный ключ и секрет подписи веб-перехватчика остаются в переменных среды сервера, используемых обработчиками маршрутов. Интеграция Stripe для Next.js не помещает секретные ключи в клиентские компоненты.
Сначала мы реализуем интеграцию Stripe для Next.js с тестовыми ключами и тестовыми карточками Stripe. Запуск в эксплуатацию — это задокументированное переключение ключа и веб-перехватчика в вашей панели мониторинга Stripe и серверной среде Next.js, а не активация дополнительной лицензии.
Stripe Checkout и Payment Element поддерживают 3-D Secure через Stripe.js. Страница Next.js должна поддерживать процесс оформления заказа до тех пор, пока Stripe не вернет окончательный статус; Интеграция Stripe для Next.js явно связывает эти состояния.
Да, для выполнения после оформления заказа или платежного элемента Next.js. Пользовательский интерфейс Next.js не является источником истины. Обработчик маршрутов проверяет подписи веб-перехватчиков Stripe, а затем отмечает оплаченный заказ, разблокирует контент или уведомляет о выполнении.
Да. Интеграция Stripe для Next.js обычно сохраняет ваш продукт Next.js, корзину и кнопку оплаты и открывает оформление заказа или монтирует платежный элемент из этого действия. Пользовательская форма карты Next.js, которая касается необработанных данных PAN, выходит за рамки области действия по умолчанию, поскольку «Оформление заказа» или «Элемент оплаты» является более безопасным путем PCI.
Нет. Вы создаете и владеете учетной записью Stripe, ключами API и комиссией за обработку Stripe. Стоимость дополнения Next.js — это внедрение в ваш проект Next.js, а не платежная лицензия Bacodo.
Нет. Цифровые товары, продаваемые в магазине приложений, часто по-прежнему требуют IAP. Интеграция Stripe для Next.js предназначена для оформления заказа Stripe на веб-сайте или веб-приложении Next.js, где Stripe — это разрешенный способ оплаты для вашего типа продукта.
Да. Метаданные сеанса PaymentIntent или Checkout, записи клиентов и поля, которые вы сохраняете после подтверждения веб-перехватчика, приводятся в соответствие с существующей моделью заказов Next.js во время интеграции Stripe для Next.js.
Исходный код Next.js находится в вашем репозитории, поэтому ваша команда может его поддерживать. Включенная 30-дневная поддержка охватывает технические вопросы и дефекты в поставляемой интеграции Stripe для Next.js, а не работу несвязанных функций Next.js.
В течение 30-дневного периода мы помогаем устранить сбои в поставляемой интеграции Next.js, вызванные задокументированными изменениями в Stripe или Stripe.js. Постоянные обновления пакета Next.js после этого — это ваше обслуживание или расширенная техническая поддержка, если вы его купите.
Мы документируем, как читать статус сеанса PaymentIntent или Checkout, журналы панели мониторинга Stripe и доставку веб-перехватчика из пути оформления заказа Next.js. 30-дневная поддержка включает устранение неполадок, отказов от 3-D Secure и неправильной настройки ключей для доставленного потока Next.js.
Мы подтверждаем вашу версию Next.js, App Router или Pages Router и среду выполнения Node в соответствии с Stripe SDK, который мы закрепляем во время интеграции. Старым или сильно разветвленным средам выполнения Next.js могут потребоваться дополнительные возможности.
30 дней после передачи включены в доставленный путь Next.js Stripe. Расширенная техническая поддержка является необязательной, ее стоимость составляет 20 % от стоимости дополнения к Next.js, и она покрывает еще шесть месяцев технической помощи по той же интеграции Next.js, а не по созданию нового продукта.
Добавьте готовые к использованию платежи Stripe в существующее приложение Next.js, сохраните исходный код и пропустите проверку сборки с нуля.
$145