Widget for installments
The widget for installments is an additional YooMoney's solution for the Installments payment method. It allows you to quickly calculate the amount of a monthly installment and show it to the user.
If you want to show the amount of a monthly installment, use:
- the CheckoutCreditUI.js library and place a ready-made button or information block on your website using this library;
- the credit-pre-schedule method for calculating the amount of a monthly installment and use this data in your forms.
You can use this JavaScript library to embed YooMoney's Installments widget into your system.
You can select a display mode for the widget: button or information block.
Button can be embedded in the cart (once the user selected the product). The button shows the actual amount of a monthly installment.
Information block can be placed in the product's description or in the catalog to inform the user that they can pay for this particular product in installments. The block shows the actual amount of a monthly installment.
To get started, implement the library and create an instance of
CheckoutCreditUI
.Implement the library
<script src="https://static.yoomoney.ru/checkout-credit-ui/v1/index.js"></script>
Create an instance of CheckoutCreditUI
const $checkoutCreditUI = CheckoutCreditUI(params);
Where
params
are the configuration parameters.Parameter | Type | Description |
---|---|---|
shopId | long | ID of a store, issued after you've signed up for YooMoney. |
sum | CurrencyAmount | Order amount. |
Example of CheckoutCreditUI configuration
const $checkoutCreditUI = CheckoutCreditUI({ shopId: '6677', sum: '3000' });
Use the
.UPDATE
method for displaying the widget.$checkoutCreditUI.update();
Name | 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 values: button (button), info (information block). | string | button |
tag | Tag used for displaying the button (can only be used with type='button' ). Possible values: button , input . | string | button |
theme | Button design (can only be used with type='button' ). Possible values: white или default . | string | default |
The button (
type='button'
) can be configured by selecting its design. If there is no theme
or theme='default'
, the button will be yellow. If theme='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' });
const $checkoutCreditUI = CheckoutCreditUI({ shopId: '6677', sum: '3000' }); const checkoutCreditText = $checkoutCreditUI({ type: 'info', domSelector: '.parent3' });
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 under the HTTP/1.1 protocol.
Address for sending requests
https://yoomoney.ru/credit/order/ajax/credit-pre-schedule
Request parameters
Parameter | Type | Description |
---|---|---|
shopId | long | Store's ID, issued after you've signed up for YooMoney. |
sum | CurrencyAmount | Order amount. |
Example of a request
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 a loan over the entire period including interest. |
Example of a response
{ "term":12, "creditPercent":"3.90", "amount":"1223.33", "totalAmount":"14680.00" }
See also