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

# Stripe Checkout: приём платежей на лендинге

> Добавьте Stripe Checkout на лендинг LanderLab: разовые и регулярные платежи, купоны и промокоды, адрес доставки и действие после оплаты.

Элемент Stripe Checkout добавляет защищённую платёжную форму прямо на ваш лендинг. Посетители вводят данные карты и оплачивают, не покидая страницу, поэтому покупатель остаётся в вашей воронке от первого клика до покупки.

Платежи обрабатывает Stripe. Данные карты передаются напрямую в Stripe и никогда не проходят через LanderLab.

## Перед началом

Подключите аккаунт Stripe в разделе **Integrations**. Checkout использует это подключение, чтобы обрабатывать платежи и загружать ваши продукты и купоны из Stripe.

## Добавьте элемент Stripe Checkout

1. Откройте страницу в редакторе.
2. В левой боковой панели откройте **Elements** и найдите категорию **Conversion**.
3. Перетащите **Stripe Checkout** на холст.
4. Нажмите на элемент, чтобы открыть его настройки в правой панели.

На холсте checkout отображается в режиме **Preview Mode**. Он обновляется в реальном времени при изменении настроек, поэтому вы видите ровно то, что увидят посетители.

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/HSpSy6DDgRjR3IGt/images/stripe-element.png?fit=max&auto=format&n=HSpSy6DDgRjR3IGt&q=85&s=e608f71f343f72eb13bc0db3b4ff4d90" alt="Элемент Stripe Checkout в режиме Preview Mode на холсте редактора" width="1568" height="781" data-path="images/stripe-element.png" />
</Frame>

## Product

Источник данных о продукте выбирается настройкой **Source**.

| Source | Когда использовать |
| - | - |
| **Manual** | Введите название, цену и валюту прямо в LanderLab. Продукт в Stripe не нужен. |
| **Stripe product** | Выберите продукт, уже созданный в Stripe. Цена и тип оплаты берутся из Stripe. |

В режиме **Manual** доступны поля:

* **Name**: название продукта, которое отображается вверху checkout
* **Description**: короткая строка под названием, например `Free shipping`
* **Image**: необязательная миниатюра продукта

При **Stripe product** откройте выпадающий список **Product** и найдите продукт в каталоге Stripe. Продукты сгруппированы на **One-time** и **Recurring**. Если вы только что добавили продукт в Stripe и его нет в списке, нажмите **Refresh products**. Вы по-прежнему можете добавить **Image**, чтобы показать картинку рядом с названием продукта.

<Warning>
  Если для **Source** выбран **Stripe product**, обязательно выберите продукт. Без него checkout не будет работать на опубликованной странице.
</Warning>

## Billing

Для продуктов в режиме Manual выберите **One-time** для разового платежа или **Recurring** для подписки, затем укажите **Price** и выберите валюту. Для продуктов Stripe эти настройки скрыты, потому что цена и тип оплаты берутся из Stripe.

### Adaptive Pricing

Включите **Adaptive Pricing**, чтобы показывать цену в местной валюте посетителя. Конвертацию выполняет Stripe, а в checkout появляется переключатель валюты, где покупатель выбирает между вашей валютой и своей. Итоговая сумма списания может немного отличаться из-за курсов обмена.

### Quantity

Задайте количество по умолчанию в **Quantity**. Включите **Let customers change quantity**, чтобы показать переключатель количества, и задайте **Min** и **Max**, которые может выбрать покупатель. Checkout показывает промежуточную и итоговую сумму, которые обновляются при изменении количества.

### Discount

| Опция | Что видит покупатель |
| - | - |
| **None** | Скидки нет |
| **Coupon** | Выбранный вами купон применяется автоматически при оплате |
| **Promo code** | Поле **Add promotion code**, в которое покупатель вводит код |

Купоны и промокоды берутся из вашего аккаунта Stripe. Сначала создайте их в Stripe, затем нажмите **Refresh coupons**, если их нет в списке.

<Warning>
  Если для **Discount** выбран **Coupon**, обязательно выберите купон. Без него checkout не будет работать на опубликованной странице.
</Warning>

## Shipping

