BacodoBACODO

Дополнение Next.js

Интеграция Stripe для Next.js

Добавьте Stripe Checkout или Payment Element, PaymentIntents и подписанные веб-перехватчики в существующий проект Next.js App Router без создания проводки Checkout, 3-D Secure и Route Handler с нуля.

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

От

$145

USD · Next.js

Интеграция Stripe для Next.js · Next.js

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

Requirements

What Интеграция Stripe для Next.js needs

  • Существующий проект на Next.js
  • Доступ к Stripe Test Mode

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

Что делает

Оформление заказа в полосе внутри вашего приложения Next.js

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 для Next.js

Полоса оформления заказа или элемент оплаты в Next.js

Используйте размещенную Stripe Checkout или встроенный элемент оплаты на странице оформления заказа Next.js. Кнопки ввода карты, 3-D Secure и кошелька остаются на пути PCI Stripe, а не на специальной карте, которую вы храните.

Обработчики маршрутов Next.js для PaymentIntents

Создайте сеансы оформления заказа или PaymentIntents в обработчиках маршрутов Next.js. Браузер использует только публикуемый ключ и секрет клиента — секретный ключ никогда не поставляется в клиентском компоненте.

Apple Pay и Google Pay в Next.js Checkout

Включите кнопки кошелька в Stripe Checkout или Payment Element, когда ваша учетная запись Stripe и домен подтверждены. Резервный вариант Next.js остается при оформлении карты.

Тестовый режим Next.js, затем активные клавиши Stripe

Отправьте приложение Next.js с тестовыми ключами Stripe, тестовыми карточками и документированным переходом на действующие ключи. Переменные среды Next.js остаются вне клиентского пакета.

Обработчик маршрута Webhook для состояния заказа Next.js

Успешный платеж в пользовательском интерфейсе Next.js не является источником истины. Обработчик маршрутов проверяет подписи Stripe и обновляет порядок или состояние прав перед выполнением.

Состояния успеха, отмены и ошибки Next.js

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

Сценарии

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

Существующий магазин Next.js или сайт бронирования.

Вы уже принимаете заказы или заказы в Next.js, и вам нужно оформить заказ по карте, не переписывая каталог или процесс бронирования.

Агентство передает клиентский сайт Next.js в производство

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

SaaS или членство Приложение Next.js

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

Торговая площадка Next.js или выплаты за услуги позже

Начните с взимания платы с клиентов в приложении Next.js. Плата за Stripe Connect или целевые сборы могут определяться отдельно, если они необходимы для вашей торговой модели Next.js.

Демо

Предварительный просмотр процесса оформления заказа Next.js Stripe

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

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

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

Стандартный рабочий процесс надстройки Bacodo с специфичными для Next.js и Stripe проверками маршрутизатора приложений, обработчиков маршрутов и существующего уровня данных.

  1. 01

    Выберите полосу Next.js.

    Подтвердите интеграцию Stripe для Next.js и убедитесь, что проверка первого дня размещена на странице Checkout или Payment Element.

  2. 02

    Проверка совместимости Next.js

    Просмотрите версию Next.js, App Router и Pages Router, существующий пользовательский интерфейс оформления заказа, базу данных и наличие у вас уже учетной записи Stripe.

  3. 03

    Интеграция в Next.js

    Добавьте Stripe.js, страницы оформления заказа, обработчики маршрутов для сеансов или PaymentIntents, а также подписанный обработчик веб-перехватчика.

  4. 04

    Настройте приложение Next.js

    Подключите тестовые ключи Next.js, конечную точку веб-перехватчика и конфигурацию сервера для конкретной среды.

  5. 05

    Проверьте путь оплаты Next.js

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

  6. 06

    Передача исходного кода Next.js

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

Архитектура

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

Браузер Next.js никогда не обращается к Stripe с секретным ключом. Элемент оформления заказа или оплаты использует секрет клиента из обработчика маршрута. Stripe уведомляет ваш веб-хук Next.js перед выполнением.

Страница Next.jsStripe.js / Оформить заказОбработчик маршрутаПлатежные намерения StripeОбработчик маршрута веб-перехватчикаБаза данных/состояние заказа

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

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

Маршрутизатор приложений Next.js

Текущая стабильная версия Next.js с App Router используется по умолчанию. Pages Router может быть ограничен, если это то, что уже использует ваш репозиторий Next.js.

