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.

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"
  }
}

IFrame configuration

Accepted card types

Param: only|except

Value: list of card types

Default: none

You can pass additional query param for card capture iframe and configure which cards you accept. This can be done in two ways.

1. You can set a list of cards you accept and only these cards would be allowed to be created from an iframe.

2. You can provide a list of cards you want to exclude, for example American Express.

To configure the list of card types you want to accept you should provide a only query param with a list of card types.

Example to accept only visa and mastercard:

https://pci.channex.io/api/v1/capture_form?session_token=<SESSION_TOKEN>&only=visa,mastercard

To accept all cards except some specific type you should provide except query params with list of card types.

Example to exclude American Express:

https://pci.channex.io/api/v1/capture_form?session_token=<SESSION_TOKEN>&except=american-express

List of card types:

• visa

• mastercard

• american-express

• money-club

• discover

• jcb

• unionpay

• maestro

• link

• me

• hyper

• hypercard

So if you want just to accept all cards except American Express you need to modify your card capture iframe url to something like this

https://pci.channex.io/api/v1/capture_form?session_token=<SESSION_TOKEN>&except=american-express

Custom styles

Param: style

Value: style name

Default: none

Card capture iframe can be customized with your own css to match your needed look and feel. To load additional css styles you need to provide style query param with styles name. These styles can be added to your account by contacting support.

Language

Param: lang

Value: en|ru

Default: en

To change language of your capture form lang query param needed to be specified.

Supported languages:

• en

• ru

Any additional language can be added by contacting support.

Service Code

Optional

Param: service_code_optional

Value: true|false

Default: false

Make service code optional and not require.

Hidden

Param: service_code_visible

Value: true|false

Default: true

Make service code not visible.