Payment form widget
You will need to use the payment form widget to perform payouts if you do not have PCI DSS.
You add the widget to the page, show it to the user, and the user then interacts with the widget, going through all the payment steps from beginning to end. The user first securely enters their card details, and then sees a message telling them that the payment has been successful (or an error message if anything goes wrong).
You need to create a payment session, and the widget does the rest: it will send the payment request, redirect the user to the appropriate address, and show them the screen with the result of the operation.
How to perform a payment through the payment form
What the widget looks like
Regular widget
With a checkbox for enabling recurrent payments
Code example: a page with a widget
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Payment form widget</title>
<link href="https://widget.bank131.ru/payment-form.css" rel="stylesheet" />
<script src="https://widget.bank131.ru/payment-form.js" defer></script>
</head>
<body>
<div id="bank131-payment-form"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
if (!window.Bank131PaymentForm) {
return;
}
const paymentForm = new Bank131PaymentForm('publicToken', {
isCvcMasked: true,
});
paymentForm.render();
});
</script>
</body>
</html>
How to add a widget to a page
1. Link the scripts and styles
<!-- In test environment -->
<link href="https://widget-demo.bank131.ru/payment-form.css" rel="stylesheet" />
<script src="https://widget-demo.bank131.ru/payment-form.js" defer></script>
<!-- For real payments -->
<link href="https://widget.bank131.ru/payment-form.css" rel="stylesheet" />
<script src="https://widget.bank131.ru/payment-form.js" defer></script>
2. Add a container with the widget
<div id="bank131-payment-form"></div>
3. Create an instance of the widget
Once the script is linked to the page, the Bank131PaymentForm
class will appear in the global scope. To create the payment form, pass the public token obtained to work with the widget to the constructor.
const paymentForm = new Bank131PaymentForm('public token');
To display the payment form, call the render()
method:
paymentForm.render();
Widget API
Bank131PaymentForm
Payment form class constructor.
const paymentForm = new Bank131PaymentForm(publicToken[, options])
Parameter | Type | Description |
---|---|---|
publicToken | String | Mandatory. The public token |
options | Object | Additional settings object. |
options.container | HTMLElement | The container into which the form will be inserted. The default value is: <div id="bank131-payment-form"></div> |
paymentForm.render()
Method: The method displays the form on the page, in the container defined by the options.container
parameter.
paymentForm.render([options])
Parameter | Type | Description |
---|---|---|
options | Object | Additional settings object. |
options.container | HTMLElement | The container into which the form will be inserted. The default value is: <div id="bank131-payment-form"></div> |
paymentForm.onReady
Event handler: Handles the event of the form becoming ready for work.
paymentForm.onReady = function () { /* handler */ }
paymentForm.onPaymentStart
Event handler: Handles the event occurring at the start of the payment process.
paymentForm.onPaymentStart = function () { /* handler */ }
paymentForm.onPaymentSuccess
Event handler: Handles the event occurring when the payment process finishes successfully.
paymentForm.onPaymentSuccess = function () {
/* handler */
};
paymentForm.onPaymentFail
Event handler: Handles the event occurring when the payment process finishes unsuccessfully.
paymentForm.onPaymentFail = function (error) { /* handler */ }
Widget customization
Hide CVV/CVC details
You can customize the CVV/CVC field of the widget to make it display only the latest digit entered by customers and mask the others entered before with *. To do this, add the isCvcMasked
flag into the widget constructor, as follows:
const paymentForm = new Bank131PaymentForm('publicToken', {
isCvcMasked: true,
});
Appearance
You can link your own styles after the library ones and override them, like this:
<link href="https://widget.bank131.ru/payment-form.css" rel="stylesheet" />
<link href="custom-styles.css" rel="stylesheet" />
Or this:
/* custom-styles.css */
.bank131-Field__label {
color: green;
}
You cannot yet change the appearance of the values entered inside the iframe. This functionality will be added later.