Checkout SDK overview

The checkout.min.js JavaScript library allows simple payment integrations for merchant sites.


URL Copied to clipboard

https://test-gateway.mastercard.com/static/checkout/checkout.min.js

Functions Copied to clipboard

configure()

Prepare the library before payment.

showEmbeddedPage()

Show a hosted payment form embedded into the merchant site.

showPaymentPage()

Redirect to a hosted payment page to complete payment.

saveFormFields()

A default implementation of a beforeRedirect callback.

restoreFormFields()

A default implementation of an afterRedirect callback.


Callbacks Copied to clipboard

error

Invoked when error occurs during initiation of payment.

complete

Invoked when payment has been completed.

cancel

When the payer cancels the payment interaction. Note: Cancel callback can only be used with payment page, it will not work with embedded page.

timeout

Invoked when the payment is not completed within the duration available to the payer to make the payment.

beforeRedirect

Invoked before browser is redirected away from page.

afterRedirect

Invoked when browser returns to page after redirect.


Example Copied to clipboard

<html>
    <head>
        <script src="https://test-gateway.mastercard.com/static/checkout/checkout.min.js"
                data-error="errorCallback"
                data-cancel="cancelCallback">
        </script>
    
        <script type="text/javascript">
            function errorCallback(error) {
                  console.log(JSON.stringify(error));
            }
            function cancelCallback() {
                  console.log('Payment cancelled');
            }
        
            Checkout.configure({
                session: {
                    id:  '<your_initiate_checkout_session_ID>'
                }
            });
            
        </script>
    </head>
    <body>
        ...
    
        <div id="embed-target"> </div>
        <input type="button" value="Pay with Embedded Page" onclick="Checkout.showEmbeddedPage('#embed-target');" />
        <input type="button" value="Pay with Payment Page" onclick="Checkout.showPaymentPage();" />
    
        ...
    </body>
</html>