Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                 <head>
   <!-- Use the following src for the script on your form and replace ****version**** with the desired version: src="https://cdn.cardknox.com/ifields/****version****/ifields.min.js" -->
<script src="https://cdn.cardknox.com/ifields/2.6.2006.0102/ifields.min.js"></script>
 </head>

 <form id="payment-form" method="POST">
   <input id="name" name="xName" placeholder="Name" autocomplete="cc-name"></input>
   <br />
   <!-- Use the following src for the iframe on your form and replace ****version**** with the desired version: src="https://cdn.cardknox.com/ifields/****version****/ifield.htm" -->
   <iframe data-ifields-id="ach" data-ifields-placeholder="Checking Account Number" src="https://cdn.cardknox.com/ifields/2.6.2006.0102/ifield.htm"></iframe>
   <input data-ifields-id="ach-token" name="xACH" type="hidden"></input>
   <br />
   <!-- Use the following src for the iframe on your form and replace ****version**** with the desired version: src="https://cdn.cardknox.com/ifields/****version****/ifield.htm" -->
   <iframe data-ifields-id="card-number" data-ifields-placeholder="Card Number" src="https://cdn.cardknox.com/ifields/2.6.2006.0102/ifield.htm"></iframe>
   <input data-ifields-id="card-number-token" name="xCardNum" type="hidden"></input>
   <br />
   <!-- Use the following src for the iframe on your form and replace ****version**** with the desired version: src="https://cdn.cardknox.com/ifields/****version****/ifield.htm" -->
   <iframe data-ifields-id="cvv" data-ifields-placeholder="CVV" src="https://cdn.cardknox.com/ifields/2.6.2006.0102/ifield.htm"></iframe>
   <input data-ifields-id="cvv-token" name="xCVV" type="hidden"></input>
   <br />
   <input id="amount" name="xAmount" placeholder="Amount"></input>
   <br />
   <input id="month" name="xMonth" placeholder="Month" autocomplete="cc-exp-month"></input>
   <br />
   <input id="year" name="xYear" placeholder="Year" autocomplete="cc-exp-year"></input>
   <br />
   <input id="submit-btn" type="submit" value="Submit"></input>
   <br />
   <input id="clear-btn" type="button" value="Clear"></input>
   <br />
   <label id="transaction-status"></label>
   <br />
   <label data-ifields-id="card-data-error"></label>
   <br />
   <div class="results">
     <label>ACH Token: </label><label id="ach-token"></label>
     <br />
     <label>Card Token: </label><label id="card-token"></label>
     <br />
     <label>CVV Token: </label><label id="cvv-token"></label>
   </div>
   <br />
   <br />
 </form>
              
            
!

CSS

              
                body {
  margin: 10px;
}

iframe {
  border: 0 solid black;
  width: 600px;
  height: 45px;
  padding: 0px;
  margin-bottom: 5px;
}

input {
  border: 1px solid black;
  border-radius: 5px;
  font-size: 14px;
  padding: 3px;
  width: 350px;
  height: 30px;
  margin-bottom: 15px;
}

#card-data-error {
  color: red;
}

form {
  width: 500px;
}

#submit-btn, #clear-btn {
  background-color: #3f143e;
  color: #FFF;
  width: 357px;
}

.results {
  background-color: #e8e8e8;
  padding: 20px;
  width: 360px;
}

#ach-token,
#card-token,
#cvv-token {
  word-break: break-all;
  font-weight: 600;
}
              
            
!

