Stripe и Lovable: пошаговое руководство по интеграции (2026)

Прием денег - момент истины для любого приложения. Именно в этот момент ваш проект превращается из хобби в бизнес. В течение многих лет эта проблема считалась крайне сложной из-за рисков безопасности и запутанного кода. Сегодня, в 2026 году, связка такого конструктора как Lovable с платежной платформой типа Stripe кажется почти тривиальной - на первый взгляд.

Lovable изменился. Теперь он поставляется с нативной интеграцией Stripe, которая обеспечивает 80% необходимого функционала за пять минут. Это чисто, быстро, и для простых случаев использования - это все, что вам нужно. Но настоящая мощь - и путь к готовому к продакшену, масштабируемому приложению - заключается в понимании того, как обойти простой путь и напрямую взаимодействовать с API Stripe. Это руководство охватывает оба подхода: быстрое нативное подключение и надежную ручную настройку, необходимую для чего-то серьезного.

Быстрый путь: нативная интеграция

Нативная интеграция Stripe в Lovable - это самый быстрый способ подключить ваш аккаунт, обрабатывая аутентификацию и базовые платежные операции всего за несколько кликов. Если ваша цель - продавать один продукт или простую подписку без сложной логики, это ваша отправная точка. Она разработана для скорости и простоты, абстрагируя необходимость просмотра ключа API.

Думайте об этом как о парковочном ключе для вашей машины. Он позволяет выполнять основные функции, не передавая полный контроль. К 2026 году пользовательский интерфейс Lovable для этого невероятно отполирован. Вот как это работает:

1. Перейдите в Интеграции: Из вашей панели управления Lovable перейдите в Настройки > Интеграции. Вы увидите галерею нативных подключений.
2. Подключите Stripe: Найдите логотип Stripe и нажмите "Подключить". Это запустит процесс OAuth 2.0.
3. Авторизуйтесь в Stripe: Вы будете перенаправлены на страницу Stripe. Если вы не вошли в систему, вам будет предложено это сделать. Stripe попросит вас авторизовать Lovable для доступа к данным вашей учетной записи. Нажмите "Авторизовать".
4. Готово: Вы будете перенаправлены обратно в Lovable. Теперь интеграция отображает статус "Активно". Вот и все. Аутентификация завершена и безопасно хранится в Lovable.

Когда соединение активно, вы можете использовать встроенные действия Stripe в редакторе логики Lovable. Когда вы создаете серверное действие, вы увидите новую категорию для Stripe с такими действиями, как `Create Checkout Session` и `Create Customer Portal`. Чтобы продать один продукт, вы просто добавите действие `Create Checkout Session`, выберете Product ID из выпадающего меню, которое напрямую подтягивается из вашего аккаунта Stripe, а затем используете действие "Redirect", чтобы отправить пользователя на URL-адрес оформления заказа, который оно генерирует. Это гладко, быстро и практически исключает возможность ошибки.

Живописный маршрут: ручная настройка API

Ручная настройка API обеспечивает гранулированный контроль, позволяя вам использовать весь API Stripe напрямую через общий коннектор API Lovable. Нативная интеграция отлична, но это субъективное упрощение. Рано или поздно вам понадобится сделать что-то, что она не поддерживает - например, использовать Stripe Identity для KYC, выпускать виртуальные карты с помощью Stripe Issuing или создавать многоэтапный платежный процесс с пользовательскими метаданными.

Именно здесь вы переходите к ручной настройке. Она не сложнее, просто более явная. Вы будете управлять своими ключами API и самостоятельно формировать вызовы API. Это профессиональный способ разработки.

Сначала вам понадобится ограниченный API-ключ. Никогда не используйте свой секретный ключ для всей учетной записи во внешнем приложении, даже таком надежном, как Lovable. Ограниченные ключи минимизируют ущерб, если ключ когда-либо будет скомпрометирован.

1. Сгенерируйте ключ в Stripe: В вашей панели управления Stripe перейдите в раздел Developers и нажмите "API Keys".
2. Создайте ограниченный ключ: Нажмите "+ Create restricted key". Дайте ему описательное имя, например "Lovable App - Production".
3. Установите разрешения: Это критический шаг. Предоставьте только те разрешения, которые нужны вашему приложению. Для базового процесса оформления заказа вам понадобится:

`checkout.sessions`: Запись `customers`: Запись (для создания новых клиентов) * `webhook_endpoints`: Запись (для программного управления вебхуками, необязательно, но хорошая практика)

1. Скопируйте ключ: После создания ключа Stripe покажет вам секрет (он будет начинаться с `rk_live_`). Скопируйте его немедленно. Вы больше не сможете его увидеть.

Теперь давайте подключим это в Lovable:

