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" id="domains">2</span> Нажмите кнопку <span class="u-richtext-element">Настройка Hosted Fields</span> и укажите домены, на которых будут использоваться Hosted Fields. Вводите каждый домен или поддомен с новой строки, без «https://», например: <span class="u-richtext-element">mysite.com</span>. Чтобы разрешить все поддомены, используйте маску со звёздочкой, например: <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 работала корректно, выполните две настройки:
<span class="u-richtext-counter">1</span>Добавьте атрибут <span class="u-richtext-element">allow="payment *"</span> в тег <span class="u-richtext-element">iframe</span>. Пример:
<iframe id= "myPaymentIframe" allow= "payment *" src= "..." > <span class="u-richtext-counter">2</span>Разместите сертификат Apple Pay на сервере домена. Сертификат и инструкция по его размещению доступны в разделе настроек Hosted Fields в личном кабинете Allpay.
<span id=google-pay>Кнопка Google Pay</span> Чтобы кнопка Google Pay работала на вашем домене, домен необходимо верифицировать в Google, а затем прописать полученный Google Merchant ID в Allpay.
<span class="u-richtext-counter">1</span>Создайте профиль в Google Pay & Wallet Console.
<span class="u-richtext-counter">2</span>В разделе Google Pay API → Web integration укажите ваш домен и выберите тип интеграции Gateway.
<span class="u-richtext-counter">3</span>Приложите скриншоты платежного процесса (buyflow) с вашего сайта. После активации Google Pay в платежных модулях Allpay кнопка Google Pay уже будет отображаться, но пока не будет работать. Это позволит вам приложить скриншоты Item selection, Pre-purchase screen и Payment method screen.
Для Google Pay API payment screen приложите скриншот ошибки, которая появляется при нажатии на кнопку. Для Post-purchase screen приложите скриншот страницы успешной оплаты, даже если на ней не упоминается Google Pay.
<span class="u-richtext-counter">4</span>Подайте заявку и дождитесь одобрения Google. Рассмотрение может занять несколько рабочих дней.
<span class="u-richtext-counter">5</span>Скопируйте ваш Google Merchant ID и вставьте его в настройках Hosted Fields в личном кабинете Allpay. В течение нескольких дней ID пропишется в платежной системе, после чего платежи через Google Pay заработают.
Ваш сайт может не пройти проверку Google, если он не соответствует Google Pay and Wallet API's Acceptable Use Policy или Google’s Terms of Service.
Если вы представляете НКО (амуту) следуйте этим инструкциям Google.
Встравание в mobile app (WebView) Если вы встраиваете страницу оплаты в мобильное приложение с помощью WebView (android.webkit.WebView или WKWebView), некоторые способы оплаты могут работать некорректно. Например, Bit или подтверждение 3D Secure могут перенаправлять пользователя в платёжное приложение либо приложение банка с помощью специальных ссылок, таких как <span class="u-richtext-element">intent://</span>
В отличие от обычного браузера, WebView не всегда обрабатывает такие переходы автоматически. В результате пользователь может не перейти во внешнее приложение и не завершить оплату.
Рекомендуем открывать страницу оплаты через системную браузерную вкладку:
Chrome Custom Tabs — на Android; SFSafariViewController — на iOS. Эти компоненты работают аналогично обычному мобильному браузеру и лучше поддерживают переходы в платёжные и банковские приложения.
Если необходимо использовать WebView, обрабатывайте навигацию на стороне мобильного приложения:
обычные ссылки <span class="u-richtext-element">http://</span> и <span class="u-richtext-element">https://</span> открывайте внутри WebView; ссылки с другими схемами передавайте операционной системе для открытия соответствующего приложения; если приложение не установлено, используйте предусмотренную ссылку для перехода в браузер, App Store или Google Play. Эта особенность связана с обработкой внешних ссылок внутри WebView, а не с работой Hosted Fields.
