Hosted iFrame Tokenizer
The following entries describe changes to the Hosted iFrame Tokenizer and documentation.
Visit status.cardconnect.com and click subscribe to updates to receive important release and status notifications.
Date Updated: 10/15/2020
The changes below were deployed to the UAT environment on Thursday 10/15/2020. Deployment to the production environment is tentatively planned for Saturday 10/31/2020.
This release includes the changes described in the 3/6/2020 Update, which were previously deployed to the UAT environment only. The changes that are new to this release are outlined in the section below.
New Optional Parameters for Field Validation
The following optional URL parameters have been added to validate and return error messages for input to the Card Number, CVV, and Expiration Date fields:
| Parameter | Default Value | Description |
|---|---|---|
| invalidcreditcardevent | false | If true, a The Note: This parameter should be used in place of |
| invalidcvvevent | false | If true, a The Note: Requires |
| invalidexpiryevent | false | If true, a The Note: Requires |
Hosted iFrame Tokenizer Library for React
If you're developing an application using React.js, a Hosted iFrame Tokenizer npm package is now available to help you quickly integrate the iFrame Tokenizer with your application. This package is provided and maintained by NativeStack Engineering, an independent member of the CardConnect developer community.
Date Updated: 3/6/2020
The following updates have been deployed only to the UAT environment on 3/6/2020, and will be deployed to the production environment at a future date.
URL Parameter Validation
This update includes additional validation to ensure that integrated iFrames are coded following standard best practices. Specifically, it is important that all special characters (including curly braces {} )provided within the iFrame URL parameters are properly URL-encoded, as described in iFrame Styling.
Additional CSS Support
The css parameter now supports custom colors for placeholder text, as well accepting CSS3 media queries for responsive design.
New Optional Parameters
The following optional parameters are new in this release:
| Parameter | Default Value | Description |
|---|---|---|
cardinputmaxlength | 2000 | Controls the maximum character limit for the card number field. Note: Do not set cardinputmaxlength if using a USB card reader. |
| monthnames | January-February-March-April-May-June-July-August-September-October-December | A string value to be used as alternative labels for each month in the drop-down list. The alternative label for each month is separated by a hyphen, starting with the 1st month and ending with the 12th month. Note: The alternative labels are used only when usemonthnames is true. |
| cardnumbernumericonly | false | If true, the card number field ignores non-numeric values. |
maskfirsttwo | false | If true, the first 2 digits of the card number are masked. |
Support for iOS AutoFill Feature
Selecting the Card Number input field now triggers the native AutoFill feature on iOS devices when using Safari. This allows users to enter card data by selecting a card stored in the Wallet, or by using the device's camera scan a physical card.
Note: The ability to store or save card details in the browser remains disabled.
Additional Character Support for Placeholder Values
The maximum character limit for the placeholder parameter has been increased to 60 characters.
Support for the following accented and special characters has been added: Á, É, Í, Ñ, Ó, Ú, Ü, à, á, â, ä, ã, ā, ç ,è, é, ê, ē, í, î, ī, ñ, ó, ô, ö, ō, õ, ú, û, ü, ū, ß, ё, й, ъ, ы, э, щ.
Date Updated: 8/13/2019
This release includes the following updates:
Support for CVV and Expiry Fields
The iFrame Tokenizer now supports fields for capturing the CVV and Expiry values and storing these values in the token. Additionally, these fields can contain placeholder values.
See Examples for sample implementations including the CVV and Expiry fields.
The following URL parameters have been added to support this feature:
| Parameter | Type | Description |
|---|---|---|
useexpiry | Boolean | If true, includes two drop-down selectors to specify the expiration month (MM) and Year (YYYY). |
| useexpiryfield | Boolean | If true, uses displays entry fields instead of drop-down selectors. The Month field supports 2-digit month values from 1-12 (including support for leading zeros for single-digit months, for example "01"). The Year field supports a 4-digit year value within the next 20 years (including the current year). |
| usemonthnames | Boolean | If true, displays Month names instead of numbers. |
usecvv | Boolean | If true, includes a field to enter the Cardholder Verification Value (CVV). Notes:
|
| orientation | AN | Controls the orientation of the elements within the iFrame. Supported values are:
|
| cardlabel | N | Controls the text inside the label for the card number field. This label is only present when either useexpiry or usecvv are true. |
| expirylabel | N | Controls the text inside the label for the expiration date selectors. The label is only present when useexpiry is true. |
| cvvlabel | N | Controls the text inside the label for the CVV field. The label is only present when usecvv is true. |
| placeholdercvv | N | A placeholder value to display in the CVV field. The placeholder value must be a 3 or 4-digit numeric value. |
| placeholdermonth | N | A placeholder value to display in the Month field, in the format MM. |
| placeholderyear | N | A placeholder value to display in the Year field, in the format YYYY. |
Support for Screen Readers
Title tags have been added to the Card Number, Expiry, and CVV fields to enable compatibility with screen reader applications. These fields are now tagged with titles, which can be understood and read by screen reader applications for users with vision impairments.
The default title values are:
- Credit Card Number - "Credit Card Number"
- Expiry Month - "Expiration Month"
- Expiry Year - "Expiration Year"
- CVV - "Card Verification Value"
You can use the following URL parameters to customize the default titles:
| Parameter | Type | Description |
|---|---|---|
| cardtitle | AN | A meaningful custom title for the card number field. |
| expirymonthtitle | AN | A meaningful custom title for the expiry month field. |
| expiryyeartitle | AN | A meaningful custom title for the expiry year field. |
| cvvtitle | AN | A meaningful custom title for the cvv field. |
New Field IDs
The following Field IDs have been added in this release:
iFrame Element | ID |
|---|---|
| Card Number Label | cccardlabel |
| Card Number Field | ccnumfield |
| Expiry Label | ccexpirylabel |
| Expiry Month Dropdown | ccexpirymonth |
| Expiry Year Dropdown | ccexpiryyear |
| Expiry Month Field | ccexpiryfieldmonth |
| Expiry Year Field | ccexpiryfieldyear |
| CVV Label | cccvvlabel |
| CVV Field | cccvvfield |
Clear Fields when Modified
After a token is returned, if a user modifies any field on the form, all fields are cleared and must be re-entered before a new tokenization request can be made.
Date Updated: 6/25/2019
This release includes the following updates:
New fullmobilekeyboard URL Parameter
The iFrame Tokenizer includes a new fullmobilekeyboard URL parameter to allow users to enter a forward slash (/) when entering an ACH routing/account number string.
Card Expiry Returned for for IDTECH USB Card Readers
The iFrame Tokenizer response message now includes the expiry when you use a supported IDTECH USB card reader device (IDTECH SREDkey or IDTECH SecuRED) to capture card data. The expiry and name on card (if available) are captured and stored in the data associated with the token.
Additional CSS Parameters
The following CSS parameters are now whitelisted for use with the iFrame Tokenizer:
- appearance:
- -moz-appearance:
- -webkit-appearance: