GolOps

Stripe — это ведущая мировая платформа онлайн-платежей, поддерживающая более 100 способов оплаты, подписки и защиту от мошенничества

Быстрый старт

Создание аккаунта Stripe

Перейдите на сайт Stripe и зарегистрируйте аккаунт.

Получение API-ключа

Откройте Stripe Dashboard и перейдите в Developers → API Keys
Создайте ключ
Скопируйте ключ в .env

VITE_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx

Их также можно указать в панели настроек: Stripe API Keys

Внимание

STRIPE_SECRET_KEY — это чувствительная информация, не отправляйте ее в репозиторий.

Настройка Webhook

Stripe Create Webhook Прослушивайте следующие события:

checkout.session.completed
invoice.payment_succeeded
invoice.payment_failed
customer.subscription.created
customer.subscription.updated
customer.subscription.deleted Укажите путь callback:

https://your-domain.com/api/payment/webhook/stripe

Stripe Webhook Path

Скопируйте Webhook Secret в .env или укажите его в панели настроек: Stripe Webhook Secret

STRIPE_WEBHOOK_SECRET=whsec_xxx

Для локальной разработки нужно использовать режим песочницы, см. ниже.

Режим песочницы

Используется для локального тестирования и не приводит к реальным списаниям.

Stripe Sandbox

В Dashboard переключитесь в Test Mode и получите тестовые Publishable Key и Secret Key
Скачайте Stripe CLI и запустите локальное прослушивание:

stripe listen --forward-to localhost:3377/api/payment/webhook/stripe

Скопируйте Webhook Secret из вывода терминала в .env или укажите его в панели настроек:

STRIPE_WEBHOOK_SECRET=whsec_xxx

После настройки можно тестировать платежи локально. Для проверки используйте тестовые карты: Stripe Test Cards

Как использовать обратный прокси для тестирования онлайн-платежей

Перейдите на сайт Ngrok

Откройте сайт Ngrok и зарегистрируйте аккаунт.

Скачайте и настройте Ngrok

Установите и настройте Ngrok по официальной инструкции.

Не используйте ngrok в production. После каждого запуска публичный адрес меняется, поэтому нужно обновлять адрес callback. Если нужен фиксированный домен, получите его в ngrok и укажите через --url=.

Проверка конфигурации

Откройте главную страницу, прокрутите до блока pricing и нажмите кнопку покупки. Если вы переходите на страницу Stripe Checkout, значит настройка выполнена успешно. Pricing

Настройка цен

В Stripe Dashboard создайте Product и добавьте Price
Скопируйте Price ID (формат price_xxx) в .env
Скопируйте Price ID (формат price_xxx) в .env. При необходимости можно изменить имена переменных окружения, но они должны совпадать с кодом:

VITE_STRIPE_PRO_MONTHLY_PRICE_ID=price_xxx
VITE_STRIPE_PRO_YEARLY_PRICE_ID=price_xxx
VITE_STRIPE_LIFETIME_PRICE_ID=price_xxx

Измените src/config/payment-config.ts, чтобы суммы и периоды совпадали с настройками в Stripe:

export const paymentConfig: PlanWithPrice[] = [
  {
    id: "pro",                    // Уникальный идентификатор плана, используется в коде
    planType: "subscription",     // free | subscription | lifetime
    credit: {
      amount: 100,                // Кредиты, выдаваемые каждый месяц после подписки
      expireDays: 31,             // Срок действия кредитов
    },
    prices: [
      {
        priceId: import.meta.env.VITE_STRIPE_PRO_MONTHLY_PRICE_ID!,
        amount: 990,              // Значение в центах, 990 = $9.90
        currency,                 // Валюта, берется из VITE_CURRENCY
        interval: "month",        // month | year
        trialPeriodDays: 7,       // Дни пробного периода (необязательно)
      },
      {
        priceId: import.meta.env.VITE_STRIPE_PRO_YEARLY_PRICE_ID!,
        amount: 9900,
        currency,
        interval: "year",
      },
    ],
    display: {
      isRecommended: true,        // Показывать метку "Рекомендовано"
      group: "subscription",      // Группа для отображения в UI
    },
  },
  {
    id: "lifetime",
    planType: "lifetime",         // Разовая покупка
    prices: [
      {
        priceId: import.meta.env.VITE_STRIPE_LIFETIME_PRICE_ID!,
        amount: 19900,
        currency,
      },
    ],
    display: {
      originalPrice: 29900,       // Исходная цена (зачеркнутая)
      group: "one-time",
    },
  },
]

Описание полей

Поле	Описание
`id`	Идентификатор плана, по нему код находит нужный план
`planType`	`free` бесплатно / `subscription` подписка / `lifetime` разовая покупка
`credit.amount`	Количество кредитов, которые выдаются после активации подписки
`credit.expireDays`	Срок действия кредитов, если не задан, они не истекают
`priceId`	ID цены Stripe, копируется из Dashboard
`amount`	Цена, в центах: 990 = $9.90
`interval`	Период подписки, `month` или `year`
`trialPeriodDays`	Количество дней бесплатного пробного периода
`display.isRecommended`	Показывать ли метку рекомендации
`display.originalPrice`	Исходная цена, используется для отображения зачеркнутой цены
`display.group`	Идентификатор группы, используется для группировки в UI

Stripe