Приклади сторінок¶

Покрокова послідовність трансформації платіжної сторінки не залежить від того, як вона відображається в окремому вікні або всередині платіжного віджету. Але залежить від налаштувань обраного процесу оплати.

Checkout використовує адаптивний веб-дизайн для відображення елементів. Тому, коли змінюється ширина батьківської сторінки, вміст всередині iFrame і lightbox автоматично підлаштовується під нові розміри.

Залежно від кількості внутрішніх елементів може збільшуватися висота iFrame або lightbox, а елементи батьківської сторінки, розташовані нижче за iFrame, зміщуються по вертикалі.

IFrame, де міститься Checkout, додається безпосередньо на сторінку сайту. І коли клієнти перенаправляються для оплати, це виглядає так, ніби вони не залишають ваш сайт.

Lightbox — модальне вікно із затемненням батьківської сторінки, відображається поверх сторінки вашого сайту.

Нижче варіант відображення Checkout всередині lightbox з платіжними деталями (для неіснуючого веб-магазину):

Сторінка вибору методу платежу¶

Це перша сторінка, яка відображається клієнту, і залежить від:

країни клієнта;
налаштованих платіжних методів у вашому обліковому записі.

Альтернативний варіант

Як альтернатива, ви можете пропонувати вибір методу оплати на ваших сторінках, а потім відправляти метод CASCAD. У такому разі ця сторінка пропускається, процес оплати для клієнта – скорочується.

Окрема сторінка (в браузері ПК):

Модальне вікно:

Процес оплати¶

Оплата карткою¶

Клієнти можуть безпечно ввести свої платіжні дані на сторінці введення карткових даних, а також змінити платіжний метод або скасувати створення платежу.

3D Secure¶

Проміжний екран з iFrame для 3DS-автентифікації та підтвердження особи платника. У клієнтів є 30 хвилин для введення коду підтвердження, після чого відображається повідомлення про закінчення терміну для підтвердження платежу.

Тимчасовий проміжок не можна змінити.

Note

У нас немає можливості контролювати відображення 3DS-контенту в iFrame. Якщо вміст, який надсилає банк-емітент, перевищує рекомендовані розміри схеми, у вікні 3DS-автентифікації з'являться смуги прокручування.

Платіжні методи без полів для введення¶

Платіжні методи з полями для введення¶

У прикладі нижче в браузері включений JavaScript і дані в полях валідуються (перевіряється формат введення) в режимі реального часу. Кнопка "Оплатити" не буде активною, доки всі обов'язкові поля не будуть правильно заповнені.

Приклад інструкції для оплати у банку за рахунком¶

Приклад інструкції для оплати у терміналі самообслуговування¶

Тестовий режим оплати¶

Перенаправлення до платіжного шлюзу¶

Note

Частина платіжних методів може бути використана лише за інтеграції з перенаправленням на окрему сторінку на оплату. Також ми рекомендуємо повідомити клієнтам, що JavaScript та обробка сторонніх cookie-файлів повинні бути дозволені до вибору методу оплати.

Підсумкова сторінка¶

Фінальний статус платежу відображається на підсумковій сторінці.

Note

Ви можеме використовувати сторінку CASCAD за замовчуванням. Однак, щоб бути впевненими, що клієнт повернеться на ваш сайт, ми рекомендуємо створити власну підсумкову сторінку.

Приклади сторінок¶

Сторінка вибору методу платежу¶