JS

              
                document.addEventListener("DOMContentLoaded", function(event) { 
                let defaultStyle = {
                    border: '1px solid black',
                    'font-size': '14px',
                    padding: '3px',
                    width: '350px',
                    height: '30px',
                    borderRadius: '5px'
                };
                                
                let validStyle = {
                    border: '1px solid green',
                    'font-size': '14px',
                    padding: '3px',
                    width: '350px',
                    height: '30px'
                };   

                let invalidStyle = {
                    border: '1px solid red',
                    'font-size': '14px',
                    padding: '3px',
                    width: '350px',
                    height: '30px'
                };

                /*
                 * [Optional]
                 * You can enable allowing the user to submit the form by pressing the 'enter' key on their keyboard when the ifield is focused by calling
                 * enableAutoSubmit(formElementId)
                 * 
                 * The formElementId is the id of your form that gets submit when the user presses 'enter' on their keyboard.
                 * 
                 * Note: If this feature is enabled, the getTokens must be handled in a submit event listener for the form as that event is what gets triggered.
                 */
                enableAutoSubmit('payment-form');
                
                /*
                * [Optional]
                * You can enable 3DS Protection using enable3DS(amountElementId, monthElementId, yearElementId, waitForResponse, waitForResponseTimeout)
                *
                * The amountElementId, monthElementId, and yearElementId parameters are the ids for the html elements that contain the resepective values for those fields.
                * 
                * The waitForResponse parameter is an optional flag that indicates whether the getToken function should wait for 3DS data if it did not yet 
                * recieve it before generating the tokens (the default value is true). If the value is set to false, the tokens will be created without 3DS protection.
                * 
                * The waitForResponseTimeout parameter is how long it should wait for a 3DS response before creating the token without it (the default value is 20,000ms).
                *
                * Note: The timeout for waitForResponse and getToken are not cumulative. If they are the same value and the waitForResponse timeout is hit, the getToken timeout
                * will trigger as well.
                */
                enable3DS('amount', 'month', 'year', true, 20000);

                /*
                 * [Optional]
                 * You can customize the iFields by passing in the appropriate css as JSON using setIfieldStyle(ifieldName, style)
                 */
                setIfieldStyle('ach', defaultStyle);
                setIfieldStyle('card-number', defaultStyle);
                setIfieldStyle('cvv', defaultStyle);

                /*
                 * [Required]
                 * Set your account data using setAccount(ifieldKey, yourSoftwareName, yourSoftwareVersion).
                 */
                setAccount('ifieldssamplekey_7e133696ce254383824cdff436c50c7b', 'iFields_Sample_Form', '1.0');
                
                /*
                 * [Optional]
                 * Use enableAutoFormatting(separator) to automatically format the card number field making it easier to read
                 * The function contains an optional parameter to set the separator used between the card number chunks (Default is a single space)
                 */
                enableAutoFormatting();

                /*
                 * [Optional]
                 * Use addIfieldCallback(event, callback) to set callbacks for when the event is triggered inside the ifield
                 * The callback function receives a single parameter with data about the state of the ifields
                 * The data returned can be seen by using alert(JSON.stringify(data));
                 * The available events are ['input', 'click', 'focus', 'dblclick', 'change', 'blur', 'keypress']
                 * 
                 * The below example shows a use case for this, where you want to visually alert the user regarding the validity of the card number, cvv and ach ifields
                 */
                 addIfieldCallback('input', function(data) {
                    if (data.ifieldValueChanged) {
                        setIfieldStyle('card-number', data.cardNumberFormattedLength <= 0 ? defaultStyle : data.cardNumberIsValid ? validStyle : invalidStyle);
                        if (data.lastIfieldChanged === 'cvv'){
                            setIfieldStyle('cvv', data.issuer === 'unknown' || data.cvvLength <= 0 ? defaultStyle : data.cvvIsValid ? validStyle : invalidStyle);
                        } else if (data.lastIfieldChanged === 'card-number') {
                            if (data.issuer === 'unknown' || data.cvvLength <= 0) {
                                setIfieldStyle('cvv', defaultStyle);
                            } else if (data.issuer === 'amex'){
                                setIfieldStyle('cvv', data.cvvLength === 4 ? validStyle : invalidStyle);
                            } else {
                                setIfieldStyle('cvv', data.cvvLength === 3 ? validStyle : invalidStyle);
                            }
                        } else if (data.lastIfieldChanged === 'ach') {
                            setIfieldStyle('ach',  data.achLength === 0 ? defaultStyle : data.achIsValid ? validStyle : invalidStyle);
                        }
                    }
                });

                /*
                 * [Optional]
                 * You can set focus on an ifield by calling focusIfield(ifieldName), in this case a delay is added to ensure the iframe has time to load
                 */ 
                let checkCardLoaded = setInterval(function() {
                    clearInterval(checkCardLoaded);
                    focusIfield('card-number');
                }, 1000);

                /*
                 * [Optional]
                 * You can clear the ifield by calling clearIfield(ifieldName)
                 */
                document.getElementById('clear-btn').addEventListener('click', function(e){
                    e.preventDefault();
                    clearIfield('card-number');
                    clearIfield('cvv');
                    clearIfield('ach');
                });

                /*
                 * [Required]
                 * Call getTokens(onSuccess, onError, [timeout]) to create the SUTs. * Pass in callback functions for onSuccess and onError. Timeout is an optional 
                 * parameter that will exit the function if the call to retrieve the SUTs take too long. The default timeout is 60 seconds. It takes an number value
                 * marking the number of milliseconds.
                 * 
                 * If autoSubmit is enabled, this must be done in a submit event listener for the form element.
                 */
                document.getElementById('payment-form').addEventListener('submit', function(e){
                    e.preventDefault();
                    document.getElementById('transaction-status').innerHTML = 'Processing Transaction...';
                    let submitBtn = this;
                    submitBtn.disabled = true;
                    getTokens(function() { 
                            document.getElementById('transaction-status').innerHTML  = '';
                            document.getElementById('ach-token').innerHTML = document.querySelector("[data-ifields-id='ach-token']").value;
                            document.getElementById('card-token').innerHTML = document.querySelector("[data-ifields-id='card-number-token']").value;
                            document.getElementById('cvv-token').innerHTML = document.querySelector("[data-ifields-id='cvv-token']").value;
                            submitBtn.disabled = false;

                            //The following line of code has been commented out for the benefit of the sample form. Uncomment this line on your actual webpage.
                            //document.getElementById('payment-form').submit();
                        },
                        function() {
                            document.getElementById('transaction-status').innerHTML = '';
                            document.getElementById('ach-token').innerHTML = '';
                            document.getElementById('card-token').innerHTML = '';
                            document.getElementById('cvv-token').innerHTML = '';
                            submitBtn.disabled = false;
                        },
                        30000
                    );
                });
            });
              
            
!
999px

Console