Включите **Collect shipping address**, чтобы запрашивать адрес доставки при оплате. В форме появится раздел **Shipping information** с полями для полного имени, страны и адреса. Флажок **Billing info is same as shipping** избавляет покупателей от необходимости вводить адрес дважды.

* **Countries**: оставьте **All countries** или выберите только страны, в которые вы доставляете
* **Shipping Options**: нажмите **Add shipping option**, чтобы создать тариф доставки

У каждого варианта доставки есть:

* **Name**, например `Standard shipping` или `Express`
* **Price**, укажите `0` для бесплатной доставки
* **Delivery estimate**, диапазон мин. и макс. числа дней доставки

Добавьте несколько вариантов, чтобы покупатель мог выбирать между ними. Выбранный тариф добавляется к итоговой сумме заказа.

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OOJD61koRNSO9OFT/shipping-checkout-images/d54e4bbb-3f9a-4d83-bb76-27e49777bff8.png?fit=max&auto=format&n=OOJD61koRNSO9OFT&q=85&s=1631193cdb586fdd3e94d36cb58d47b8" alt="Поля адреса доставки и варианты доставки в Stripe Checkout" width="1083" height="958" data-path="shipping-checkout-images/d54e4bbb-3f9a-4d83-bb76-27e49777bff8.png" />
</Frame>

## Checkout

* **Button Text**: свой текст кнопки оплаты. Оставьте пустым, чтобы использовать вариант Stripe по умолчанию, в котором указана сумма, например `Pay $88.20`
* **Language**: язык формы checkout. **Auto** подбирает язык браузера посетителя
* **Theme**: визуальный стиль формы. **Match Page** сочетает её с дизайном вашей страницы
* **Billing Address**: запрашивать полный платёжный адрес покупателя
* **Stripe Link**: позволить покупателям сохранить платёжные данные в Stripe Link для более быстрой оплаты в следующий раз
* **One purchase per visitor**: не даёт одному и тому же посетителю заплатить дважды, полезно для разовых предложений

## Payment success

Что произойдёт после успешной оплаты, выбирается настройкой **Action**.

| Action | Что происходит |
| - | - |
| **Stay on page** | Форма checkout заменяется сообщением с подтверждением |
| **Redirect to URL** | Покупатель перенаправляется на другую страницу, например апсейл или страницу благодарности |
| **Go to element** | Страница прокручивается к другой секции |
| **Open a popup** | Открывается один из попапов этой страницы |

При **Stay on page** напишите своё **Confirmation Message**. Если оставить его пустым, покупатели увидят `Payment received, thank you!`

## Layout

Как и у других элементов, можно настроить **Position** (выравнивание слева, по центру или справа), **Dimensions** (ширина по умолчанию — `360px`) и **Spacing** (margin и padding).

## Перед публикацией

1. Нажмите **Preview** и посмотрите checkout так, как его увидит посетитель.
2. Проверьте цену, валюту, скидку и итоговые суммы с учётом доставки.
3. Убедитесь, что под checkout на холсте нет предупреждения. Предупреждение означает, что не выбран обязательный продукт или купон.
4. Опубликуйте страницу.

## FAQ

<AccordionGroup>
  <Accordion title="Нужен ли продукт в Stripe, чтобы использовать checkout?">
    Нет. Выберите для **Source** значение **Manual** и введите название, цену и валюту в LanderLab. Используйте **Stripe product** только если хотите управлять ценой и типом оплаты в Stripe. В любом случае ваш аккаунт Stripe должен быть подключён в **Integrations**.
  </Accordion>

  <Accordion title="Можно ли продавать подписки?">
    Да. Выберите **Recurring** в разделе **Billing** или выберите регулярный продукт из каталога Stripe.
  </Accordion>

  <Accordion title="В чём разница между купоном и промокодом?">
    Купон применяется автоматически для каждого покупателя. Промокод показывает поле, в которое покупатели вводят код сами.
  </Accordion>

  <Accordion title="Почему не отображается мой новый продукт или купон из Stripe?">
    Нажмите **Refresh products** или **Refresh coupons** в выпадающем списке, чтобы загрузить свежие данные из Stripe.
  </Accordion>

  <Accordion title="Где посмотреть платежи?">
    Все платежи, возвраты и данные клиентов находятся в вашем дашборде Stripe.
  </Accordion>
</AccordionGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.