Платежи через виджет
Подключение
Для того, чтобы на вашем сайте встроить платежный виджет, необходимо подключить JavaScript-код на странице оплаты.
<script src="https://paymaster.ru/cpay/sdk/payment-widget.js"></script>
Для отображения виджета необходимо вызвать функцию инициализии, передав туда необходимые параметры.
function pay () {
var paymentWidget = new cpay.PaymentWidget();
paymentWidget.init({
merchantId: "cf128151-127b-44ed-bde5-26c531cad20d",
invoice: {
description: "test payment"
},
amount: {
value: 10.50,
currency: "RUB"
}
});
}
Функция инициализии может быть вызвана, например, по нажатию кнопки "Оплатить".
<button onclick="pay()">Оплатить</button>
Описание параметров
Обязательные параметры выделены жирным шрифтом.
Параметр | Тип | Описание |
merchantId | string | Идентификатор магазина |
invoice | Детали счета | |
description | string | Назначение платежа (макс. 255) |
orderNo | string | Номер заказа в системе магазина (макс. 50) |
expires | string | Срок действия счета (формат ISO 8601, например 2022-12-01T00:00:00Z ) |
url | string | Ссылка на оплату, полученная через API |
amount | Стоимость | |
value | number | Сумма к оплате |
currency | string | Код валюты (например RUB ) |
paymentMethod | string | Способ оплаты |
customer | Данные пользователя | |
string | E-mail пользователя | |
phone | string | Телефон пользователя |
receipt | Данные чека | |
client | Данные покупателя | |
string | E-mail покупателя | |
phone | string | Телефон покупателя |
name | string | Наименование компании (макс. 150) |
inn | string | ИНН компании |
items | Перечисление позиций чека (макс. 110) | |
name | string | Наименования (макс. 255) |
quantity | number | Количество (например 5.425 ) |
price | number | Цена (например 10.50 ) |
excise | number | Акциз (например 10.50 ) |
product | ||
code | string | Код товара (формат base64) |
country | string | Код страны происхождения (например ru ) |
declaration | string | Номер таможенной декларации (макс. 32) |
vatType | string | Ставка НДС |
paymentSubject | string | Признак предмета расчета |
paymentMethod | string | Признак способа расчета |
agentType | string | Признак агента |
supplier | Данные поставщика | |
name | string | Наименование поставщика (макс. 150) |
inn | string | ИНН поставщика |
phone | string | Телефон поставщика |
paymentForm | Данные платежной формы | |
theme | string | Тема (светлая light или темная dark ) |
primaryColor | string | Фирменный цвет (hex формат, например #a5227d ) |
productCard | Карточка товара / услуги | |
title | string | Наименование товара / услуги (макс. 80) |
description | string | Описание товара / услуги (макс. 250) |
imageUrl | string | URL изображения товара |
fields | Перечисление дополнительных полей (макс. 30) | |
type | string | Тип поля (например input , select , checkbox ) |
name | string | Уникальное внутреннее название поля (макс. 150) |
label | string | Название поля для отображения (макс. 30) |
hint | string | Примечание поля (только для типа поля input , макс. 40) |
required | boolean | Обязательность заполнения поля (только для типов поля input и select ) |
selectOptions | Перечисление опций для выбора (только для типа поля select ) | |
label | string | Название опции (макс. 30) |
value | string | Значение опции (макс. 30) |
additionalAmount | number | Добавочная сумма (например 10.50 ) |
additionalAmount | number | Добавочная сумма (только для типа поля checkbox , например 10.50 ) |
onSuccess | function | Функция обратного вызова при успешной оплате |
onFail | function | Функция обратного вызова при неуспешной оплате |
Дополнительные поля
У полей с типами select
и checkbox
вы можете задать добавочную сумму additionalAmount, которая будет автоматически добавляться к основной сумме счета, в зависимости от выбора плательщика.
Если вы хотите, чтобы плательщик сам указывал сумму, то amount.value необходимо задать 0
и добавить поле с типом input
и названием amount
. Поле должно быть обязательным.
Также, если вы хотите, чтобы плательщик сам выбирал сумму, то amount.value необходимо задать 0
и добавить поле с типом select
, у которого все опции selectOptions содержат additionalAmount. Поле также должно быть обязательным.
Для того, чтобы плательщик указывал свой e-mail или телефон, вам необходимо добавить поле с типом input
и названием customerEmail
или customerPhone
соответственно. Поля могут быть необязательными.
Создание счета через API
Если вы используете API для создания счета и хотите использовать платежный виджет, то полученную ссылку на оплату необходимо передать в функцию инициализии.
var paymentWidget = new cpay.PaymentWidget();
paymentWidget.init({
invoice: {
url: "https://paymaster.ru/cpay/a62beecb68c84778b2424294f635b370"
}
});