Widget

Платежный виджет — всплывающая форма для ввода реквизитов карты и электронной почты плательщика. Виджет автоматически определяет тип платежной системы (Visa, MasterCard, Maestro или «МИР»), банк-эмитент карты, а также показывает соответствующие логотипы. Форма оптимизирована для использования в любых браузерах и мобильных устройствах. Внутри виджета открывается iframe, который гарантирует безопасность передачи карточных данных и не требует от ТСП сертификации для использования.

Описание объектов и подробные примеры можно найти в соответствующих разделах в левой колонке сайта: Описание объектов -> Classes, Enums, Interfaces, Modules.

Для установки виджета необходимо прописать на сайте скрипт в раздел head:

<script src="https://widget.cloudpayments.ru/bundles/cloudpayments.js"></script>

Используйте cloudpayments.js, чтобы оставаться совместимым с PCI, гарантируя, что платежные реквизиты отправляются напрямую в CloudPayments, не затрагивая ваш сервер. Всегда загружайте cloudpayments.js с https://widget.cloudpayments.ru, чтобы соответствовать требованиям. Не включайте скрипт в пакет и не размещайте его самостоятельно.

Для появления платежной формы необходимо зарегистрировать функцию для вызова метода pay, передав в него параметр auth или charge, а также параметры оплаты:

this.pay = function () {
 var widget = new cp.CloudPayments();
    widget.pay('auth', // или 'charge'
        { //options
            publicId: 'test_api_00000000000000000000002', //id из личного кабинета
            description: 'Оплата товаров в example.com', //назначение
            amount: 100, //сумма
            currency: 'RUB', //валюта
            accountId: 'user@example.com', //идентификатор плательщика (необязательно)
            invoiceId: '1234567', //номер заказа  (необязательно)
            email: 'user@example.com', //email плательщика (необязательно)
            skin: "mini", //дизайн виджета (необязательно)
            data: {
                myProp: 'myProp value'
            }
        },
        {
            onSuccess: function (options) { // success
                //действие при успешной оплате
            },
            onFail: function (reason, options) { // fail
                //действие при неуспешной оплате
            },
            onComplete: function (paymentResult, options) { //Вызывается как только виджет получает от api.cloudpayments ответ с результатом транзакции.
                //например вызов вашей аналитики Facebook Pixel
            }
        }
    )
};

И прописать вызов функции на событие, например, нажатие кнопки «Оплатить»:

$('#checkout').click(pay);

В примере используется библиотека jquery.

Демонстрация работы виджета Widget представлена в нашем демо-магазине. Для тестирования можно использовать как тестовые карточные данные, так и реальные. Списания денежных средств не произойдет.

Skin - Classic

Skin - Mini

Skin - Modern

Cсылка на демо-конструкторopen in new window.

Объект widgetOptions является необязательным и может не передаваться

Пример с переданным входным параметром

var widgetOptions = {
     // {WidgetOptions}
};
var widget = new cp.CloudPayments(widgetOptions);

Минимальный пример

var widget = new cp.CloudPayments();

Пример объявления параметров в конструкторе виджета и описание входных параметров виджета — в других разделах.

Параметры оплаты

Вызов функции pay c аргументом auth или charge определяет схему проведения оплаты:

charge - для одностадийной оплаты

var payments = new cp.CloudPayments();

