Checkout

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

Functions

Prepare the library before payment.
Show a lightbox to complete payment.
Redirect to a hosted payment page to complete payment.
A default implementation of a beforeRedirect callback.
A default implementation of an afterRedirect callback.

Callbacks

Invoked when errors occur during payment.
Invoked when payment has been completed.
Invoked when the payer cancels the payment.
Invoked when the payment is not completed within the duration available to the payer to make the payment.
Invoked before browser is redirected away from page.
Invoked when browser returns to page after redirect.

Example

<html>
    <head>
        <script src="https://ap-gateway.mastercard.com/checkout/version/61/checkout.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_create_checkout_session_ID>'
                 },
                merchant: '<your_merchant_id>',
                order: {
                    amount: function() {
                        //Dynamic calculation of amount
                        return 80 + 20;
                    },
                    currency: 'USD',
                    description: 'Ordered goods',
                    id: '<unique_order_id>'
                },
                interaction: {
                    merchant: {
                        name: 'Your merchant name',
                        address: {
                            line1: '200 Sample St',
                            line2: '1234 Example Town'
                        }
                    }
                }
            });
        </script>
    </head>
    <body>
        ...
        <input type="button" value="Pay with Lightbox" onclick="Checkout.showLightbox();" />
        <input type="button" value="Pay with Payment Page" onclick="Checkout.showPaymentPage();" />
        ...
    </body>
</html>

Copyright © 2021 MasterCard