CloudPayments Widget

https://widget.cloudpayments.ru/docs
Admin
CloudPayments Widget is a secure, pop-up payment form for entering card details and email, optimized...
Tokens:10,856
Snippets:161
Trust Score:9.5
Update:1 month ago
Show doc for...
Tokens:
Raw
### Initialize Widget with Options

Source: https://widget.cloudpayments.ru/docs/widget.html

Example of initializing the widget by passing an optional widgetOptions object to the constructor.

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

--------------------------------

### Localize Widget Language

Source: https://widget.cloudpayments.ru/docs/widget.html

Example of setting the widget language by passing the language parameter during initialization.

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

--------------------------------

### Declare Legacy Widget Payment

Source: https://widget.cloudpayments.ru/docs/api/interfaces/src_contracts_LegacyCallbackObject.LegacyCallbackObject.html

Example of initializing the CloudPayments widget using the legacy pay method with configuration options and callback handlers.

```javascript
this.pay = function () {
var widget = new cp.CloudPayments();
 widget.pay('auth', // или 'charge'
      { //options
         publicId: 'test_api_00000000000000000000001', //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
         }
     }
  )
};
```

--------------------------------

### Initialize Widget with Defaults

Source: https://widget.cloudpayments.ru/docs/api/classes/src_initializer_Widget_CloudPayments.default.html

Demonstrates the minimal initialization of the CloudPayments widget without passing any parameters.

```javascript
var widget = new cp.CloudPayments();
```

--------------------------------

### Initialize CloudPayments Widget and Execute Payment

Source: https://widget.cloudpayments.ru/docs/examples/example-2.html

Demonstrates initializing the widget with localization and wallet support settings, followed by the pay method call with transaction details.

```javascript
var payments = new cp.CloudPayments({
    language: 'en-EN',
    email: 'test@test.com',
    cryptogramMode: false,
    yandexPaySupport: false,
    applePaySupport: false,
    googlePaySupport: false,
    masterPassSupport: false,
    tinkoffInstallmentSupport: false
});

payments.oncomplete = (result) => {
    console.log('result', result);
}

payments.pay("charge", { // options
    publicId: 'test_api_00000000000000000000002',
    description: 'Оплата товаров в example.com',
    amount: 123000,
    currency: 'RUB',
    invoiceId: 1234567,
    accountId: 'user@example.com',
    email: 'test@tssg.com',
    skin: 'minimal',
    cryptogramMode: false,
    data: {
        myProp: 'myProp value'
    },
}).then((result) => {
    // Объект типа WidgetResult
    console.log('result', result);
});
```

--------------------------------

### Initialize Widget with Options

Source: https://widget.cloudpayments.ru/docs/api/classes/src_initializer_Widget_CloudPayments.default.html

Demonstrates how to initialize the CloudPayments widget by passing an optional constructorObject containing WidgetOptions.

```javascript
var constructorObject = {
    // {WidgetOptions}
};
var widget = new cp.CloudPayments(constructorObject);
```

--------------------------------

### new CloudPayments(options?)

Source: https://widget.cloudpayments.ru/docs/api/classes/src_initializer_Widget_CloudPayments.default.html

Initializes a new instance of the CloudPayments widget.

```APIDOC
## Constructor

### Description
Initializes the CloudPayments widget instance.

### Parameters
- **options** (WidgetOptions) - Optional - Configuration options for the widget.
```

--------------------------------

### pay(type, options)

Source: https://widget.cloudpayments.ru/docs/examples/example-2.html

Initiates a payment process using the configured widget instance.

```APIDOC
## pay(type, options)

### Description
Triggers the payment flow with the specified payment type and transaction details.

### Parameters
- **type** (string) - Required - The payment type (e.g., 'charge')
- **options** (object) - Required - Payment configuration object
  - **publicId** (string) - Required - Public API ID
  - **description** (string) - Required - Payment description
  - **amount** (number) - Required - Payment amount
  - **currency** (string) - Required - Currency code (e.g., 'RUB')
  - **invoiceId** (number) - Optional - Invoice identifier
  - **accountId** (string) - Optional - User account identifier
  - **email** (string) - Optional - User email
  - **skin** (string) - Optional - Widget skin name
  - **cryptogramMode** (boolean) - Optional - Toggle cryptogram mode
  - **data** (object) - Optional - Custom data object
```

--------------------------------

### One-stage payment configuration with charge

Source: https://widget.cloudpayments.ru/docs/api/interfaces/src_contracts_PaymentOptions.IPaymentOptionPreview.html

Use the 'charge' argument with the pay method to initiate a one-stage payment process.

