CloudPayments – рекуррентный платеж (автоплатеж, подписка)

Рекуррентные платежи — это повторяющиеся переводы денег с карты на счет. Еще их называют автоплатежами. Например, эта модель оплаты подходит бизнесу, который предлагает сервисы по подписке.

Рекуррентные платежи – возможность выполнять регулярные списания денег с банковской карты покупателя без повторного ввода реквизитов карты и без участия плательщика для инициации очередного платежа.

Подключаем платежный виджет к WordPress сайту

wp_enqueue_script( 'cloudpayments', 
https://widget.cloudpayments.ru/bundles/cloudpayments.js' );
// cloudpaymentslocal.js - подключение на сайте, подключаем в футер
wp_enqueue_script( 'cp-recurrent', 
get_template_directory_uri() . '/js/cp-recurrent.js', null, null, true );

Простой вариант обработчика в котором должны быть зашиты параметры платежа – сумма, валюта, реквизиты плательщика

const cloudpaymentsRecurrentButton = document.querySelector( '.cloudpayments-recurrent-payment' );

if ( cloudpaymentsRecurrentButton ) {

    cloudpaymentsRecurrentButton.addEventListener( 'click', ( e ) => {
    e.preventDefault();

    options.description = 'Подписка на автоплатеж,\n первый платеж 1 руб.,\n ежемесячно 100 руб.'; //назначение
    options.requireEmail = true;
    recurrent( options );

  } );

}
this.recurrent = function ( { 
    publicId = 'test_api_00000000000000000000001',
    description = 'Платеж',
    email = 'user@example.com',
    requireEmail = false
  } ) {
    var widget = new cp.CloudPayments();
  
    var accountId = email;
  
    var data = {};
    data.CloudPayments = {
        recurrent: {
            amount: 100, // ежемесячно платеж на 100 руб
            interval: 'Month',
            period: 1, 
        }
    }; //создание ежемесячной подписки
  
    widget.charge( { // options
        publicId: publicId, //id из личного кабинета
        description: description, //назначение платежа
        amount: 1, //сумма
        currency: 'RUB', //валюта
        requireEmail: requireEmail, 
        email: email, //email плательщика
        accountId: accountId, //идентификатор плательщика (обязательно для создания подписки)
        data: data
    },
    function (options) { // success
        //действие при успешной оплате
    },
    function (reason, options) { // fail
        //действие при неуспешной оплате
    });
  };

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

Документация – https://developers.cloudpayments.ru/#demo-widget

Если нет времени и желания разбираться самостоятельно – обращайтесь