Widget for installments — [Archive] Payment solution protocol for merchants

Widget for installments

This is an old version of the API. Switch to the YooMoney API.

Widget for installments is an additional solution from YooMoney for the Installments payment method. It quickly calculates the amount of a monthly installment and displays it to the user.

If you want to display a monthly installment, use:

the CheckoutCreditUI.js library: it allows placing a ready-made button or information block on your website;
the credit-pre-schedule method: it calculates the amount of a monthly installment and displays the data in your forms.

CheckoutCreditUI.js

Using this JavaScript library, you can embed the Installments widget from YooMoney in your system.

You can choose the widget’s display mode: a button or an information block.

The Button can only be embedded it in the cart (once the user selects the product). The button displays the actual amount of a monthly installment. By clicking the button, the user enters the installment application process via YooMoney.

The Information block can be placed in the product card or in the catalog, informing the user of the option to pay for this product in installments. The block displays the actual amount of a monthly installment. The block does not redirect to the installment application process.

Start

To get started, connect the library and create a CheckoutCreditUI instance.

Connecting the library

HTML
<script src="https://static.yoomoney.ru/checkout-credit-ui/v1/index.js"></script>

Creating a CheckoutCreditUI instance

JavaScript
const $checkoutCreditUI = CheckoutCreditUI(params);

where params is the configuration parameter

Configuration

Parameter	Type	Description
shopId	long	The merchant ID issued when activating YooMoney.
sum	CurrencyAmount	Order amount.

Example of CheckoutCreditUI configuration

JavaScript
const $checkoutCreditUI = CheckoutCreditUI({
    shopId: '6677',
    sum: '3000'
});

Methods

Name	Description	Accepts	Returns
.update	Updates the amount of a monthly installment and redesigns the widget.	{void}	{void}
.on	Button event handler (works for `type='button'`).	`submit`	{void}

.UPDATE

Used for displaying the widget.

JavaScript
$checkoutCreditUI.update();

Parameter	Description	Type	Default
domSelector	Selector of the element in the page’s source code where the widget is displayed (id or class)	string	{void}
type	Widget’s display mode. Possible value: `button`, `info` (information block).	string	`button`
tag	Tag used for displaying the button (can only be used if `type='button'` is specified). Possible value: `button`, `input`.	string	`button`
theme	Button design theme (can only be used if `type='button'` is specified). Possible value: `white` or `default`.	string	`default`

Button (type='button') can be customized:

Select the tag that will be in the code. If tag='input', a click on the button is equal to a click on <input type='submit'>. If tag='button', a click on a button is processed as <button type='submit'>.
Select a theme. If theme is missing or theme='default', the button will be yellow. If theme='white', the button will be white.

Yellow button with the input type='button' tag

JavaScript
const checkoutCreditButton1 = $checkoutCreditUI({
    type: 'button',
    theme: 'default',
    domSelector: '.parent1'
});

White button with the input type='submit' tag

JavaScript
const checkoutCreditButton2 = $checkoutCreditUI({
    type: 'button',
    tag: 'input',
    theme: 'white',
    domSelector: '.parent2'
});

Information block

JavaScript
const checkoutCreditText = $checkoutCreditUI({
    type: 'info',
    domSelector: '.parent3'
});

.ON

Used for processing events (button clicks). Only for type='button'.

JavaScript
checkoutCreditButton.on = function() {
      alert('Submit');
};

Example of use

JavaScript
const $checkoutCreditUI = CheckoutCreditUI({
      shopId: '6677',
      sum: '3000'
});              

const checkoutCreditButton = $checkoutCreditUI({theme: 'white', type: 'input', domSelector: '.parent'});

checkoutCreditButton.on = function() {
      alert('Submit');
};

credit-pre-schedule method

This method allows pre-calculating the amount of a monthly installment repayment for a particular product when the payment is made via YooMoney’s Installments service.

Method call

Requests are sent using the GET method over the HTTP/1.1 Protocol.

URL for requests

https://yoomoney.ru/credit/order/ajax/credit-pre-schedule

Request parameters

Parameter	Type	Description
shopId	long	The merchant ID issued when activating YooMoney.
sum	CurrencyAmount	Order amount.

Request example

https://yoomoney.ru/credit/order/ajax/credit-pre-schedule?shopId=6677&sum=10000

Response parameters

Parameter	Type	Description
term	long	Loan or installment plan term, number of months.
creditPercent	long	Interest rate (percentage per month).
amount	CurrencyAmount	Amount of a monthly installment.
totalAmount	CurrencyAmount	Full amount of the loan over the entire period with interest.

Example of the response

JSON
{
    "term":12,
    "creditPercent":"3.90",
    "amount":"1223.33",
    "totalAmount":"14680.00"
}