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 Copied to clipboard

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 additional 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 Copied to clipboard

div

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

Return Value Copied to clipboard

None