window.pay = function () {
    payments.pay("charge", { 
        // IPaymentOptions
});

auth - для двухстадийной оплаты

var payments = new cp.CloudPayments();

window.pay = function () {
    payments.pay("auth", { 
        // IPaymentOptions
});

Пример объявления виджета с минимальным количеством и подробное описание входных параметров виджета - в других разделах.

Локализация виджета

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

var widget = new cp.CloudPayments({language: "en-US"});

Список поддерживаемых языков представлен в отдельном разделе.

Рекуррентные платежи (подписка)

После успешного завершения оплаты виджет может автоматически создавать подписку на рекуррентные платежи. Для это нужно добавить несколько параметров запуска:

Параметр	Формат	Применение	Описание
Interval	String	Обязательный	Интервал. Возможные значения: Day, Week, Month
Period	Int	Обязательный	Период. В комбинации с интервалом, 1 Month значит раз в месяц, а 2 Week — раз в две недели. Должен быть больше 0
MaxPeriods	Int	Необязательный	Максимальное количество платежей в подписке. По умолчанию стоит без ограничений. Если задаете количество, проверьте, чтобы оно было больше 0
Amount	Numeric	Необязательный	Сумма регулярного платежа. По умолчанию совпадает с суммой первого, установочного платежа. Если указываете другую сумму, проверьте, чтобы она была больше 0
StartDate	DateTime	Необязательный	Дата и время первого регулярного платежа. По умолчанию запуск произойдет через указанный интервал и период, например через месяц. Если указываете другую дату, то она должна стоять в будущем времени
CustomerReceipt	String	Необязательный	Данные для формирования онлайн-чека в регулярных платежах

Параметры для запуска регулярных платежей необходимо добавить в объект data.СloudPayments.recurrent как в примере ниже:

this.pay = function () {
    var widget = new cp.CloudPayments();
    var receipt = {
            Items: [//товарные позиции
                 {
                    label: 'Наименование товара 3', //наименование товара
                    price: 300.00, //цена
                    quantity: 3.00, //количество
                    amount: 900.00, //сумма
                    vat: 20, //ставка НДС
                    method: 0, // тег-1214 признак способа расчета - признак способа расчета
                    object: 0, // тег-1212 признак предмета расчета - признак предмета товара, работы, услуги, платежа, выплаты, иного предмета расчета
                }
            ],
            taxationSystem: 0, //система налогообложения; необязательный, если у вас одна система налогообложения
            email: 'user@example.com', //e-mail покупателя, если нужно отправить письмо с чеком
            phone: '', //телефон покупателя в любом формате, если нужно отправить сообщение со ссылкой на чек
            isBso: false, //чек является бланком строгой отчетности
            amounts:
            {
                electronic: 900.00, // Сумма оплаты электронными деньгами
                advancePayment: 0.00, // Сумма из предоплаты (зачетом аванса) (2 знака после запятой)
                credit: 0.00, // Сумма постоплатой(в кредит) (2 знака после запятой)
                provision: 0.00 // Сумма оплаты встречным предоставлением (сертификаты, др. мат.ценности) (2 знака после запятой)
            }
        };

    var data = {};
    data.CloudPayments = {
        CustomerReceipt: receipt, //чек для первого платежа
        recurrent: {
         interval: 'Month',
         period: 1, 
         customerReceipt: receipt //чек для регулярных платежей
         }
         }; //создание ежемесячной подписки

    widget.charge({ // options
        publicId: 'test_api_00000000000000000000001', //id из личного кабинета
        description: 'Подписка на ежемесячный доступ к сайту example.com', //назначение
        amount: 1000, //сумма
        currency: 'RUB', //валюта
        invoiceId: '1234567', //номер заказа  (необязательно)
        accountId: 'user@example.com', //идентификатор плательщика (обязательно для создания подписки)
        data: data
    },
    function (options) { // success
        //действие при успешной оплате
    },
    function (reason, options) { // fail
        //действие при неуспешной оплате
    });
};

Мобильный виджет

Скрипт автоматически определяет устройство пользователя и запускает наиболее подходящий вариант виджета: обычный либо оптимизированный для мобильных устройств. Для удобства покупателей мобильная версия виджета занимает весь экран и предлагает провести оплату либо картой, либо по технологии Apple Pay или Google Pay.

Возможность оплаты в виджете через Apple Pay и Google Pay появляется при соблюдении следующих условий:

Сайт работает по схеме HTTPS и поддерживает протокол TLS версии 1.2.
На сайте отсутствует "mixed content", когда часть ресурсов загружается по HTTPS, а часть — по HTTP.
Проведена упрощенная (только для веб-сайтов) или классическая интеграция функции Apple Pay.
Клиент открыл страницу оплаты на сайте в браузере, который поддерживает Apple или Google Pay. Для Apple Pay это Apple Safari, для Google Pay — Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera или UCWeb UC. Другие браузеры не поддерживают возможность оплаты с помощью Apple или Google Pay.

Интеграция - Widget

Demo - Widget

Параметры конструктора - Widget

Параметры оплаты

Локализация виджета

Рекуррентные платежи (подписка)

Мобильный виджет

# Widget

# Интеграция - Widget

# Demo - Widget

# Параметры конструктора - Widget

# Параметры оплаты

# Локализация виджета

# Рекуррентные платежи (подписка)

# Мобильный виджет

Widget

Интеграция - Widget

Demo - Widget

Параметры конструктора - Widget

Параметры оплаты

Локализация виджета

Рекуррентные платежи (подписка)

Мобильный виджет