---
name: bank131-payments-via-widget
description: Use when the user asks about embedding Bank 131 payment widgets (payment form, FPS, tokenization): getting a public token with the `token` method (valid for 24 hours, for one operation), widget types `acquiring_widget`, `tokenize_widget`, `self_employed_widget`, connecting scripts and styles for test and real environments, and initializing the `Bank131PaymentForm`, `Bank131SBPPayment`, and `Bank131CardTokenizer` classes with the public token and the `render()` method.
---

### How it works

Bank 131 provides three web widgets: the payment form widget, the FPS payment widget, and the card tokenizer widget.

You add a widget to your page and the user goes through all payment steps inside it: safely enters card details, gets redirected for 3D Secure, and sees the operation result. You create a payment session, and the widget sends the payment request, redirects the user, and shows the result screen.

### Public token

To work with widgets you need a public token. It is valid for 24 hours and is intended for one operation.

Get it with the `token` method. In the request, pass the widget types you plan to work with:

- `acquiring_widget` — settings of the payment form widget for bank card payments. The `session_id` parameter is required. Optional parameters: `show_recurrent_checkbox`, `success_return_url`, `failure_return_url`, `success_on_hold`, `redirect_target`.
- `tokenize_widget` — settings of the tokenization widget. The `access` parameter (with the value `true`) tells whether the token can use this widget.
- `self_employed_widget` — settings of the self-employed registration widget. The `tax_reference` parameter contains the self-employed person's INN.

The response contains the `public_token`.

### Payment form widget

1. Connect the script and styles. For the test environment use `https://widget-demo.bank131.ru/payment-form.css` and `payment-form.js`; for real payments use `https://widget.bank131.ru/payment-form.css` and `payment-form.js`.
2. Add the widget container: `<div id="bank131-payment-form"></div>`.
3. Create the widget instance. After connecting the script, the `Bank131PaymentForm` class becomes available globally. Pass the public token to the constructor.
4. Call `render()` to display the form.

Event handlers:

- `onReady` — the form is ready to work;
- `onPaymentStart` — the payment process started;
- `onPaymentSuccess` — the payment finished successfully;
- `onPaymentFail` — the payment failed;
- `onDestroy` — the form is closed.

Settings in the constructor: `isCvcMasked` (mask the CVC/CVV code while typing), `hideCardHolderField` (hide the cardholder field). The `customerInteractionRedirect.target` parameter controls how the 3D Secure window opens: `_blank`, `_self`, `_parent`, or `_top` (default). Using `_self` is not recommended.

### FPS widget

1. Connect the script and styles: `https://widget-demo.bank131.ru/sbp-payment.css` and `sbp-payment.js` for the test environment, `https://widget.bank131.ru/sbp-payment.css` and `sbp-payment.js` for real payments.
2. Add the widget container: `<div id="bank131-sbp-payment"></div>`.
3. Create the widget instance with the `Bank131SBPPayment` class, passing the public token to the constructor.
4. Call `render()`.

Event handlers: `onReady`, `onSBPStart`, `onSBPSuccess`, `onSBPFail`.

### Tokenization widget

Use the widget to store bank card data in Bank 131.

1. Get a public token, passing the widget type `tokenize_widget` in the `token` request.
2. Connect the script and styles: `https://widget-demo.bank131.ru/card-tokenizer.css` and `card-tokenizer.js` for the test environment, `https://widget.bank131.ru/card-tokenizer.css` and `card-tokenizer.js` for real operations.
3. Add the widget container: `<div id="bank131-card-tokenizer"></div>`.
4. Create the widget instance with the `Bank131CardTokenizer` class, passing the public token to the constructor.
5. Call `render()`.

The `onTokenizationSuccess` handler receives the `cardToken` object with the card hash in `token`, and card information in `info`: `card_network` (for example, `visa`), `card_type`, and `masked_card_number`. Save the hash and use it for repeated payouts to the same card — it is safe. To check the hash data, use the `token/info` method.

The `onTokenizationFail` handler is called when tokenization fails.