> ## Documentation Index
> Fetch the complete documentation index at: https://docs.plata-app.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Як це працює

> Повний user flow від заходу на сайт до оплати покупцем — архітектура plata простими словами.

## Велика картина

```mermaid theme={null}
flowchart LR
  A[Маркетинг] --> B[Реєстрація]
  B --> C[Додати магазин]
  C --> D[OAuth Shopify]
  D --> E[Інтеграції]
  E --> F{Вітрина}
  F -->|Liquid| G[Скрипт у темі]
  F -->|Hydrogen| H[Redirect у коді]
  G --> I[Клік Checkout]
  H --> I
  I --> J[Сесія /c/token]
  J --> K[Оплата + доставка]
```

## Крок за кроком для мерчанта

### 1. Маркетинг

Користувач заходить на [plata-app.com](https://plata-app.com), дивиться тарифи, натискає **Почати** / **Підключити Shopify** і потрапляє в кабінет (`app.plata-app.com`).

### 2. Реєстрація

Clerk-акаунт на `/sign-up`. Створюється акаунт plata з тарифом **Free**.

### 3. Підключення магазину

На `/{username}/~/add-store` мерчант:

1. Створює **власний Shopify App**.
2. Встановлює його на store.
3. Вводить Client ID / Secret.
4. Проходить OAuth.

plata зберігає магазин, реєструє webhooks і (для Online Store) інжектить checkout-скрипт у тему.

### 4. Налаштування послуги

У кабінеті магазину:

* **Інтеграції** — Monobank, Нова Пошта, COD…
* **Скрипти** — режим і оновлення inject (Liquid)
* **Checkout** — вигляд сторінки оплати (за наявністю налаштувань)

### 5. Покупець оформлює замовлення

1. Товари в кошику Shopify (або Hydrogen cart).
2. Клік «Оформити».
3. Redirect на `checkout…/c/start?shop=&cart=` (або API-еквівалент).
4. Сервер читає **живий** кошик через Storefront API за cart token.
5. Створюється `CheckoutSession` → сторінка `/c/{token}`.
6. Покупець платить і обирає доставку через ваші інтеграції.

## Що відбувається «під капотом» (коротко)

| Шар                    | Роль                                   |
| ---------------------- | -------------------------------------- |
| `apps/app`             | Кабінет мерчанта                       |
| `apps/api`             | OAuth, webhooks, платежі, shipping     |
| `apps/checkout`        | UI чекауту для покупця                 |
| Theme script / ваш код | Перехоплення кліку Checkout → redirect |

## Liquid vs Hydrogen

|                     | Liquid Online Store                   | Hydrogen                 |
| ------------------- | ------------------------------------- | ------------------------ |
| Після OAuth         | Автоматичний inject `plata-script.js` | Inject не застосовується |
| Хто робить redirect | Скрипт у темі                         | Ваш Remix/React код      |
| Кому підходить      | Більшість магазинів                   | Headless-команди         |

Детальніше: [Оберіть свій сетап](/choose-your-setup).