Платежный виджет 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 платежной формы. Работает только с классической формой.
<button id="make-payment">Pay</button>
Тестовый вызов checkout
Внимание
Не используйте параметр hashSecretKey: true
в production, так как это небезопасно!
Для production вам нужно хэшировать secretKey с referenceId как описано в "боевых" примерах.
- Script
- Npm, yarn
// Данные тестовые, но позволяют получить ссылку на платежную форму
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);
// Данные тестовые, но позволяют получить ссылку на платежную форму
import { checkout } from '@tarlanpayments/widget';
const generateForm = () => {
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);
}
}
);
}
...Вызов
Боевой вызов checkout
Поле secret_key
необходимо формировать конкатенацией параметров: reference_id
+ секретный ключ
(Ваш ID заказа и секретный ключ в вашем личном кабинете). Полученный результат необходимо обернуть в bcrypt
, где модификатор входа хэш-функции (соль/round) равен 10
.
- Script
- Npm, yarn
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);
import { checkout } from '@tarlanpayments/widget';
const generateForm = () => {
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);
}
}
);
}
...Вызов
Тестовый вызов genIframe
Внимание
Не используйте параметр hashSecretKey: true
в production, так как это небезопасно!
Для production вам нужно хэшировать secretKey с referenceId как описано в "боевых" примерах.
- Script
- Npm, yarn
// Данные тестовые, но позволяют получить ссылку на платежную форму
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);
// Данные тестовые, но позволяют получить ссылку на платежную форму
import { genIframe } from '@tarlanpayments/widget';
const generateForm = () => {
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');
}
}
);
}
...Вызов
Боевой вызов genIframe
Поле secret_key
необходимо формировать конкатенацией параметров: reference_id
+ секретный ключ
(Ваш ID заказа и секретный ключ в вашем личном кабинете). Полученный результат необходимо обернуть в bcrypt
, где модификатор входа хэш-функции (соль/round) равен 10
.
- Script
- Npm, yarn
// Данные тестовые, но позволяют получить ссылку на платежную форму
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);
// Данные тестовые, но позволяют получить ссылку на платежную форму
import { genIframe } from '@tarlanpayments/widget';
const generateForm = () => {
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');
}
}
);
}
...Вызов
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_id | String | Номер заказа на стороне мерчанта | Да |
request_url | String | Абсолютная ссылка на сайт мерчанта для перенаправления пользователя. | Да |
back_url | String | Абсолютная ссылка на сайт мерчанта для отправки статуса платежа. Детальное описание запроса ниже. | Да |
description | String | Описание платежа | Да |
amount | Integer | Сумма заказа | Да |
merchant_id | Integer | ID мерчанта | Да |
user_id | Integer | ID пользователя | Нет |
secret_key | String | Поле secret_key необходимо формировать конкатенацией параметров: reference_id + секретный ключ (Ваш ID заказа и секретный ключ в вашем личном кабинете). Полученный результат необходимо обернуть в bcrypt, где модификатор входа хэш-функции (соль/round) равен 10. | Да |
is_test | Boolean | Тестовый платеж | Нет |
user_email | String | Email пользователя | Нет |
Дополнительные параметры
Название | Тип | Описание | Обязательность |
---|---|---|---|
hashSecretKey | Boolean | Полезен для тестов, дефолтное значение - false true - хэширование происходит на стороне виджета, в secret_key нужно будет указать только secret_key false - хэширование происходит на стороне мерчанта | Нет |
type | "payin" | "payout" | "card-linking" | Тип платежа, дефолтное значение - payin payin - Прием payout - Выплата card-linking - Привязка карты | Нет |
form | "classic" | "composed-cards" | "modern" | Вид формы, дефолтное значение - classic | Нет |
isDev | Boolean | Переключение запроса на дев или продакшн сервер, дефолтное значение - false | Нет |