# Checkout JavaScript Library
source: https://developer.mastercard.com/mastercard-gateway/documentation/api-reference/js-libraries/checkout/index.md

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

## URL {#url}

`https://{{host}}/static/checkout/checkout.min.js`

## Functions {#functions}

[configure()](https://network.gateway.mastercard.com/api/documentation/apiDocumentation/checkout/version/100/function/configure.html?locale=en_US)
Prepare the library before payment.

[showEmbeddedPage()](https://network.gateway.mastercard.com/api/documentation/apiDocumentation/checkout/version/100/function/showEmbeddedPage.html?locale=en_US)
Show a hosted payment form embedded into the merchant site.

[showPaymentPage()](https://network.gateway.mastercard.com/api/documentation/apiDocumentation/checkout/version/100/function/showPaymentPage.html?locale=en_US)
Redirect to a hosted payment page to complete payment.

[saveFormFields()](https://network.gateway.mastercard.com/api/documentation/apiDocumentation/checkout/version/100/function/saveFormFields.html?locale=en_US)
A default implementation of a beforeRedirect callback.

[restoreFormFields()](https://network.gateway.mastercard.com/api/documentation/apiDocumentation/checkout/version/100/function/restoreFormFields.html?locale=en_US)
A default implementation of an afterRedirect callback.

## Callbacks {#callbacks}

[error](https://network.gateway.mastercard.com/api/documentation/apiDocumentation/checkout/version/100/callback/error.html?locale=en_US)
Invoked when error occurs during initiation of payment.

[complete](https://network.gateway.mastercard.com/api/documentation/apiDocumentation/checkout/version/100/callback/complete.html?locale=en_US)
Invoked when payment has been completed.

[cancel](https://network.gateway.mastercard.com/api/documentation/apiDocumentation/checkout/version/100/callback/cancel.html?locale=en_US)
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](https://network.gateway.mastercard.com/api/documentation/apiDocumentation/checkout/version/100/callback/timeout.html?locale=en_US)
Invoked when the payment is not completed within the duration available to the payer to make the payment.

[beforeRedirect](https://network.gateway.mastercard.com/api/documentation/apiDocumentation/checkout/version/100/callback/beforeRedirect.html?locale=en_US)
Invoked before browser is redirected away from page.

[afterRedirect](https://network.gateway.mastercard.com/api/documentation/apiDocumentation/checkout/version/100/callback/afterRedirect.html?locale=en_US)
Invoked when browser returns to page after redirect.

## Example {#example}

```HTML
<html>
    <head>
        <script src="https://{{host}}/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>
```

