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.vaultera.co");
Validate Form
To Validate Card Capture form you should trigger validate
event.
const cardCaptureIframe = document.getElementById("cardCaptureIframe");
cardCaptureIframe.contentWindow.postMessage("validate", "https://pci.vaultera.co");
Handle response
To handle responses from Card Capture Form you should create listener
function.
const PCI_PROXY_DOMAIN = "https://pci.vaultera.co";
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.
You can set a list of cards you accept and only these cards would be allowed to be created from an iframe.
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.vaultera.co/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.vaultera.co/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.vaultera.co/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:
de
en
el
es
is
it
pt
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.
Last updated