1. Сохраните секрет: В Lovable перейдите в Настройки > Секреты. Создайте новый секрет с именем `STRIPE_API_KEY` и вставьте только что скопированный ключ.
2. Настройте коннектор API: Перейдите на вкладку API в редакторе Lovable. Создайте новый "Внешний API" и назовите его "Stripe API (Manual)".

Базовый URL: `https://api.stripe.com` Аутентификация: Установите тип `Bearer Token`. Значение токена:* Вместо прямого вставки ключа используйте синтаксис секретов Lovable: `{{secrets.STRIPE_API_KEY}}`.

Ваше ручное подключение готово. Вы можете делать вызовы к любой конечной точке API Stripe, добавляя шаг "API Request" к вашим действиям Lovable и выбирая "Stripe API (Manual)" в качестве источника.

| Функция | Нативная интеграция | Ручная настройка API | | :--- | :--- | :--- | | Время установки | < 2 минуты | ~5-10 минут | | Безопасность | Управляется Lovable (OAuth) | Ваша ответственность (Ограниченные ключи) | | Гибкость | Ограничено встроенными действиями | Полный доступ к API Stripe | | Случай использования | Простые оформления заказов, MVP | Пользовательская логика, расширенные функции |

Создание процесса одноразового платежа

Вы можете создать процесс одноразового платежа, создав кнопку "Оплатить", которая запускает действие Lovable для вызова API Checkout Session Stripe. Это наиболее распространенная задача, которую вы будете выполнять. Мы будем использовать ручную настройку из предыдущего раздела, чтобы проиллюстрировать полный процесс, поскольку это дает нам больше прозрачности в отношении происходящего.

Сначала вам нужно что-то продать. В вашей панели управления Stripe перейдите в раздел "Продукты" и создайте новый продукт. Дайте ему имя, а затем добавьте цену. После сохранения нажмите на цену, чтобы просмотреть ее детали, и скопируйте Price ID (он выглядит как `price_xxxxxxxxxxxxxx`).

Теперь вернемся в Lovable:

1. Создайте UI: Перетащите кнопку на холст вашего приложения. Оформите ее и установите текст, например "Купить сейчас - $25".
2. Создайте серверное действие: Перейдите на вкладку Actions и создайте новое серверное действие. Назовем его `Create Checkout Session`.
3. Добавьте шаг API Request: Внутри действия добавьте шаг API Request. Настройте его на использование вашего коннектора "Stripe API (Manual)".

Метод: `POST` Конечная точка: `/v1/checkout/sessions` Тип тела:* `x-www-form-urlencoded` (Так часто форматируют запросы серверные библиотеки Stripe).

1. Определите тело: Добавьте следующие пары ключ-значение в тело запроса. Это сообщает Stripe, что вы продаете и куда отправить пользователя после транзакции.

`line_items[0][price]`: Вставьте сюда ваш Price ID. `line_items[0][quantity]`: `1` `mode`: `payment` `success_url`: `https://your-app.lovable.site/payment-success` * `cancel_url`: `https://your-app.lovable.site/payment-cancelled`

1. Обработайте ответ: API Stripe, в случае успеха, вернет JSON-объект, содержащий `url`. Это URL-адрес страницы оформления заказа для этой конкретной транзакции. Добавьте новый шаг к вашему действию Lovable после запроса API: "Redirect to URL". Для значения URL используйте вывод предыдущего шага: `{{steps.api_1.data.url}}`.

Наконец, выберите кнопку на вашем холсте и в обработчике события `onClick` запустите действие `Create Checkout Session`, которое вы только что создали. Когда пользователь нажмет на нее, Lovable выполнит ваше действие на сервере, безопасно вызовет Stripe, получит уникальный URL-адрес оформления заказа и перенаправит на него браузер пользователя. Он завершит платеж на странице, размещенной Stripe, а затем будет отправлен на ваш URL-адрес успеха или отмены.

Последний этап: обработка вебхуков

Обработка вебхуков Stripe в Lovable включает создание публичной конечной точки Lovable и ее регистрацию в Stripe для прослушивания событий, таких как успешные платежи. Это самый важный - и наиболее часто упускаемый из виду - шаг для создания реального приложения. Никогда, ни при каких обстоятельствах не доверяйте клиентскому редиректу `success_url` для выполнения заказа. Пользователь может закрыть свой браузер после оплаты, но до редиректа, или злоумышленник может просто перейти на вашу страницу успеха, не заплатив вообще.

Источником истины должно быть серверное подтверждение от Stripe. Именно для этого и нужны вебхуки.

1. Создайте конечную точку вебхука в Lovable: В редакторе Lovable перейдите на вкладку Actions и создайте новое действие. На этот раз установите триггер на "Webhook". Lovable мгновенно сгенерирует уникальный публичный URL для этого действия. Скопируйте его.

