Checkout SDK overview
The checkout.js JavaScript library allows simple payment integrations for merchant sites.
URL Copied to clipboard
https://ap-gateway.mastercard.com/checkout/version/59/checkout.jsFunctions Copied to clipboard
configure()
Prepare the library before payment.
showLightbox()
Show a lightbox to complete payment.
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.
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://ap-gateway.mastercard.com/checkout/version/59/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_initiate_checkout_session_ID>'
},
order: {
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>
...
<div id="embed-target"> </div>
<input type="button" value="Pay with Lightbox" onclick="Checkout.showLightbox();" />
<input type="button" value="Pay with Payment Page" onclick="Checkout.showPaymentPage();" />
...
</body>
</html>