Перейти к основному содержимому

Платежный виджет v7 (7.1.0)

Платежный виджет — всплывающая форма на сайте Партнера без перенаправления на сервер Системы для ввода реквизитов карты Клиента. Для ее использования на сервере Партнера необходимо провести ряд действий описанных ниже.

Установка


Script

<script src="https://proxyd.tarlanpayments.kz/tarlan/widget/v7/7.1.0/widget.js"></script>

Npm

npm install @tarlanpayments/widget@latest

Yarn

yarn add @tarlanpayments/widget@latest

Использование


Платежный виджет состоит из двух главных функций - checkout и genIframe.

checkout - отправляет запрос на получение ссылки платежной формы и возвращает ее. Работает со всеми формами.

genIframe - создает модальное окно с iframe платежной формы. Работает только с классической формой.

genIframe

<button id="make-payment">Pay</button>

Тестовый вызов checkout

Внимание

Не используйте параметр hashSecretKey: true в production, так как это небезопасно! Для production вам нужно хэшировать secretKey с referenceId как описано в "боевых" примерах.

// Данные тестовые, но позволяют получить ссылку на платежную форму

function generateForm() {
var checkout = window.TarlanPayments.checkout;

checkout(
{
reference_id: Date.now(), // номер заказа
request_url: 'https://tarlanpayments.kz', // адрес для перенаправления после платежа
back_url: 'https://dev.api.tarlanpayments.kz/check.php', // адрес для отправки коллбека
description: 'оплата заказа', // описание платежа
amount: 100, // сумма заказа
merchant_id: 1, // номер мерчанта
is_test: 1, // опция для тестовой оплаты (1 - тестовая оплата, 0 - боевая оплата)
secret_key: '123456', // ключ выданный для мерчанта
hashSecretKey: true
},
{
successCb: function (data) {
console.log(data);
},
failureCb: function (err) {
console.log(err);
}
}
);
}

document.getElementById('make-payment').addEventListener('click', generateForm);

Боевой вызов checkout

Поле secret_key необходимо формировать конкатенацией параметров: reference_id + секретный ключ (Ваш ID заказа и секретный ключ в вашем личном кабинете). Полученный результат необходимо обернуть в bcrypt, где модификатор входа хэш-функции (соль/round) равен 10.


function generateForm() {
var checkout = window.TarlanPayments.checkout;

checkout(
{
reference_id: ваше любое значение, // номер заказа
request_url: 'https://site', // адрес для перенаправления после платежа
back_url: ваш callback url, либо 'https://dev.api.tarlanpayments.kz/check.php', // адрес для отправки коллбека
description: 'оплата заказа', // описание платежа
amount: 100, // сумма заказа
merchant_id: ваш номер мерчанта, // номер мерчанта
is_test: 0, // опция для тестовой оплаты (1 - тестовая оплата, 0 - боевая оплата)
secret_key: значение составленное из reference_id и выданным secret_key,
/* Поле secret_key необходимо формировать конкатенацией параметров: reference_id + секретный ключ(Ваш ID заказа и секретный ключ в вашем личном кабинете). Полученный результат необходимо обернуть в bcrypt, где модификатор входа хэш-функции (соль/round) равен 10. */
},
{
successCb: function (data) {
console.log(data);
},
failureCb: function (err) {
console.log(err);
}
}
);
}

document.getElementById('make-payment').addEventListener('click', generateForm);

Тестовый вызов genIframe

Внимание

Не используйте параметр hashSecretKey: true в production, так как это небезопасно! Для production вам нужно хэшировать secretKey с referenceId как описано в "боевых" примерах.

// Данные тестовые, но позволяют получить ссылку на платежную форму

function generateForm() {
var genIframe = window.TarlanPayments.genIframe;

genIframe(
{
reference_id: Date.now(), // номер заказа
request_url: 'https://tarlanpayments.kz', // адрес для перенаправления после платежа
back_url: 'https://dev.api.tarlanpayments.kz/check.php', // адрес для отправки коллбека
description: 'оплата заказа', // описание платежа
amount: 100, // сумма заказа
merchant_id: 1, // номер мерчанта
is_test: 1, // опция для тестовой оплаты (1 - тестовая оплата, 0 - боевая оплата)
secret_key: '123456', // ключ выданный для мерчанта
hashSecretKey: true
},
{
failureCb: function (err) {
console.log(err);
},
onClose: function () {
console.log('on close');
}
}
);
}

