Widget

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

Установка

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

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

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

//note: в примере используется библиотека jquery

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

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

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

Тестовая оплата

Параметры

Вызов функции charge или функции auth определяет схему проведения оплаты: charge для одностадийной, auth — для двухстадийной.

Можно определить поведение формы в случае успешной или неуспешной оплаты следующими параметрами:

Локализация

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

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

Список поддерживаемых языков:

Рекуррентные платежи

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

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

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

    var data = {};
    data.cloudPayments = {recurrent: { interval: 'Month', period: 1, сustomerReceipt: 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
        //действие при неуспешной оплате
    });
};
        

Обратите внимание, что подписка будет создана только при указании параметра accountId, который может быть e-mail адресом, номером телефона или любым другим идентификатором плательщика.

Больше примеров создания рекуррентных платежей из виджета вы можете найти в разделе «Сценарии интеграции».

Для отмены рекуррентных платежей используйте возможности личного кабинета, API или предоставьте покупателю ссылку на сайт системы — https://my.cloudpayments.ru/unsubscribe, где он самостоятельно сможет найти и отменить свои подписки.

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

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

Все параметры и функции обычного и мобильного виджетов являются идентичными.
Для предотвращения блокировки нового окна при запуске виджета
в асинхронном режиме, либо в результате вызова ajax функции, мобильный виджет может показывать промежуточную кнопку "Перейти к оплате" перед открытием. Если вы запускаете виджет напрямую после действия пользователя (клик по кнопке или ссылке), вы можете отключить промежуточную кнопку параметром startWithButton.

var widget = new cp.CloudPayments({ startWithButton: false });