Гід з інтеграції Checkout: методи¶

Вимоги¶

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

• У вас немає системи авторизації користувача на сайті або системи управління замовленнями на вашій стороні. В обробці даних замовлення ви покладаєтеся на CASCAD.
• Кінцевий користувач (клієнт) отримає доступ до вашого продукту/послуги лише після завершення оплати.

Інтеграція Checkout можлива будь-яким з наведених нижче способів, що базуються на взаємодії з Checkout API.

Ознайомтеся з можливими методами інтеграції, щоб вибрати найбільш підходящий.

Методи¶

Платіжний віджет¶

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

Віджет інтегрується безпосередньо на сторінку сайту: клієнт обирає метод оплати, заповнює деталі платежу та підтверджує платіж усередині віджету.

<script async src="https://unpkg.com/@paycore/merchant-widget-js@0.1.7/dist/merchantWidget.umd.min.js"></script>
<script>
window.widget.init({
    selector: "HTML_ID_SELECTOR_TO_INSERT_WIDGET_INTO",
    public_key: "YOUR_PUBLIC_KEY",
    amount: 100.00,
    currency: "UAH",
});
</script>

Перейдіть до покрокового опису для базовой интеграции Платежного виджета.

Посилання на оплату¶

Посилання на оплату — швидке рішення прийому платежів. Її необхідно тільки створити і (за потреби) налаштувати, потім скопіювати і додати в сніпет коду на вашій сторінці.

У найпростішому випадку це HTML форма, куди вводяться дані платежу, які будуть передані за допомогою GET запиту. Це не вимагає введення даних від вашого клієнта, оскільки всі поля приховані.

<form action="https://gate.cascad.com/hpp/" method="GET">
    <input type="hidden" name="public_key" value="<your-public-key>" />
    <input type="hidden" name="reference_id" value="<unique-reference-id>" />
    <input type="hidden" name="currency" value="UAH" />
    <input type="hidden" name="description" value="Some goods" />
    <input type="hidden" name="amount" value="100" />
    <input type="submit" value="Pay with CASCAD" />
</form>

Віджет чи посилання?¶

Варіанти вбудовування¶

• Стандартний варіант: перенаправлення до Checkout на окремій сторінці.
• Вбудовування: відображення Checkout всередині вбудованого елемента на існуючій сторінці сайту.

Checkout на окремій сторінці¶

Checkout відображається на окремій сторінці (вкладці браузера). Такий спосіб підтримує понад 60 платіжних методів, але коли клієнт перенаправляється до Checkout, у рядку браузера відкрито відображається адреса сторінки.

window.payment_widget.init({
    selector: "HTML_ID_SELECTOR_TO_INSERT_WIDGET_INTO",
    flow: "redirect",
    public_key: "YOUR_PUBLIC_KEY",
    amount: "AMOUNT_OF_INVOICE",
    currency: "UAH",
});

Вбудовування¶

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

Для відображення та розміщення елементів Checkout використовує адаптивний дизайн. Це означає, що у випадку зміні ширини батьківської сторінки (сторінки, на якій розташований елемент), вміст Checkout автоматично підлаштовується та змінює розміри, а також розташування елементів. Залежно від кількості внутрішніх елементів Checkout, висота сторінки може збільшуватися, а вміст батьківської сторінки, розташований нижче елемента iFrame, буде зрушений вниз по вертикалі.

window.payment_widget.init({
    selector: "HTML_ID_SELECTOR_TO_INSERT_WIDGET_INTO",
    flow: "iframe",
    public_key: "YOUR_PUBLIC_KEY",
    amount: "AMOUNT_OF_INVOICE",
    currency: "UAH",
})

Власна платіжна сторінка¶

Варіант інтеграції за API, який дає велику гнучкість і контроль над процесами, але вимагає знання програмування. Такий варіант підійде у разі:

• якщо на сайті використовується система авторизації користувачів та/або система управління замовленнями;
• або ж потрібно більше опцій, ніж ті, що надає Checkout (на кшталт можливості зміни ціни або додавання дати закінчення пробного періоду).