THE CHALLENGE

Historically, web developers would create a checkout page that included credit input fields, which would in turn be submitted to their own web servers. This approach provided full control over the user experience, but made the sensitive credit card data vulnerable to malware and hacking, requiring the website to maintain a stricter level of PCI compliance.

To avoid the security issues, developers began using third-party payment forms hosted in iframes or redirecting users to a third party checkout page. While this removed them from PCI scope, the developer lost control over the user experience.

THE SOLUTION

Cardknox iFields allows a developer to maintain full control of the user experience, without their website having access to the credit card data. Since Cardknox is certified as PCI level 1, websites using iFields remain fully PCI-compliant.

Fully PCI-compliant

HOW IT WORKS

Cardknox iFieldsTM are code snippets that you add to your form in place of the credit card fields. You then place a JavaScript click handler on the form submission. When the submit button is clicked, the credit card data is sent directly to Cardknox, bypassing your web server, and a single-use token is returned and populated in a hidden form field. The token in the hidden form field is sent with the rest of the data to your server. Your server sends the token(s) to Cardknox in place of the sensitive card data and the transaction is completed using the token's associated credit card data.

technical instructions

Here are 7 steps how our whole iFrame implementation works. You can view code at the right hand side of your screen as a reference.

1 / 7

Add the ifields.min.js file as a script on your page

Example

<script src="https://cdn.cardknox.com/ifields/2.4.1812.1101/ifields.min.js"></script>
  
2 / 7

Add an iframe to your payment form and set the following attributes

data-ifields-id="card-number"

src="https://cdn.cardknox.com/ifields/2.4.1812.1101/ifield.htm"

Optional data-ifields-placeholder="Your Placeholder Text Here"

Example

<iframe data-ifields-id="card-number" data-ifields-placeholder="Card Number" src="https://cdn.cardknox.com/ifields/2.4.1812.1101/ifield.htm"></iframe>

3 / 7

Add a hidden input with an attribute of data-ifields-id

and give it a value of card-number-token

Suggested Name is xCardNum

Example

<input data-ifields-id="card-number-token" name="xCardNum" type="hidden"></input>
4 / 7

This step is only required if you wish to capture CVV data

Add an iframe to your payment form and set the following attributes

data-ifields-id="cvv"

src="https://cdn.cardknox.com/ifields/2.4.1812.1101/ifield.htm"

Optional data-ifields-placeholder="Your Placeholder Text Here"

Example

<iframe data-ifields-id="cvv" data-ifields-placeholder="CVV" src="https://cdn.cardknox.com/2.4.1812.1101/ifield.htm"></iframe>
5 / 7

This step is only required if you wish to capture CVV data

Add a hidden input with an attribute of

data-ifields-id and give it a value of cvv-token

Suggested Name is xCVV

Example

<input data-ifields-id="cvv-token" name="xCVV" type="hidden"></input>
6 / 7

Optional

Add a label with an attribute of data-ifields-id

and a value of card-data-error

Example

<label data-ifields-id="card-data-error" style="color: red;"></label>

All errors from the iFields will be displayed in this label

7 / 7

In your Javascript call setAccount() and pass in SampleKey, SoftwareName and SoftwareVersion

Example

setAccount('ifields_Your-Cardknox-iFields-Key', 'iFields_Sample', '1.0');

Important: Do NOT send in your regular Cardknox key as it will be exposed.

On submit, call getTokens() and the token values will be validated and set in the designated hidden fields.

You can pass in a callback function to run if the tokens are obtained and validated successfully getTokens(onSuccess, onError, [timeout])

(This should be used to perform any validation you may want to run and to submit the form after the tokens are successfully received)

You may also pass in a callback function to run if an error occurs when trying to obtain or validate the tokens

You can pass an amount of time in milliseconds to timeout the request (default is 30,000)

Example

document.getElementById('submit-btn').addEventListener('click', function(e){
     e.preventDefault();
     document.getElementById('transaction-status').innerHTML = 'Processing Transaction...';
     let submitBtn = this;
     submitBtn.disabled = true;
     getTokens(function() {
          submitBtn.disabled = false;
          document.getElementById('payment-form').submit(); /*Here your form gets submitted to your server-side code*/
          },
          function() {
          document.getElementById('transaction-status').innerHTML = '';
          submitBtn.disabled = false;
          },
          30000
     );
});

STYLING IFIELDS

A style can be set for each iField by calling the setfieldstyle function and passing in the data-ifields-id value of the iframe you want to style along with styles in JSON format.
Each iField can be given its own style or you can use a shared variable to have them all look the same.