A payment with Custom Checkout involves 3 steps:
First, include and initialize Custom Checkout.
<script src='https://libs.na.bambora.com/customcheckout/1/customcheckout.js'></script>
<script>
var customCheckout = customcheckout();
</script>
Second, create and mount the inputs. Mount the custom input to the HTML element using its CSS selector.
<!-- ... -->
<form id="checkout-form">
<div id="card-number"></div>
<div id="card-cvv"></div>
<div id="card-expiry"></div>
<!-- ... -->
</form>
<script>
var customCheckout = customcheckout();
var cardNumber = customCheckout.create('card-number')
cardNumber.mount('#card-number');
// ...
</script>
<!-- ... -->
You can add styling to the inputs when passing the options
argument to customcheckout.create()
.
// Styles to be applied to the text rendered in the iframe
var style = {
error: {
color: 'red',
':focus': {
fontStyle: 'italic',
},
},
};
// Classes to be applied to the element wrapping the iframe
var classes = {
error: 'my-error-class',
};
var options = {
placeholder: 'Card number',
style: style,
classes: classes,
brands: ['visa', 'mastercard'],
};
var cardNumber = customCheckout.create('card-number', options);
Third, add an event listener so that you can handle validation errors.
customCheckout.on('error', function(event) {
if (event.field === 'card-number') {
console.log('Card number has errors: ' + JSON.stringify(event));
} else if (event.field === 'cvv') {
console.log('CVV has errors: ' + JSON.stringify(event));
} else if (event.field === 'expiry') {
console.log('Expiry has errors: ' + JSON.stringify(event));
}
});
customCheckout.on('complete', function(event) {
if (event.field === 'card-number') {
console.log('Card number is complete: ' + JSON.stringify(event));
} else if (event.field === 'cvv') {
console.log('CVV is complete: ' + JSON.stringify(event));
} else if (event.field === 'expiry') {
console.log('Expiry is complete: ' + JSON.stringify(event));
}
});
You request a token for the card data in the Custom Checkout text inputs at any time using customCheckout.createToken
. It will only return a token if the card data is valid, otherwise it will return an error.
The token returned is a nonce. It expires on-use or after 5 minutes.
customCheckout.createToken(function (result) {
if (result.error) {
console.log(result.error.message);
// display error message
} else {
console.log(result.token);
// process token using our Payments API
}
});
Once you have a token representing credit card data, the next step is to pass to one of our APIs via your server. You can either pass it to the Payment API to create a payment immediately, or pass it to the Payment Profile API to save the card data for future payments.
You can find out more about getting up-and-running with our APIs here.