YooMoney Checkout Widget: displaying in a pop-up window — Payment acceptance via the YooMoney API

Displaying of the widget in a pop-up window

You can control how the widget is displayed: on your payment page or in a pop-up window.

Placing the widget on the payment page (main method): you develop a payment page with a container for placing the payment form and initialize the widget: user proceeds to your payment page, selects a payment method and confirms the payment. Learn more about placing the widget on the payment page

Displaying the widget in a pop-up window: you only need to initialize the widget. When the user proceeds to checkout, the widget displays a pop-up window with the payment form in your interface. In this window, user selects the payment method and confirms the payment.

Example of the widget in a pop-up window

Payment processing scenario

User proceeds to payment, for example, by clicking the Pay button.
You send a request for creating a payment to YooMoney.
YooMoney returns a created payment object with a token for initializing the widget.
You initialize the widget.
The widget automatically displays a pop-up window with a payment form.
User selects the payment method and enters their data.
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 a payment doesn't go through (for example, if there wasn't enough money) and the token for initializing the widget hasn't expired yet, the widget displays an error message to the user and prompts them to try again and select the payment method once more.
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.

Instructions for initializing the payment form

In order for the payment form to open in a pop-up window, you need to specify the modal parameter with the true value in the customization object when initializing the widget. Call the render method to display the payment form.

You can get a notification in case the user closes the pop-up window and handle this event, for example, you can inform the user that the payment is incomplete.

If necessary, you can customize the color scheme of the payment form and how payment methods are displayed.

HTML
<!--Library implementation-->
<script src="https://yookassa.ru/checkout-widget/v1/checkout-widget.js"></script>

<script>
//Widget initialization. All parameters are required except for the customization object.
const checkout = new window.YooMoneyCheckoutWidget({
    confirmation_token: 'confirmation-token', //Token that must be obtained from YooMoney before the payment process
    return_url: 'https://example.com', //URL to the payment completion page

    //Widget customization
    customization: {
        //Configuring how the widget is displayed
        modal: true
    },
    error_callback: function(error) {
        //Processing of initialization errors
    }
});

//Displaying of payment form in a pop-up window
checkout.render()
//The method returns Promise. When Promise is executed, it means the payment form is fully loaded (optional use).
  .then(() => {
     //Code that must be executed after the payment form is displayed.
});
</script>