Гид по интеграции Checkout: методы¶

Требования¶

Checkout — готовая платежная страница — наиболее простой и быстрый способ интеграции страницы для оплаты на вашем сайте. Интеграция не требует навыков программирования, но всё же есть общие обязательные условия:

У вас нет системы авторизации пользователя на сайте или системы управления заказами на вашей стороне, и вы полагаетесь на Spoynt в обработке данных заказа.
Конечный пользователь (клиент) получит доступ к вашему продукту/услуге только после завершения оплаты.

Интеграция Checkout возможна любым из представленных ниже способов, базирующихся на взаимодействии с Checkout API.

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

Методы¶

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

Checkout

Платежный виджет — проще как метод интеграции и требует минимальных технических знаний. Это элемент, который вы добавляете на страницу сайта, чтобы не перенаправлять клиента на отдельную страницу.

Виджет интегрируется непосредственно на страницу сайта — клиент выбирает метод оплаты, заполняет детали платежа и подтверждает платеж внутри виджета.

Простейший вариант интеграции

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

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

Ссылка на оплату¶

Widget

Ссылка на оплату — более быстрое решение для приема платежей. Её необходимо только создать и (при необходимости) настроить, затем скопировать и добавить в сниппет кода на вашей странице.

В простейшем случае — это HTML форма, куда вводятся данные платежа, которые будут переданы с помощью GET запроса. Это не требует ввода данных от вашего клиента, так как все поля скрыты.

Простейший вариант интеграции

<form action="{BASE COM API URL}/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="USD" />
    <input type="hidden" name="description" value="Some goods" />
    <input type="hidden" name="amount" value="100" />
    <input type="submit" value="Pay with Spoynt" />
</form>

Виджет или ссылка?¶

Особенность	Платежный виджет	Ссылка на оплату
Технология	JavaScript	HTTP GET запрос
Требует валидации	✔
Есть обработка событий и ошибок	✔
Можно отправить в Email или SMS		✔
Можно передать в виде QR-кода		✔

Варианты встраивания¶

Стандартный вариант: перенаправление к Checkout на отдельной странице.
Встраивание: отображение Checkout внутри встроенного элемента на существующей странице сайта.

Checkout на отдельной странице¶

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

Платежный виджет

Установите значение ключа flow: "redirect":

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

Встраивание¶

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

Checkout использует для отображения и размещения элементов адаптивный дизайн. Это означает, что при изменении ширины родительской страницы (страницы, на которой расположен элемент), содержимое Checkout автоматически подстраивается и меняет размеры и расположение элементов. В зависимости от количества внутренних элементов Checkout высота страницы может увеличиваться, а содержимое родительской страницы, которое расположено ниже элемента iFrame, будет сдвинуто вниз по вертикали.

Платежный виджет

Установите значение ключа flow как iframe и укажите ID элемента, в который встраивается виджет.

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

Собственная платежная страница¶

Вариант интеграции по API, который дает большую гибкость и контроль над процессами, но требует знания программирования. Такой вариант подойдёт в случае:

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