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
  1. User proceeds to payment, for example, by clicking the Pay button.
  2. You send a request for creating a payment to YooMoney.
  3. YooMoney returns a created payment object with a token for initializing the widget.
  4. You initialize the widget.
  5. The widget automatically displays a pop-up window with a payment form.
  6. User selects the payment method and enters their data
  7. Widget redirects the user to the payment confirmation page or displays a pop-up window (for example, for 3-D Secure authentication) if required.
  8. User confirms the payment.
  9. In case of an unsuccessful payment via bank card, Apple Pay, or Google Pay (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.
  10. 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.
  11. You display the relevant information depending on the payment status.
The widget doesn’t send you a notification if the user closes the pop-up window with the payment form. When the user proceeds to checkout again, you need to create the payment and initialize the widget again.
 
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.
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 configuration
    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>

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
Reference of parameters for widget initializationPayment form designInitializing the widget and displaying the payment form