Hosted Fields позволяют встроить поля ввода карты на ваш сайт или в приложение, полностью адаптируя их под дизайн системы. Они создают ощущение целостности интерфейса и исключают необходимость перенаправления клиента на внешнюю страницу оплаты. Это повышает удобство использования и конверсию.
Поля ввода для номера карты, даты истечения и CVC представляют собой iFrame. Мы даем возможность полностью кастомизировать их CSS и встроить на ваш сайт в виде единого фрейма.
Видеоинструкция VIDEO
Настройка <span class="u-richtext-counter">1</span> В разделе <span class="u-richtext-element">Настройки</span> → <span class="u-richtext-element">Интеграции</span> → <span class="u-richtext-element">Мои сайты</span> включите опцию Hosted Fields для нужной интеграции.
<span class="u-richtext-counter">2</span> Нажмите на кнопку <span class="u-richtext-element">Настройка Hosted Fields</span> укажите домен на котором будет производиться оплата. Домены и поддомены вводятся через перенос строки без "https://" и в следущем формате: <span class="u-richtext-element">mysite.com</span>. При необходимости адаптируйте стили CSS для полей ввода.
<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> На странице оплаты разместите следующий скрипт:
<script src= "https://allpay.to/js/allpay-hf.js" ></script>
< script >
let Allpay = new AllpayPayment(
{
iframeId : 'iframe_id' ,
onSuccess : function ( ) { alert( 'Payment success' ); },
onError : function ( error_n, error_msg ) { alert( 'Payment error: ' + error_n + ' (' + error_msg + ')' ); }
}
);
</ 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>.
Также кнопки не отображаются в тестовом режиме и в рабочем режиме для оплат с опциями рассрочки и подписки.
Кнопка Apple Pay В данный момент кнопка Apple Pay не работает внутри Hosted Fields. Мы работаем над решением проблемы. Чтобы кнопка Apple Pay работала корректно, задайте атрибут <span class="u-richtext-element">allow="payment *"</span> в теге <span class="u-richtext-element">iframe</span>. Пример:
<iframe id= "myPaymentIframe" allow= "payment *" src= "..." >
