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

Первоначальная настройка

Предположим, например, что у вас есть продукт, который предлагает два разных плана подписки — план Standard и план Premium. Первый шаг, который вам нужно сделать, — это перечислить эти продукты на панели инструментов Stripe.

Каждый из этих планов связан с уникальным идентификатором фиксированной цены, также известным как идентификатор API, который выглядит примерно так: price_1N1ZOgJggWefJ04ArJBxxxxx. Теперь, имея это в виду.

приступим к разгадке сложностей процесса разработки

Бэкэнд часть

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

маршрут оплаты.js

просто определите маршрут, который отвечает за входящий запрос.

теперь создайте платежный контроллер

в этом фрагменте кода мы только что создали функцию для создания подписки, где тело запроса содержит имя пользователя, почту, способ оплаты и идентификатор цены.

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

в подписке на полосу укажите идентификатор клиента, идентификатор цены и способ оплаты по подписке. он вернет много вещей, просто возьмите clientsecret, который будет использоваться во внешнем интерфейсе для успешной оплаты, и идентификатор подписки, который будет использоваться в вашей базе данных для будущего рабочего процесса.

это все конец из бэкэнд части.

теперь давайте перейдем к интерфейсной части

Интерфейсная часть

для интерфейса вы можете использовать @stripe/react-stripe-js и @stripe/stripe-js

и вам нужно использовать публикуемый ключ во внешнем интерфейсе, где вы использовали секретный ключ в бэкэнде.

теперь вам нужно определить кассу, из которой вы будете взаимодействовать с серверной службой и завершить успешный платеж.

это просто базовый дизайн вашей платежной формы (Igonre My Frontend Skill). теперь мы реализуем функцию createsubscription в этом файле. для удобочитаемости кода я буду игнорировать часть дизайна на этом изображении.

для создания подписки вам нужно получить идентификатор метода оплаты, поэтому вам нужно вызвать функцию создания метода оплаты полосы по умолчанию с необходимым параметром.

Когда вы получите идентификатор способа оплаты с полосой, самое время вызвать внутренний API /create_subscription, чтобы совершить успешный платеж. в теле запроса вы отправите имя, адрес электронной почты и идентификатор цены, где идентификатор цены — это идентификатор цены на полосе панели инструментов, который был сохранен в базе данных, поэтому при получении продукта вы получите идентификатор цены. userid и электронная почта от текущего пользователя. это даст вам ответ с clientcreet и subscribe_id, теперь просто передайте этот секрет клиента в эту функцию. где полоса автоматически определяет успешный платеж или нет.

     const confirmPayment = await stripe?.confirmCardPayment(
        response.data.data.clientSecret
      );

вот и все ! вы сделали! теперь, если это успешный платеж, вы можете сделать следующую логику с идентификатором подписчика, что вам нравится.

Спасибо, что уделили время. Если вы нашли это полезным, нажмите кнопку хлопать 👏👏.

Если у вас возникли затруднения и вам нужна помощь, поздоровайтесь с LinkedIn и Fiverr.

Учебный ресурс:

  1. Справочник по API Stripe: https://stripe.com/docs/api
  2. Руководство Stripe по настройке подписок: https://stripe.com/docs/billing/subscriptions/set-up-subscription
  3. Руководство Stripe Checkout: https://stripe.com/docs/payments/checkout