Инструкция фронтенд-разработчикам¶

Как создавать Payment Methods через Stripe для нашего приложения
📌 Цель

Пассажир должен добавить свою карту, чтобы мы могли:

• безопасно сохранять карту (Stripe vault)
• автоматически списывать деньги после поездки (off-session)
• проводить SCA-подтверждение (3D-Secure)

Для этого используется SetupIntent + Stripe Elements.

1️⃣ Шаг 1. Запросить SetupIntent с бэкенда¶

Дергаем ручку "Create setup intent object" - POST /api/payments/setup_intents

Получаем

{
    "data": {
        "id": "seti_1SUmTQK65qfXWkSiVIM19pAC",
        "client_secret": "seti_1SUmTQK65qfXWkSiVIM19pAC_secret_TRfp4egUtC6WlqSvYDjYruElmCEFjez",
        "payment_method_types": [
            "card"
        ],
        "account_id": "0cf6a16f-6492-4190-842b-f1563e7e3d7b",
        "user_id": "5f0d292c-f3f7-4a2a-b129-a1d0761cfb12",
        "stripe_account_id": null
    },
    "status": true
}

client_secret нужен фронту, чтобы вызвать Stripe.confirmCardSetup().

2️⃣ Шаг 2. Инициализация Stripe на фронте¶

import { loadStripe } from '@stripe/stripe-js';

const stripe = await loadStripe(PUBLIC_STRIPE_KEY);

3️⃣ Шаг 3. Создать Card Element и собрать данные карты¶

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

4️⃣ Шаг 4. Подтвердить SetupIntent (3D-Secure + сохранение карты)¶

const { setupIntent, error } = await stripe.confirmCardSetup(
  clientSecret,
  {
    payment_method: {
      card: cardElement,
      billing_details: {
        name: userFullName,
      },
    },
  }
);

Если всё ok:

setupIntent.status === "succeeded"
setupIntent.payment_method // <-- вот это нужно передать на бэкенд

Если ошибка:

• insufficient authentication
• card declined
• 3DS failed
• Фронту нужно отобразить сообщение.

5️⃣ Шаг 5. Отправить payment_method на бэкенд¶

POST /api/payments/payment_methods
Content-Type: application/json
Authorization: Bearer <token>

{
  "payment_method": "pm_123456789"
}

Бэкенд:

• привязывает payment_method к Customer
• сохраняет в базе
• теперь карта готова к off-session оплатам