```javascript
var payments = new cp.CloudPayments();

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


```

--------------------------------

### Usage of Escrow in CloudPayments widget

Source: https://widget.cloudpayments.ru/docs/api/interfaces/src_contracts_Escrow_Escrow.Escrow.html

Demonstrates how to include the escrow object within the widget.pay method options.

```javascript
var widget = new cp.CloudPayments();
widget.pay("auth", {
    // options
    ...
    // Объект Escrow
    escrow: {
        escrowType: 0,
        startAccumulation: true,
        accumulationId: "4733183a-c6f6-4c1b-8ff1-fb7c43ed1695"
    }
})
```

--------------------------------

### cp.CloudPayments Constructor

Source: https://widget.cloudpayments.ru/docs/examples/example-2.html

Initializes the CloudPayments widget instance with configuration options including localization and payment method support.

```APIDOC
## cp.CloudPayments(options)

### Description
Initializes the widget instance with specific settings for localization and enabled payment methods.

### Parameters
- **language** (string) - Optional - Language code (e.g., 'en-EN')
- **email** (string) - Optional - Default user email
- **cryptogramMode** (boolean) - Optional - Toggle cryptogram mode
- **yandexPaySupport** (boolean) - Optional - Enable Yandex Pay
- **applePaySupport** (boolean) - Optional - Enable Apple Pay
- **googlePaySupport** (boolean) - Optional - Enable Google Pay
- **masterPassSupport** (boolean) - Optional - Enable MasterPass
- **tinkoffInstallmentSupport** (boolean) - Optional - Enable Tinkoff Installment
```

--------------------------------

### Minimal CloudPayments Widget Implementation

Source: https://widget.cloudpayments.ru/docs/examples/example-1.html

Initializes the CloudPayments widget and handles the payment process using the pay method with essential parameters like publicId, amount, and currency.

```javascript
var payments = new cp.CloudPayments();

payments.oncomplete = (result) => {
    console.log('result', result);
}

payments.pay("charge", { // options
    publicId: 'test_api_00000000000000000000002',
    description: 'Оплата товаров в example.com',
    amount: 123000,
    currency: 'RUB',
    invoiceId: 1234567,
}).then((result) => {
    // Объект типа WidgetResult
    console.log('result', result);
});
```

--------------------------------

### Two-stage payment configuration with auth

Source: https://widget.cloudpayments.ru/docs/api/interfaces/src_contracts_PaymentOptions.IPaymentOptionPreview.html

Use the 'auth' argument with the pay method to initiate a two-stage payment process.

```javascript
var payments = new cp.CloudPayments();

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


```

--------------------------------

### Initialize Payment Widget

Source: https://widget.cloudpayments.ru/docs/widget.html

Register a function to call the pay method with auth or charge parameters. Include required payment details like publicId, amount, and currency.

```javascript
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
            }
        }
    )
};
```

--------------------------------

### cp.CloudPayments.pay()

Source: https://widget.cloudpayments.ru/docs/widget.html

Initializes and displays the payment widget to collect card details and process a transaction.

```APIDOC
## cp.CloudPayments.pay(type, options, callbacks)

### Description
Opens the payment widget to process a transaction. The widget handles card data securely via an iframe.

### Parameters
- **type** (string) - Required - The transaction type: 'auth' or 'charge'.
- **options** (object) - Required - Payment configuration object:
  - **publicId** (string) - Required - Public ID from your personal account.
  - **description** (string) - Required - Payment description.
  - **amount** (number) - Required - Transaction amount.
  - **currency** (string) - Required - Currency code (e.g., 'RUB').
  - **accountId** (string) - Optional - Payer identifier.
  - **invoiceId** (string) - Optional - Order number.
  - **email** (string) - Optional - Payer email.
  - **skin** (string) - Optional - Widget design style.
  - **data** (object) - Optional - Custom data object.
- **callbacks** (object) - Required - Event handlers:
  - **onSuccess** (function) - Called on successful payment.
  - **onFail** (function) - Called on failed payment.
  - **onComplete** (function) - Called when the widget receives the transaction result from the API.

### Request Example
```javascript
var widget = new cp.CloudPayments();
widget.pay('auth', {
    publicId: 'test_api_00000000000000000000002',
    description: 'Оплата товаров в example.com',
    amount: 100,
    currency: 'RUB'
}, {
    onSuccess: function (options) { /* success logic */ },
    onFail: function (reason, options) { /* fail logic */ },
    onComplete: function (paymentResult, options) { /* completion logic */ }
});
```
```

--------------------------------

### AppOptions Configuration

