Card Capture IFrame API

JavaScript API to work with Card Capture IFrame
To initiate the Card Capture IFrame, please insert the 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 the IFrame to 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.
This validation method can be used to get validity from state from your js code. With this you can build workflows on your side based on this information. For example, you can prevent form submission if the card in the iframe is not valid.
This validation also triggers on submit event and does the same validations as you can see in real time. So, if you don't have any external logic which is based on card form validity state you can just use the "submit" method.
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"
  }
}
Channex PCI - Previous
Custom Secure URL Endpoint
Next - Channex PCI
FAQ
Last updated 2 weeks ago