Widget for installments
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.
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.
To get started, connect the library and create a
CheckoutCreditUI
instance.Connecting the library
<script src="https://static.yoomoney.ru/checkout-credit-ui/v1/index.js"></script>
Creating a CheckoutCreditUI instance
const $checkoutCreditUI = CheckoutCreditUI(params);
where
params
is the configuration parameterParameter | Type | Description |
---|---|---|
shopId | long | The merchant ID issued when activating YooMoney. |
sum | CurrencyAmount | Order amount. |
Example of CheckoutCreditUI configuration
const $checkoutCreditUI = CheckoutCreditUI({ shopId: '6677', sum: '3000' });
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} |
Used for displaying the widget.
$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'>
. Iftag='button'
, a click on a button is processed as<button type='submit'>
. - Select a theme. If
theme
is missing ortheme='default'
, the button will be yellow. Iftheme='white'
, the button will be white.
Yellow button with the input type='button' tag
const checkoutCreditButton1 = $checkoutCreditUI({ type: 'button', theme: 'default', domSelector: '.parent1' });
White button with the input type='submit' tag
const checkoutCreditButton2 = $checkoutCreditUI({ type: 'button', tag: 'input', theme: 'white', domSelector: '.parent2' });
Information block
const checkoutCreditText = $checkoutCreditUI({ type: 'info', domSelector: '.parent3' });
Used for processing events (button clicks). Only for
type='button'
.checkoutCreditButton.on = function() { alert('Submit'); };
const $checkoutCreditUI = CheckoutCreditUI({ shopId: '6677', sum: '3000' }); const checkoutCreditButton = $checkoutCreditUI({theme: 'white', type: 'input', domSelector: '.parent'}); checkoutCreditButton.on = function() { alert('Submit'); };
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.
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
{ "term":12, "creditPercent":"3.90", "amount":"1223.33", "totalAmount":"14680.00" }
See also