---
title: "Веб-пейвол"
description: "Настройте веб-пейвол, чтобы принимать платежи без комиссий и проверок App Store."
---

:::important
Перед началом убедитесь, что установлена Adapty SDK версии 3.6.1 или выше для iOS либо Adapty SDK версии 3.15 или выше для Android.
:::

С помощью Adapty вы можете создать пейвол с кнопкой, которая перенаправляет пользователей в браузер для оплаты. Когда они вернутся в приложение после успешной покупки, подписка активируется.
Это позволяет избежать комиссий стора и при этом эффективно отслеживать платежи пользователей.

   
   <img src="/assets/shared/img/web_paywall.gif"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

:::tip
App Store разрешает внешние способы оплаты только в США.

Чтобы использовать пейвол исключительно для рынка США, продублируйте текущий пейвол и настройте веб-пейвол. Так у вас будет два почти одинаковых пейвола: один для США/Японии, другой — для всех остальных.
:::

## Как это работает \{#how-it-works\}

Веб-пейвол — это уникальный URL для каждого из ваших встроенных пейволов. Он позволяет пользователям перейти в браузер и оплатить там. Решение работает с разными платёжными провайдерами (Stripe, Paddle и другими) и поддерживает как простую страницу с кнопкой Apple Pay, так и более сложные сценарии с апселлами.

   
   <img src="/assets/shared/img/web-paywall-promo.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

Веб-пейволы работают следующим образом:
1. Вы **настраиваете внешний вид и логику страницы веб-пейвола** в редакторе.
2. Вы **привязываете веб-пейвол** в настройках пейвола.
3. В пейволе приложения вы **добавляете кнопку**, перенаправляющую пользователей в браузер.
4. Когда пользователь нажимает кнопку, Adapty SDK **генерирует уникальный URL**.
5. Пользователь **переходит на страницу веб-пейвола** и **оплачивает** подписку через внешний способ оплаты.
6. При возврате в приложение Adapty SDK начинает **отслеживать, обновился ли профиль** в результате совершённых покупок.
7. Adapty получает информацию о событии покупки, фиксирует его как аналитическое событие и отслеживает любые изменения.

## Шаг 1. Создайте веб-пейвол \{#step-1-create-a-web-paywall\}

1. Если вы хотите включить внешние платежи для существующего пейвола, [продублируйте](duplicate-paywalls) его, чтобы показывать новый только сегменту пользователей из США, а старый — всем остальным. Если хотите начать с нуля, [создайте](create-paywall) новый пейвол.
2. В пейволе перейдите на вкладку **Web paywall** и нажмите **Create web paywall**. Вы будете перенаправлены на новую страницу.
   
   <img src="/assets/shared/img/web-paywall-1.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
3. Настройте сам веб-пейвол и подключите способ оплаты.
:::tip
Воспользуйтесь нашим [гайдом по быстрому старту](web-paywall-configuration), который поможет запустить рабочий веб-пейвол.
:::
4. Вернитесь на страницу **Web paywall** и вставьте ссылку на пейвол.
:::important
При запуске пейвола в производственной среде **крайне важно** использовать корректную ссылку, сгенерированную после публикации веб-пейвола. Формат ссылки: `paywalls-....fnlfx.com`.
:::
5. Нажмите **Save**.
   
   <img src="/assets/shared/img/web-paywall-4.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

## Шаг 2. Запустите пейвол \{#step-2-trigger-the-paywall\}

Чтобы использовать веб-пейвол, нужно его запустить — способ зависит от вашей конфигурации:

- Если вы используете пейвол, созданный в Builder, достаточно [добавить новую кнопку](#step-2a-add-a-web-purchase-button), которая будет использовать указанную вами ссылку для отслеживания покупок и передачи данных в Adapty.
- Если вы используете SDK, необходимо настроить метод [`openWebPaywall`](#step-2b-set-up-the-sdk-method) для работы с веб-пейволами.

### Шаг 2а. Добавьте кнопку веб-покупки \{#step-2a-add-a-web-purchase-button\}

Если вы используете **пейвол из Builder**, добавьте кнопку веб-пейвола. Кнопка будет использовать указанную вами ссылку для отслеживания покупок и передачи данных в Adapty.

1. Откройте пейвол и перейдите на вкладку **Builder & Generator**.
2. Нажмите **Add element** и выберите **Web paywall button**.

   Если вы используете шаблон или существующий/продублированный пейвол, добавьте кнопку веб-пейвола рядом с уже существующей кнопкой покупки.
   Настройка кнопки веб-пейвола аналогична настройке обычной кнопки покупки.

3. Выберите способ открытия веб-пейвола в выпадающем меню **Open paywall in**:
    - **External browser**: открыть пейвол в браузере по умолчанию.
    - **In-app browser**: открыть пейвол во встроенном браузере поверх приложения, не покидая его.

   <img src="/assets/shared/img/web-paywall-5.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

### Шаг 2б. Вызовите метод SDK \{#step-2b-call-the-sdk-method\}

Если вы работаете с пейволом, разработанным самостоятельно, необходимо обработать веб-пейволы через метод SDK. Ознакомьтесь с гайдами для конкретных платформ:

- [iOS](ios-web-paywall)
- [Android](android-web-paywall)
- [React Native](react-native-web-paywall)
- [Flutter](flutter-web-paywall)
- [Unity](unity-web-paywalls)

## Шаг 3. Настройте плейсмент \{#step-3-set-up-a-placement\}

Поскольку веб-пейволы разрешены только для iOS-приложений в США, создайте отдельный сегмент пользователей для США/Японии и настройте плейсмент для показа разных пейволов разным сегментам:

1. [Создайте новый сегмент](segments) со следующими атрибутами:
   - **Country from store account**: United States
   - **Platform**: iOS and iPadOS
   - **App version**: последняя версия, использующая нашу SDK версии 3.6.0 или выше.
     
     <img src="/assets/shared/img/web-paywall-6.png"
     style={{
     border: '1px solid #727272', /* border width and color */
     width: '700px', /* image width */
     display: 'block', /* for alignment */
     margin: '0 auto' /* center alignment */
     }}
     />
     
2. [Создайте](create-placement) плейсмент или [отредактируйте](edit-placement) существующий. [Добавьте новую аудиторию](add-audience-paywall-ab-test) с веб-пейволом и созданным сегментом.
   
   <img src="/assets/shared/img/web-paywall-7.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />