showEmbeddedPage()

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.

Example

Checkout.showEmbeddedPage('#embedded');

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>
            </button>
          </div>
          <div class="modal-body">
            <div id="modal-host">
              <!-- Embedded content is injected here -->
            </div>
          </div>
        </div>
      </div>
    </div>

Arguments

div

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

Return Value

None