Card Capture IFrame API

JavaScript API to work with Card Capture IFrame

To initiate Card Capture IFrame, please insert IFrame tag into your target page.

<iframe
id="cardCaptureIframe"
height="300"
scrolling="no"
style="border: 0;"
src="{{cardCaptureIframeUrl}}">
</iframe>

Where cardCaptureIframeUrl is valid Card Capture URL.

IFrame communication

To communicate with IFrame and submit form or get results you should use postMessage browser API.

Submit Form

To submit Card Capture form you should trigger submit event.

const cardCaptureIframe = document.getElementById("cardCaptureIframe");
cardCaptureIframe.contentWindow.postMessage("submit", "https://pci.channex.io");

Validate Form

To Validate Card Capture form you should trigger validate event.

const cardCaptureIframe = document.getElementById("cardCaptureIframe");
cardCaptureIframe.contentWindow.postMessage("validate", "https://pci.channex.io");

Handle response

To handle responses from Card Capture Form you should create listener function.

const listener = (event) => {
if (event.origin !== PCI_PROXY_DOMAIN) {
return;
}
if (event.data.valid) {
console.log("card valid: ", event.data.valid);
}
if (event.data.success) {
console.log(event.data);
}
}
‚Äč
window.addEventListener("message", listener);

Validate response

{
"event_type": "validate",
"valid": true|false
}

Submit response

{
"event_type": "submit",
"success": true,
"card": {
"card_number": "411111******1111",
"card_token": "<token>",
"cardholder_name": "JHON DOE",
"expiration_month": "11",
"expiration_year": "2023",
"service_code": "***",
"card_type": "visa"
}
}