YooMoney Checkout Widget
Using the YooMoney Checkout Widget, you can embed a ready-made payment form on your website. These payment methods will be available to the user: the YooMoney wallet and the bank cards linked to it, any other bank card, SberPay, and FPS.
YooMoney Checkout Widget’s payment form
Key features
The payment form automatically adjusts to the size of the user’s device, checks the entered data and alerts the user if something is entered incorrectly. You can set up the interface language and customize the color scheme of the payment form.
The widget processes unsuccessful attempts of payments via bank cards: if a payment didn’t go through, the widget displays an error message to the user and prompts them to try paying again with an option to select a different card or payment method. You can disable this setting and set up a custom scenario of processing unsuccessful attempts.
The widget allows users to save any supported payment methods for recurring payments except for FPS.
To process a payment via the widget, just create a payment using the YooMoney API, initialize the widget, and display the form on the payment page or in a pop-up window.
You can handle widget events to interact with users after the payment is finished or in case the pop-up window with the payment form is closed.
Payment processing scenario
  1. User proceeds to payment.
  2. You send a request for creating a payment to YooMoney.
  3. YooMoney returns the created payment object with a token for initializing the widget.
  4. You initialize the widget and display the form on the payment page or in a pop-up window.
  5. User selects a payment method, enters their details.
  6. Widget redirects the user to the payment confirmation page or displays a pop-up window (for example, for 3-D Secure authentication) if required.
  7. User confirms the payment.
  8. In case of an unsuccessful payment via bank card (for example, if there wasn’t enough money), the widget displays an error message to the user and prompts them to try paying again with an option to select a different card or payment method if the token for initializing the widget hasn’t expired yet.
  9. If the user has confirmed the payment or if the token for initialization has expired, the widget will redirect the user to the page for finishing the payment on your side or executes the actions that you scripted for the event when the payment is finished.
  10. You display the relevant information depending on the payment status.
Done!
Use Quick start to make your first payment using the YooMoney Checkout Widget.

Do you have any questions or comments regarding the documentation?

We can set up a call and discuss them: we'll help you solve the problem and you'll help us understand what we need to improve. To do that, share your contact information and select the time.
Yes, I'd like to set up a meeting
See also
Typical usage scenarios for the widgetCheckout.jsBasics of using the APIHandling widget events