---
title: "Настройка веб-пейвола"
---

После нажатия **Create web paywall** на странице **Web paywall** вы будете перенаправлены на отдельную страницу, где можно настроить дизайн веб-пейвола и способ оплаты.

## Настройка способа оплаты \{#set-up-a-payment-method\}

Сначала нужно подключить платёжного провайдера, который будет обрабатывать покупки. Доступные варианты:

- Stripe
- Paddle
- Paypal
- Solidgate

:::important
Чтобы аналитика веб-пейвола в Adapty работала корректно, необходимо [добавить продукты](product) вместе с соответствующими идентификаторами продуктов из Stripe/Paddle/другого платёжного провайдера.
:::

Чтобы настроить платёжного провайдера:
1. На странице со списком веб-пейволов нажмите **Settings** и перейдите на вкладку **Integrations**.
2. Выберите платёжного провайдера и следуйте инструкциям по интеграции на экране.

   
   <img src="/assets/shared/img/web-paywall-configuration-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. ⚠️ Если вы выбрали Stripe, убедитесь, что используете ключи из окружения **Test Mode**, несмотря на то что в интерфейсе написано **Sandbox**. Иначе веб-пейвол не будет работать. **Sandbox** в Stripe пока не поддерживается.

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

### Настройка верификации домена для Apple Pay \{#set-up-apple-pay-domain-verification\}

В разделе **Settings > Domains** выберите основного платёжного провайдера для верификации домена. Затем подтвердите домены своего пейвола у соответствующего провайдера:

**Stripe**:
1. Перейдите в [настройки доменов способов оплаты](https://dashboard.stripe.com/settings/payment_method_domains) и нажмите **Add a new domain**.
2. Добавьте `app.funnelfox.com` и ваш личный субдомен пейвола (он выглядит как `paywalls-....fnlfx.com`). Чтобы найти субдомен, перейдите в **Settings > Domains** и скопируйте значение **Hosted subdomain**.

**Paddle**:
1. В консоли Paddle перейдите в **Checkout > Website approval** и нажмите **Add a new domain**.
2. Добавьте `app.funnelfox.com` и ваш личный субдомен пейвола (он выглядит как `paywalls-....fnlfx.com`). Чтобы найти субдомен, перейдите в **Settings > Domains** и скопируйте значение **Hosted subdomain**.

Процесс проверки в Paddle выполняется вручную, поэтому нужно подождать, пока домены не перейдут из статуса `Pending` в `Approved`.

**FunnelFox Billing**:

Следуйте [инструкциям по интеграции FunnelFox Billing](https://funnelfox.com/docs/billing/integration-billing-funnelfox).

**SolidGate**:
1. В вашем дашборде Solidgate перейдите в **Developers > Apple Pay Domains**.
2. Нажмите **+ Add new domain** и вставьте домен вашего проекта (из **Settings > Domains** в FunnelFox). При необходимости добавьте также ваш кастомный домен.
3. Чтобы использовать Apple Pay в режиме предварительного просмотра, также добавьте `http://app.funnelfox.com/`.

## Создание и настройка веб-пейвола \{#create-and-configure-a-web-paywall\}
1. На странице со списком веб-пейволов нажмите **Create a paywall**.
2. Введите название пейвола и нажмите **Create**.

   
   <img src="/assets/shared/img/web-paywall-configuration-2.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
3. Вы будете перенаправлены на базовый шаблон с двумя вариантами подписки и кнопкой покупки через Apple Pay.

   На первом экране отображается список планов подписки. Второй и третий экраны — это экраны оформления заказа. Каждый экран соответствует одному из предлагаемых вами планов. Если у вас только один план, удалите лишний экран. Если планов больше, нужно продублировать экраны оформления заказа.

   Последний экран, который видит пользователь после успешной покупки, — это место, где нужно чётко указать, что он может вернуться в ваше приложение.

   
   <img src="/assets/shared/img/web-paywall-configuration-10.gif"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
4. Настройте список планов: добавьте или удалите планы и цены. Все цены и планы на экране не добавляются автоматически, поэтому их нужно настраивать вручную.
   
   <img src="/assets/shared/img/web-paywall-configuration-8.gif"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
5. Добавьте или настройте экран оформления заказа для каждого плана. Рекомендуем добавлять итоговую сумму на каждый экран оформления, чтобы пользователи видели стоимость до нажатия кнопки покупки.
6. На экранах оформления заказа уже есть кнопка Apple Pay. Чтобы она работала, настройте на каждом экране следующее:
   1. **Product type**: выберите, хотите ли вы добавить пробный период или скидку.
   2. **Trial period**: укажите длительность пробного периода.
   3. **Product**: выберите продукт из вашего платёжного провайдера.
      :::important
      Убедитесь, что продукт добавлен в Adapty. Иначе результат покупки будет установлен по умолчанию.
      :::
   4. **Subscription discount**: при необходимости выберите купон из вашего платёжного провайдера.
   
   <img src="/assets/shared/img/web-paywall-configuration-6.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
7. Теперь нужно связать планы с экранами оформления заказа. На экране выбора плана нажмите кнопку **Continue** и выберите целевой экран для каждого плана.
   
   <img src="/assets/shared/img/web-paywall-configuration-9.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

Когда пейвол будет готов, нужно получить его ссылку для активации в Adapty. Способ получения ссылки зависит от того, тестируете вы его или запускаете в продакшн:

1. **Для тестирования в песочнице**: нажмите **Preview** в правом верхнем углу и скопируйте ссылку.
2. **Для продакшна**: нажмите **Publish** в правом верхнем углу. Нажмите **Home** и скопируйте ссылку из столбца **URL**.

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

Готово! Используйте эту ссылку, чтобы [продолжить настройку](web-paywall#step-2-trigger-the-paywall).