STEP 1
Obtain merchantID and merchantSecret from cardstream. If you intend to send merchantPwd, please configure it on your Merchant Account with cardstream. Optionall choose to enabled 3D Secure.
STEP 2
Activate and edit the cardstream gateway
Steps 3-5 can be skipped if using CheckoutChamp hosted pages
STEP 3
Add the hidden input browserData inside of the same form as the card input.
<input type="hidden" name="browserData" value="" id="browserData">
STEP 4 (if not using CheckoutChamp page builder)
Add this script to your page before the closing body tag.
Script to get browserData:
<script type="text/javascript">
const navigator = window.navigator;
const browserData = {
acceptHeader: 'application/json',
colorDepth: screen.colorDepth,
javaEnabled: navigator.javaEnabled(),
javaScriptEnabled: true,
language: navigator.language,
screenHeight: screen.height,
screenWidth: screen.width,
timeZoneOffset: (new Date()).getTimezoneOffset().toString(),
userAgent: navigator.userAgent
};
document.getElementById('browserData').value = JSON.stringify(browserData);
</script>
STEP 5
If using Secure 3DS be sure the checkout page supports the challenge requests