Introduction
Authentication
Batch
Browser Payment
Gateway
Hosted Checkout
Payment Plan
Session
Tokenization
Transaction
Wallet
RESOURCES
Changelog
Checkout
showEmbeddedPage()
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
Copied to clipboard
The ID of the div where the embedded content should be injected.
Return Value Copied to clipboard
None