showEmbeddedPage is used to initiate a payment in an embedded view on your merchant page. Before calling showEmbeddedPage, the Checkout library must be prepared with configure().

The payment result can be obtained with the complete callback, or through out-of-band methods.



You can also display the embedded page in a modal. To do so, just style the targeted div with the frontend framework of your choice and pass an additonal argument into Checkout.showEmbeddedPage():

Checkout.showEmbeddedPage('#modal-host', () => {  // #modal-host is the div where we will inject the content
    $('#embedded-modal').modal();                 // #embedded-modal tells us how to launch it for later use

Here is an example of the associated HTML:

<!-- Modal -->
    <div id="embedded-modal" aria-labelledby="embedded-modal-label" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="embedded-modal-label">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
          <div class="modal-body">
            <div id="modal-host">
              <!-- Embedded content is injected here -->



The ID of the div where the embedded content should be injected.

Return Value


Copyright © 2023 Mastercard