Source: https://widget.cloudpayments.ru/docs/api/interfaces/src_contracts_AppOptions.AppOptions.html

The AppOptions interface provides configuration settings for the payment widget. These properties are optional and allow for enabling or disabling specific payment methods and setting user preferences.

```APIDOC
## AppOptions Interface

### Description
Configuration object used to initialize the payment widget. Defines supported payment methods and user-specific options.

### Properties
- **language** (Language) - Optional - Widget language.
- **email** (string) - Optional - Payer's email for receipt delivery.
- **applePaySupport** (boolean) - Optional - Enable ApplePay.
- **googlePaySupport** (boolean) - Optional - Enable GooglePay.
- **yandexPaySupport** (boolean) - Optional - Enable YandexPay.
- **masterPassSupport** (boolean) - Optional - Enable MasterPass.
- **tinkoffInstallmentSupport** (boolean) - Optional - Enable Tinkoff installment.
- **loanSupport** (boolean) - Optional - Enable Tinkoff credit.
- **tinkoffPaySupport** (boolean) - Optional - Enable TinkoffPay.
- **dolyameSupport** (boolean) - Optional - Enable Dolyame.
- **mirPaySupport** (boolean) - Optional - Enable MirPay.
- **speiSupport** (boolean) - Optional - Enable Spei.
- **cashSupport** (boolean) - Optional - Enable Cash.
- **cardInstallmentSupport** (boolean) - Optional - Enable card installment.
- **foreignSupport** (boolean) - Optional - Enable foreign cards.
- **sbpSupport** (boolean) - Optional - Enable SBP (Faster Payments System).
- **sberPaySupport** (boolean) - Optional - Enable SberPay.
```

--------------------------------

### auth(payment, onSuccess, onFail, onComplete, auth?)

Source: https://widget.cloudpayments.ru/docs/api/classes/src_initializer_Widget_CloudPayments.default.html

Displays the payment form in two-stage payment mode.

```APIDOC
## Method: auth

### Description
Displays the payment form for two-stage payment. (Deprecated)

### Parameters
- **payment** (IPaymentOptions) - Required - Payment options.
- **onSuccess** (Function) - Required - Success callback.
- **onFail** (Function) - Required - Failure callback.
- **onComplete** (Function) - Required - Completion callback.
- **auth** (boolean) - Optional - Authentication flag (default: true).
```

--------------------------------

### cp.CloudPayments.charge() - Recurrent Payments

Source: https://widget.cloudpayments.ru/docs/widget.html

Configures the widget to initiate a subscription by including a 'recurrent' object within the 'data.CloudPayments' configuration.

```APIDOC
## Recurrent Payments Configuration

### Description
To enable recurrent payments, add the `recurrent` object to `data.CloudPayments` when calling the `widget.charge` method.

### Parameters
- **Interval** (String) - Required - Interval for payments. Possible values: Day, Week, Month.
- **Period** (Int) - Required - Multiplier for the interval (e.g., 1 Month, 2 Week). Must be > 0.
- **MaxPeriods** (Int) - Optional - Maximum number of payments. Default is unlimited.
- **Amount** (Numeric) - Optional - Amount of the recurring payment. Defaults to the initial payment amount.
- **StartDate** (DateTime) - Optional - Date and time of the first recurring payment.
- **CustomerReceipt** (String) - Optional - Data for generating online receipts for recurring payments.

### Request Example
```javascript
var data = {};
data.CloudPayments = {
    recurrent: {
        interval: 'Month',
        period: 1,
        customerReceipt: receipt
    }
};

widget.charge({
    publicId: 'test_api_00000000000000000000001',
    amount: 1000,
    currency: 'RUB',
    accountId: 'user@example.com',
    data: data
}, successCallback, failCallback);
```
```

--------------------------------

### charge(payment, onSuccess, onFail, onComplete)

Source: https://widget.cloudpayments.ru/docs/api/classes/src_initializer_Widget_CloudPayments.default.html

Displays the payment form in single-stage payment mode.

```APIDOC
## Method: charge

### Description
Displays the payment form for single-stage payment. (Deprecated)

### Parameters
- **payment** (IPaymentOptions) - Required - Payment options.
- **onSuccess** (Function) - Required - Success callback.
- **onFail** (Function) - Required - Failure callback.
- **onComplete** (Function) - Required - Completion callback.
```

--------------------------------

### pay(type, payment, callbacks?)

Source: https://widget.cloudpayments.ru/docs/api/classes/src_initializer_Widget_CloudPayments.default.html

Displays the payment form for processing a payment.

