Widget for getting tokenized bank card details
This widget allows you to securely perform bank card operations without PCI DSS.
You connect the widget to the page in your service, display it to the user, and obtain their card details in tokenized form. You can then use these details to perform payouts.
Everything is secure: the input form is displayed in a frame, the details are protected by Bank 131's PCS DSS certificate, and all the operations are performed using a unique token.
The token containing these card details can then be stored and used for repeat payouts to this card via the token. You can find information about the token or card through the
token/infomethod. This includes receiving the last 4 digits of the card, in order to show the user the payment destination.
What the widget looks like
Initial state of the widget
Code example: a page with a widget
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Card number tokenization widget.</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="format-detection" content="telephone=no" />
<!-- Linking the widget's script and styles. -->
<link
href="https://widget.bank131.ru/card-tokenizer.css"
rel="stylesheet"
/>
<script src="https://widget.bank131.ru/card-tokenizer.js" defer></script>
</head>
<body>
<div id="bank131-card-tokenizer"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
if (!window.Bank131CardTokenizer) {
return;
}
const cardTokenizer = new Bank131CardTokenizer('public token');
cardTokenizer.onTokenizationSuccess = function (cardToken) {
// Handling the event of successful token reception.
};
cardTokenizer.render();
});
</script>
</body>
</html>
How to add a widget to a page
To use widgets, you will need to connect our JavaScript library to the page and obtain a token (using the token method).
1. Link the scripts and styles
You need to link the widget's script and styles to the page.
<!-- In test environment -->
<link
href="https://widget-demo.bank131.ru/card-tokenizer.css"
rel="stylesheet"
/>
<script src="https://widget-demo.bank131.ru/card-tokenizer.js" defer></script>
<!-- For real payments -->
<link href="https://widget.bank131.ru/card-tokenizer.css" rel="stylesheet" />
<script src="https://widget.bank131.ru/card-tokenizer.js" defer></script>
2. Add a container with the widget
<div id="bank131-card-tokenizer"></div>
3. Create an instance of the widget
After linking the script to the page, the Bank131CardTokenizer class will appear in the global scope.
To create the tokenization form, pass the public token created to work with the widget into the constructor.
const cardTokenizer = new Bank131CardTokenizer('public token');
Action upon successful reception of the token:
cardTokenizer.onTokenizationSuccess = function (cardToken) {
// ...
};
To display the form, call the render() method:
cardTokenizer.render();
Widget API
Bank131CardTokenizer
Tokenization form class constructor.
new Bank131CardTokenizer(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-card-tokenizer"></div> |
| options.texts | object | |
| options.texts.cardNumberLabel | string | A label for the card number input field. The default value is: Card number |
| options.texts.submitButtonLabel | string | Tokenization button label. The default value is Link the card |
Method: cardTokenizer.render()
This method displays the form on the page, in the container defined by the options.container parameter.
cardTokenizer.render();
Event handler: cardTokenizer.onReady
Handles the event of the form becoming ready for work.
cardTokenizer.onReady = function () {
/* handler */
};
Event handler: cardTokenizer.onTokenizationStart
Handles the event occurring at the start of the tokenization process.
cardTokenizer.onTokenizationStart = function () {
/* handler */
};
Event handler: cardTokenizer.onTokenizationSuccess
Handles the event occurring when the tokenization process finishes successfully.
cardTokenizer.onTokenizationSuccess = function (cardToken) {
/* handler */
};
| Parameter | Type | Description |
|---|---|---|
| cardToken | object | |
| cardToken.info | object | Additional card information object. |
| cardToken.info.card_network | string | Payment card network. Possible values: visa, mastercard, mir |
| cardToken.info.card_type | string | Card type. Additionally specifies the subbrand (visa_electron, maestro, mirmaestro) |
| cardToken.info.masked_card_number | string | Masked card number value, e.g. 424242******4242 |
| cardToken.token | string | Card number token |
Event handler: cardTokenizer.onTokenizationFail
Handles the event occurring when the tokenization process finishes unsuccessfully.
cardTokenizer.onTokenizationFail = function (error) {
/* handler */
};
Widget customization
Appearance
You can link your own styles after the library ones and override them, like this:
<link href="https://widget.bank131.ru/card-tokenizer.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 value entered into the form (inside the iframe). This option will be added later.
Texts
You can change the text of the form using the options.texts parameter in the Bank131CardTokenizer constructor.