Stripe.js и Stripe Node SDK

Официальный Stripe.js на клиенте Next.js и полоса на сервере для сеансов, PaymentIntents и проверки веб-перехватчика.

Ваш уровень данных Next.js

Обновления заказов или прав остаются в базе данных или API, который уже использует ваше приложение Next.js. Мы не заменяем вашу серверную часть услугой, предоставляемой только Bacodo.

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

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

Требуется настройка хостинга Next.js

Хост, который может запускать обработчики маршрутов Next.js и получать веб-перехватчики Stripe (например, Vercel или Node-сервер). Для этого пути оформления заказа недостаточно статического экспорта.

Что входит

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

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

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

  • Учетная запись Stripe, ключи API и плата за обработку Stripe — они принадлежат вам.
  • Новая база данных или CMS, если у вас нет места для хранения состояния заказа.
  • Marketplace Connect, пользовательские продукты для выставления счетов или замена покупок в приложении, если они не рассматриваются как пользовательская работа.

Pricing

Интеграция Stripe для цен на Next.js

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

Интеграция Stripe для Next.js

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

Требования

  • Существующий проект на Next.js
  • Доступ к Stripe Test Mode

$145

разово

Next.js

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

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

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

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

Практика доставки и безопасности Next.js

Предполагаемая доставка Next.js

Типичная интеграция проверки Next.js Stripe начинается после проверки совместимости Next.js. Временная шкала зависит от текущего пользовательского интерфейса оформления заказа Next.js и уровня данных.

Протестировано на Next.js перед передачей

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

Секреты Stripe остаются вне клиентских компонентов Next.js

Секретные ключи Stripe и секреты подписи веб-перехватчиков остаются в среде сервера. Браузер Next.js получает только публикуемый ключ и недолговечные секреты клиента.

Проверка вебхука для заказов Next.js

Обработчик маршрутов веб-перехватчика Next.js проверяет подписи Stripe перед обновлением состояния заказа или прав.

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

Мы не претендуем на сертификацию PCI, отсутствие мошенничества или гарантированный уровень одобрения. Данные карты Next.js собираются через Stripe Checkout или Payment Element, а не через специальную форму карты, которую мы храним.

FAQ

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

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

Интеграция Stripe для Next.js включает в себя Stripe.js, Checkout или Payment Element на существующей странице оформления заказа Next.js, создание PaymentIntent или Checkout Session в обработчиках маршрутов, подписанный обработчик веб-перехватчика, тестовое покрытие и заметки о передаче. Вы получаете исходный код Next.js в своем проекте. Комиссия Stripe и ваша учетная запись Stripe разделены.

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

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

Требуется ли для интеграции Stripe для Next.js сервер?

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

Какие пакеты Stripe использует Stripe Integration для Next.js?

Интеграция Stripe для Next.js использует официальный Stripe.js на клиенте и SDK узла Stripe в обработчиках маршрутов Next.js. Мы не помещаем проверку Next.js в недокументированный плагин, если он вам явно не требуется.

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

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

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

Интеграция Stripe по умолчанию для области Next.js — App Router. Маршруты API Pages Router API могут быть включены, если они уже используются в вашем репозитории Next.js, и мы соглашаемся с этим во время проверки совместимости Next.js.

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

Клиент Next.js может подтвердить PaymentIntent или начать сеанс оформления заказа через Stripe.js. Регулярные продукты Stripe Billing, клиентский портал и логика выставления счетов находятся на сервере. Для работы Next.js с большим объемом подписки может потребоваться индивидуальное предложение.

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

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

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

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

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

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

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

Да, для выполнения после оформления заказа или платежного элемента Next.js. Пользовательский интерфейс Next.js не является источником истины. Обработчик маршрутов проверяет подписи веб-перехватчиков Stripe, а затем отмечает оплаченный заказ, разблокирует контент или уведомляет о выполнении.

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

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

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

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

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

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

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

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

Какая поддержка Next.js будет включена после передачи Stripe?

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

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

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

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

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

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

Мы подтверждаем вашу версию Next.js, App Router или Pages Router и среду выполнения Node в соответствии с Stripe SDK, который мы закрепляем во время интеграции. Старым или сильно разветвленным средам выполнения Next.js могут потребоваться дополнительные возможности.

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

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

Интеграция Stripe для Next.js

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

$145