Fluir

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

Как создавать 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 оплатам