document.getElementById('make-payment').addEventListener('click', generateForm);

Боевой вызов genIframe

Поле secret_key необходимо формировать конкатенацией параметров: reference_id + секретный ключ (Ваш ID заказа и секретный ключ в вашем личном кабинете). Полученный результат необходимо обернуть в bcrypt, где модификатор входа хэш-функции (соль/round) равен 10.

// Данные тестовые, но позволяют получить ссылку на платежную форму

function generateForm() {
var genIframe = window.TarlanPayments.genIframe;

genIframe(
{
reference_id: ваше любое значение, // номер заказа
request_url: 'https://site', // адрес для перенаправления после платежа
back_url: ваш callback url, либо 'https://dev.api.tarlanpayments.kz/check.php', // адрес для отправки коллбека
description: 'оплата заказа', // описание платежа
amount: 100, // сумма заказа
merchant_id: ваш номер мерчанта, // номер мерчанта
is_test: 0, // опция для тестовой оплаты (1 - тестовая оплата, 0 - боевая оплата)
secret_key: значение составленное из reference_id и выданным secret_key,
/* Поле secret_key необходимо формировать конкатенацией параметров: reference_id + секретный ключ(Ваш ID заказа и секретный ключ в вашем личном кабинете). Полученный результат необходимо обернуть в bcrypt, где модификатор входа хэш-функции (соль/round) равен 10. */
},
{
failureCb: function (err) {
console.log(err);
},
onClose: function () {
console.log('on close');
}
}
);
}

document.getElementById('make-payment').addEventListener('click', generateForm);

Api


checkout(params, callbacks)

type Checkout = (
params: WidgetParams,
settings: {
successCb?: (data: GetResponseFromApiReturnValues) => void;
failureCb?: (err: unknown) => void;
}
) => void;

1 параметр checkout = Основные параметры + Доп параметры
2 параметр checkout = Коллбэки successCb, failureCb

genIframe(params, callbacks)

type GenIframe = (
params: WidgetParams,
settings: {
failureCb?: (err: unknown) => void;
onClose?: () => void;
}
) => void;

1 параметр checkout = Основные параметры + Доп параметры
2 параметр checkout = Коллбэки failureCb, onClose

Основные параметры

НазваниеТипОписаниеОбязательность
reference_idStringНомер заказа на стороне мерчантаДа
request_urlStringАбсолютная ссылка на сайт мерчанта для перенаправления пользователя.Да
back_urlStringАбсолютная ссылка на сайт мерчанта для отправки статуса платежа. Детальное описание запроса ниже.Да
descriptionStringОписание платежаДа
amountIntegerСумма заказаДа
merchant_idIntegerID мерчантаДа
user_idIntegerID пользователяНет
secret_keyStringПоле secret_key необходимо формировать конкатенацией параметров: reference_id + секретный ключ (Ваш ID заказа и секретный ключ в вашем личном кабинете). Полученный результат необходимо обернуть в bcrypt, где модификатор входа хэш-функции (соль/round) равен 10.Да
is_testBooleanТестовый платежНет
user_emailStringEmail пользователяНет

Дополнительные параметры

НазваниеТипОписаниеОбязательность
hashSecretKeyBooleanПолезен для тестов, дефолтное значение - false

true - хэширование происходит на стороне виджета, в secret_key нужно будет указать только secret_key
false - хэширование происходит на стороне мерчанта
Нет
type"payin" | "payout" | "card-linking"Тип платежа, дефолтное значение - payin
payin - Прием
payout - Выплата
card-linking - Привязка карты
Нет
form"classic" | "composed-cards" | "modern"Вид формы, дефолтное значение - classicНет
isDevBooleanПереключение запроса на дев или продакшн сервер, дефолтное значение - falseНет