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

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

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

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

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

​
Product

Источник данных о продукте выбирается настройкой Source. В режиме Manual доступны поля:
  • Name: название продукта, которое отображается вверху checkout
  • Description: короткая строка под названием, например Free shipping
  • Image: необязательная миниатюра продукта
При Stripe product откройте выпадающий список Product и найдите продукт в каталоге Stripe. Продукты сгруппированы на One-time и Recurring. Если вы только что добавили продукт в Stripe и его нет в списке, нажмите Refresh products. Вы по-прежнему можете добавить Image, чтобы показать картинку рядом с названием продукта.
Если для Source выбран Stripe product, обязательно выберите продукт. Без него checkout не будет работать на опубликованной странице.

​
Billing

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

​
Adaptive Pricing

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

​
Quantity

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

​
Discount

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

​
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, диапазон мин. и макс. числа дней доставки
Добавьте несколько вариантов, чтобы покупатель мог выбирать между ними. Выбранный тариф добавляется к итоговой сумме заказа.
Поля адреса доставки и варианты доставки в Stripe Checkout

​
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. При Stay on page напишите своё Confirmation Message. Если оставить его пустым, покупатели увидят Payment received, thank you!

​
Layout

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

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

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

​
FAQ

Нет. Выберите для Source значение Manual и введите название, цену и валюту в LanderLab. Используйте Stripe product только если хотите управлять ценой и типом оплаты в Stripe. В любом случае ваш аккаунт Stripe должен быть подключён в Integrations.
Да. Выберите Recurring в разделе Billing или выберите регулярный продукт из каталога Stripe.
Купон применяется автоматически для каждого покупателя. Промокод показывает поле, в которое покупатели вводят код сами.
Нажмите Refresh products или Refresh coupons в выпадающем списке, чтобы загрузить свежие данные из Stripe.
Все платежи, возвраты и данные клиентов находятся в вашем дашборде Stripe.