GolOps

Creem — платежная платформа для SaaS и цифровых продуктов, которая как MoR автоматически берет на себя глобальное налоговое соответствие и поддерживает подписки и управление license key

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

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

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

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

Войдите в Creem Dashboard и откройте API Keys
Скопируйте X API Key в .env

CREEM_X_API_KEY=creem_xxx

Его также можно указать в панели настроек: Настройка API в Creem Dashboard

Внимание

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

Настройка Webhook

На странице Webhooks в Dashboard добавьте Endpoint: Настройка Webhook в Creem Dashboard Подпишитесь на следующие события:

checkout.completed
subscription.active
subscription.canceled
subscription.paid

Можно отметить все события, но GolOps будет обрабатывать только перечисленные выше. Укажите адрес callback:

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

Creem Webhook Path

Скопируйте Webhook Secret в .env:

CREEM_WEBHOOK_SECRET=whsec_xxx

Тестовый режим

Creem предоставляет тестовую среду, в которой не выполняются реальные списания.

Включите тестовый режим в Creem Creem Test Mode

Задайте его в .env или в панели настроек:

CREEM_TEST_MODE=true

В тестовом режиме можно использовать тестовые карты Creem для проверки платежей. Подробнее о тестовых картах см. в документации Creem.

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

Перейдите на сайт Ngrok Откройте сайт Ngrok и

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

Скачайте и настройте Ngrok Установите и настройте Ngrok по [официальной

инструкции](https://ngrok.com/docs/getting-started/setup/install/).

Запустите Ngrok `bash ngrok http 3377` Скопируйте публичный адрес

из вывода терминала Ngrok Public
URL Ваш адрес callback будет таким: https://xxx.app/api/payment/webhook/creem

Внимание

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

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

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

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

В Creem Dashboard создайте Product
Скопируйте Product ID в .env:

VITE_CREEM_PRO_MONTHLY_PRODUCT_ID=prod_xxx
VITE_CREEM_LIFETIME_PRODUCT_ID=prod_xxx

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

export const paymentConfig: PlanWithPrice[] = [
  {
    id: "pro",
    planType: "subscription",
    credit: {
      amount: 100,
      expireDays: 31,
    },
    prices: [
      {
        priceId: import.meta.env.VITE_CREEM_PRO_MONTHLY_PRODUCT_ID!,
        amount: 990, // значение в центах, 990 = $9.90
        currency,
        interval: "month",
      },
    ],
    display: {
      isRecommended: true,
      group: "subscription",
    },
  },
  {
    id: "lifetime",
    planType: "lifetime",
    prices: [
      {
        priceId: import.meta.env.VITE_CREEM_LIFETIME_PRODUCT_ID!,
        amount: 19900,
        currency,
      },
    ],
    display: {
      group: "one-time",
    },
  },
];

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

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

Creem

Перейдите на сайт Ngrok Откройте сайт Ngrok и

Содержание