1. Зарегистрируйте конечную точку в Stripe: В панели управления Stripe перейдите в Developers > Webhooks. Нажмите "Add an endpoint". Вставьте URL из Lovable в поле "Endpoint URL". Для событий не прослушивайте все. Будьте конкретны. Выберите "Listen to specific events" и выберите `checkout.session.completed`.

1. Защитите свою конечную точку: После создания конечной точки Stripe покажет "Signing secret" (он начинается с `whsec_`). Это пароль, который Stripe будет использовать для "подписания" каждого запроса, который он отправляет вам, доказывая, что он пришел от них. Скопируйте этот секрет.

1. Сохраните секрет в Lovable: Вернитесь в Lovable, Настройки > Секреты и создайте новый секрет с именем `STRIPE_WEBHOOK_SECRET`. Вставьте туда секрет подписи.

1. Создайте логику вебхука: Теперь отредактируйте действие вебхука, которое вы создали в Lovable. Это то, что будет выполняться каждый раз, когда клиент успешно платит.

Шаг 1: Проверка подписи. Самым первым шагом должна быть безопасность. У Lovable есть встроенная утилита для этого. Добавьте шаг и найдите `Stripe: Verify Webhook Signature`. Для этого требуются три входных параметра: `Payload`: `{{trigger.body}}` (Необработанный запрос от Stripe) `Signature Header`: `{{trigger.headers['stripe-signature']}}` `Signing Secret`: `{{secrets.STRIPE_WEBHOOK_SECRET}}` Шаг 2: Добавьте условную логику. Добавьте условие, которое проверяет, не прошел ли шаг проверки. Если да, немедленно прекратите выполнение. Шаг 3: Выполните заказ. Если подпись действительна, вы можете доверять полезной нагрузке. Данные события находятся в `{{trigger.body.data.object}}`. Теперь вы можете использовать эти данные для выполнения таких действий, как: Найти пользователя в вашей базе данных Lovable (возможно, используя `customer_email` или `client_reference_id`, который вы передали при создании оформления заказа). Обновить поле в записи пользователя, например, `has_access_to_pro_features = true`. * Запустить электронное письмо через интеграцию SendGrid или Resend, чтобы отправить квитанцию и приветственное сообщение.

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

FAQ: Как мне обрабатывать подписки?

Для обработки подписок процесс очень похож на одноразовый платеж, но с двумя ключевыми изменениями. Во-первых, при создании продукта в Stripe создайте повторяющуюся цену вместо одноразовой. Во-вторых, в вызове API `Create Checkout Session` установите параметр `mode` на `subscription` вместо `payment`. Вам также потребуется обрабатывать дополнительные вебхуки, такие как `customer.subscription.deleted` для отзыва доступа при отмене подписки пользователем, и `invoice.payment.failed` для уведомления о проблемах с выставлением счетов.

FAQ: Могу ли я использовать Stripe Elements?

Stripe Elements предоставляет красивые, готовые компоненты UI для форм кредитных карт, которые вы можете встроить непосредственно на свой сайт. Хотя у Lovable пока нет нативного компонента drag-and-drop для Stripe Elements, вы абсолютно можете использовать их, задействовав функцию пользовательских кодовых компонентов Lovable. Вам потребуется встроить скрипт Stripe.js в настройки вашего приложения, добавить пользовательский компонент для платежной формы и написать JavaScript для монтирования Element и создания метода оплаты. Затем вы передадите полученный `payment_method_id` серверному действию Lovable для создания платежа на бэкенде. Это продвинутая техника, но она предлагает максимальный контроль над процессом оформления заказа, позволяя вам встроить платежную форму непосредственно на страницу вашего приложения вместо перенаправления на размещенное Stripe оформление заказа.

FAQ: Какие распространенные ошибки Stripe встречаются в Lovable?

Большинство ошибок делятся на три категории. Во-первых, ошибки `401 Unauthorized` почти всегда означают, что ваш ключ API неверен, истек или не имеет правильных разрешений. Дважды проверьте настройки ограниченного ключа в Stripe и убедитесь, что он правильно сохранен в Lovable Secrets. Во-вторых, ошибки `400 Bad Request` обычно указывают на ошибку в теле вашего запроса API. Распространенная ошибка - отправка числа с плавающей запятой для цены (например, `10.99`), когда Stripe ожидает целое число в центах (`1099`). Внимательно прочитайте документацию API Stripe для конкретной конечной точки, которую вы вызываете. Наконец, сбои проверки подписи вебхука означают, что ваш `STRIPE_WEBHOOK_SECRET` неверен или вы неправильно передаете необработанное тело запроса функции проверки. Убедитесь, что вы используете переменную `{{trigger.body}}`, а не `{{trigger.parsed_body}}`.