Документація iFrame
Модуль оплати Monobank можна інтегрувати на ваш сайт за допомогою iFrame. Це дозволяє клієнтам здійснювати платежі безпосередньо на вашому сайті без перенаправлення на зовнішні сторінки.
Створення рахунку для оплати
Виставлення рахунку відбувається за допомогою API створення рахунку.
Важливо передати додатковий параметр в запиті "displayType": "iframe"
Технічна реалізація iFrame
Базовий HTML-код
html
<iframe
id="payFrame"
title="monopay"
width="600"
height="600"
src="{{pageUrl}}"
allow="payment *"
style="border-radius: 24px;"
></iframe>
Обов'язкові параметри
| Параметр | Значення | Опис |
| id | payFrame | Ідентифікатор фрейму |
| title | monopay | Назва фрейму для доступності |
| allow | payment * | Дозвіл на обробку платежів (обов'язковий параметр) |
| src | {{pageUrl}} | URL сторінки оплати, який надається після створення рахунку |
Вимоги до розмірів
- Мінімальна ширина: 576px
- Мінімальна висота: 576px
- Радіус заокруглення: 24px
iFrame повинен відображатися по центру екрану.
Рекомендується використовувати CSS для центрування:
css
.iframe-container {
display: flex;
justify-content: center;
align-items: center;
}
Обробка подій iFrame
Приклад:
javascript
function listenFrame(event) {
const data = JSON.parse(event.data || "{}");
// Обробка кліку по кнопці "назад" або "повернутись на сайт"
if (data.message === "close-button") {
closeModal();
}
// Обробка переходу на мобільному пристрої через діпклінк
if (data.message === "monopay-link") {
window.location.href = data.value;
}
}
window.addEventListener("message", listenFrame, false);
Де:
- close-button: клік по кнопці "назад" або "повернутись на сайт"
- monopay-link: перехід через діпклінк на мобільному пристрої
Приклад повної інтеграції
Повний приклад
// html
<div class="iframe-container">
<iframe
id="payFrame"
title="monopay"
width="600"
height="600"
src="{{pageUrl}}"
allow="payment *"
style="border-radius: 24px;"
></iframe>
</div>
// javascript
// Обробка подій інтерфейсу
function listenFrame(event) {
const data = JSON.parse(event.data || "{}");
// Кнопка "назад" або "повернутись назад"
if (data.message === "close-button") {
closeModal();
}
// Діпклінк для мобільного додатку
if (data.message === "monopay-link") {
window.location.href = data.value;
}
}
window.addEventListener("message", listenFrame, false);
// Допоміжні функції
function closeModal() {
// Ваш код для закриття модального вікна
}
// css
.iframe-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}