```APIDOC
## Method: pay

### Description
Displays the payment form to the user.

### Parameters
- **type** (PaymentMethodType) - Required - The payment method type.
- **payment** (IPaymentOptions) - Required - Payment options.
- **callbacks** (LegacyCallbackObject) - Optional - Legacy callback object.

### Returns
- **Promise<WidgetResult>** - A promise that resolves with the payment result.
```

--------------------------------

### payments.pay(type, options)

Source: https://widget.cloudpayments.ru/docs/api/interfaces/src_contracts_PaymentOptions.IPaymentOptionPreview.html

Initiates a payment process using the CloudPayments SDK. The type parameter determines the payment flow (charge for one-stage, auth for two-stage).

```APIDOC
## payments.pay(type, options)

### Description
Initiates a payment transaction. The 'type' argument determines the payment scheme: 'charge' for one-stage payments or 'auth' for two-stage payments.

### Parameters
- **type** (string) - Required - The payment scheme: 'charge' or 'auth'.
- **options** (IPaymentOptionPreview) - Required - The configuration object containing payment details.

### Usage Example
```javascript
var payments = new cp.CloudPayments();

payments.pay("charge", {
    enabledPaymentMethods: ["card"],
    logoUrl: "https://example.com/logo.png",
    saveCard: "checkbox",
    supportedCards: ["visa", "mastercard"]
});
```
```

--------------------------------

### Escrow Interface Properties

Source: https://widget.cloudpayments.ru/docs/api/interfaces/src_contracts_Escrow_Escrow.Escrow.html

Defines the properties available for the escrow configuration object.

```APIDOC
## Escrow Interface

### Properties
- **startAccumulation** (boolean) - Optional - Флаг первичного накопления
- **escrowType** (EscrowType) - Optional - Тип накопления
- **accumulationId** (string) - Optional - Идентификатор накопления

### Usage Example
```javascript
var widget = new cp.CloudPayments();
widget.pay("auth", {
    escrow: {
        escrowType: 0,
        startAccumulation: true,
        accumulationId: "4733183a-c6f6-4c1b-8ff1-fb7c43ed1695"
    }
})
```
```

--------------------------------

### Настройка рекуррентных платежей и чеков

Source: https://widget.cloudpayments.ru/docs/widget.html

Пример инициализации виджета с настройкой объекта data.CloudPayments.recurrent для создания ежемесячной подписки и формирования чеков.

```javascript
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
        //действие при неуспешной оплате
    });
};
```

--------------------------------

### Include CloudPayments Script

Source: https://widget.cloudpayments.ru/docs/widget.html

Add the official script to the head section of your website. Always load it from the official source to ensure PCI compliance.

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

--------------------------------

### close()

Source: https://widget.cloudpayments.ru/docs/api/classes/src_initializer_Widget_CloudPayments.default.html

Closes the payment widget.

```APIDOC
## Method: close

### Description
Closes the currently open payment widget.
```

--------------------------------

### payments.pay

Source: https://widget.cloudpayments.ru/docs/widget.html

Executes a payment transaction using either one-stage (charge) or two-stage (auth) flow.

```APIDOC
## payments.pay

### Description
Initiates the payment process based on the specified scheme.

### Syntax
`payments.pay(scheme, options)`

### Parameters
- **scheme** (String) - Required - The payment scheme: 'charge' for one-stage or 'auth' for two-stage.
- **options** (IPaymentOptions) - Required - Object containing payment details.
```

--------------------------------

### LegacyCallbackObject Interface

Source: https://widget.cloudpayments.ru/docs/api/interfaces/src_contracts_LegacyCallbackObject.LegacyCallbackObject.html

Defines the callback functions used to handle the lifecycle of a payment transaction in the legacy widget.

```APIDOC
## LegacyCallbackObject

### Description
Interface for handling payment events in the legacy CloudPayments widget.

### Properties
- **onSuccess** (Function) - Optional. Callback triggered upon successful payment. Signature: (options: IPaymentOptions, cryptogram?: string, email?: string) => void.
- **onFail** (Function) - Optional. Callback triggered upon failed payment. Signature: (reason: string | undefined, options: IPaymentOptions, code: string | undefined) => void.
- **onComplete** (Function) - Optional. Callback triggered when the widget receives a transaction result from the API. Signature: (data: ApiCallCompletedData, options: IPaymentOptions) => void.
```

--------------------------------

### Bind Payment Trigger

Source: https://widget.cloudpayments.ru/docs/widget.html

Attach the payment function to a UI event, such as a button click, using jQuery.

```javascript
$('#checkout').click(pay);
```
Tokens:
Raw