Hosted Fields: как встроить форму оплаты на сайт

Hosted Fields позволяют встроить поля ввода карты на ваш сайт или в приложение, полностью адаптируя их под дизайн системы. Они создают ощущение целостности интерфейса и исключают необходимость перенаправления клиента на внешнюю страницу оплаты. Это повышает удобство использования и конверсию.

Поля ввода для номера карты, даты истечения и CVC представляют собой iFrame. Мы даем возможность полностью кастомизировать их CSS и встроить на ваш сайт в виде единого фрейма.

Видеоинструкция

Настройка

<span class="u-richtext-counter">1</span> В разделе <span class="u-richtext-element">Настройки</span> → <span class="u-richtext-element">Интеграции по API</span> включите Hosted Fields для нужной интеграции.

<span class="u-richtext-counter">2</span> Нажмите на кнопку <span class="u-richtext-element">Настройка Hosted Fields</span>, адаптируйте стили CSS и укажите домены, на которых будет размещен iFrame. Домены вводятся через перенос строки. Поддомены необходимо добавлять отдельно или указывать в формате *.domain.com.

<span class="u-richtext-counter">3</span> На странице оплаты вашего сайта разместите iFrame, задайте ему произвольный параметр <span class="u-richtext-element">id</span>, а в параметре <span class="u-richtext-element">src</span> укажите ссылку на оплату (payment_url), которую возвращает Allpay в ответ на запрос на создание платежа (см. раздел Payment request в документации API). Ссылки на оплату также можно генерировать через Allpay API Tester.‍

<span class="u-richtext-counter">4</span> На странице оплаты разместите следующий скрипт:

1<script src="https://allpay.to/js/allpay-hf.js"></script>
2    <script>
3    let Allpay = new AllpayPayment(
4        {
5            iframeId: 'iframe_id',
6            onSuccess: function() { alert('Payment success'); },
7            onError: function(error_n, error_msg) { alert('Payment error: ' + error_n + ' (' + error_msg + ')'); }
8        }
9    );
10    </script>

‍

В скрипте замените следующие параметры на ваши:

• <span class="u-richtext-element">iframeId</span> — значение id вашего iFrame.
• <span class="u-richtext-element">onSuccess</span> — обработчик успешного завершения платежа (что должно произойти после успешной оплаты).
• <span class="u-richtext-element">onError</span> — обработчик ошибки платежа. Используя шаблон в скрипте, вы можете выводить текст ошибки оплаты.

<span class="u-richtext-counter">5</span> Для запуска процесса выполните функцию <span class="u-richtext-element">Allpay.pay()</span>. Например, назначив ее для кнопки «Pay»:

<button onclick="Allpay.pay();">Pay</button>

‍

Рассрочка

Если при создании платежа вы включили для клиента опцию рассрочки, передав значение в параметре <span class="u-richtext-element">inst</span>, тогда во фрейме автоматически появится поле для выбора количества платежей.

Кнопки быстрой оплаты

Кнопки Apple Pay и Bit не будут отображаться в предпросмотре и во фрейме, если они не активированы в разделе <span class="u-richtext-element">Настройки</span> → <span class="u-richtext-element">Модули</span>.

Также кнопки не отображаются в тестовом режиме и в рабочем режиме для оплат с опциями рассрочки и подписки.