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, Apple Pay, Google Pay, and Sberbank Online/SberPay.
YooMoney Checkout Widget’s payment form
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 for payments via bank cards: if a payment didn’t go through, the widget displays an error message to the user and prompts 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 SberBank Online/SberPay.
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.
- User proceeds to payment.
- You send a request for creating a payment to YooMoney.
- YooMoney returns the created payment object with a token for initializing the widget.
- You initialize the widget and display the form on the payment page.
- User selects a payment method, enters their details.
- Widget redirects the user to the payment confirmation page or displays a pop-up window (for example, for 3-D Secure authentication) if required.
- User confirms the payment.
- If the user paid via bank card and the payment didn’t go through (for example, there wasn’t enough money) but the token for initializing the widget hasn’t expired yet, the widget will display an error message and prompt to try paying again with an option to select a different card or payment method.
- 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.
- You display the relevant information depending on the payment status.
Checkout.jsBasics of using the API
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