Working with iFields

iFields Overview

Cardknox offers the iFields solution to allow the merchant to remain outside of the PCI compliance scope. Their documentation is a little lacking in certain areas and I had to figure it out through trial and error.

The way this solution works is the credit card number and CVV fields are actually iframes so the card information never goes to the merchant's web server. Instead, there's a piece of JavaScript that sends the information to Cardknox's server and returns non-sensitive one-time-use tokens for each. These are then sent in place of the card number and CVV fields in the API call.

<div>
    <p><label data-ifields-id="card-data-error"></label></p>
    <div>
        <iframe data-ifields-id="card-number" data-ifields-placeholder="Card Number" src="https://cdn.cardknox.com/ifields/latest/ifield.htm"></iframe>
        <input data-ifields-id="card-number-token" name="xCardNum" type="hidden" />
    </div>
    <div>
        <iframe data-ifields-id="cvv" data-ifields-placeholder="CVV" src="https://cdn.cardknox.com/ifields/latest/ifield.htm"></iframe>
        <input data-ifields-id="cvv-token" name="xCVV" type="hidden" />
    </div>
    <input type="submit" value="Submit" id="submit-btn" />
</div>
<script src="https://cdn.cardknox.com/ifields/latest/ifields.min.js" type="text/javascript"></script>

Then, in script tags:

document.addEventListener("DOMContentLoaded", function (event) {
    setAccount('{iFieldsKey}', '{SoftwareName}', '{SoftwareVersion}');

    enableAutoFormatting();

    document.getElementById('submit-btn').addEventListener('click', function(e){
        e.preventDefault();
        let submitBtn = this;
        submitBtn.disabled = true;
        getTokens(function() {
                submitBtn.disabled = false;

                document.getElementById('form1').submit();
            },
            function() {
                submitBtn.disabled = false;
            },
            30000
        );
    });
});

For the full documentation on styling iFields, please refer to https://docs.cardknox.com/cardknox-products/ifields. The purpose of this document isn't to document iFields, but only to show how to interact with iFields using the Cardknox API.

At this point, any of the Credit Card operations will work.

string cardToken = Request["xCardNum"];
string cvvToken = Request["xCVV"];
CCSave save = new CCSave
{
    CardNum = cardToken,
    CVV = cvvToken,
    Exp = ExpirationDate
};
Cardknox c = new Cardknox(new CardknoxRequest("CardknoxKey", "SoftwareName", "SoftwareVersion"));
CardknoxResponse resp = c.CCSave(save);