Skip to main content

​
Overview

The outer styling (any containers around fields, etc) is completely in your control. Secure Fields also generates classes along with a set of data attributes and attaches them to the outer <iframe> containers, so they can be targeted with custom CSS. Finally, an object of CSS rules can be passed to the addCardNumberField, addExpiryDateField, addSecurityCodeField and addField methods options to style elements inside the frames.
Secure Fields Anatomy
When customizing the visual appearance using theming options, please ensure the design meets accessibility standards set by the European Accessibility Act (EAA). Make sure color choices have enough contrast and text is easy to read for all users.

​
Usage

To customize a field, pass an Object containing some Options Any options override the defaults. 
secureFields.addCardNumberField({
  placeholder: "Enter card number",
  styles: {
    color: "black",
    fontSize: "18px",
    ":focus": {
      color: "blue",
    },
  },
});

​
Options

​
Placeholder

A placeholder text for the field can be added as a string. 
{
  placeholder: "Enter card number";
}

​
Pattern

A pattern the field value should match can be added as a string (regular expression). This only applies to the postal code field. 
{
  pattern: "[A-Z]{1,}[0-9]{1,}[A-Z]{0,}\\s[0-9]{1,}[A-Z]{0,}"; // naive UK zip codes pattern match
}

​
Styles

Each secure input is wrapped with a div, which can be targeted with custom CSS using the following selectors: 
/* Applied to each field */
.secure-fields__input {
}
/* Applied to the card number field */
.secure-fields__input--number {
}
/* Applied to the expiry date field */
.secure-fields__input--expiry-date {
}
/* Applied to the security code field */
.secure-fields__input--security-code {
}
/* Applied to a focused field */
.secure-fields__input[data-secure-fields-focused] {
}
/* Applied to an invalid field */
.secure-fields__input[data-secure-fields-invalid] {
}
/* Applied to an autofilled field */
.secure-fields__input[data-secure-fields-autofilled] {
}
For styling the element inside the secure input, CSS rules can be added to a styles Object this way:
  • Base styles are declared by setting keys in camelCase format (PascalCase for vendor-prefixed properties) and values as strings
  • Hover, focus and other states are declared by setting keys to :[state] (for example :hover) and values as objects containing base styles
const styles = {
  // Default styles (any of the supported CSS property)
  color: ...,
  // Rules applied when the field has its value autofilled by a browser / extension
  ':autofill': { ... },
  // Rules applied when the field is hovered
  ':hover': { ... },
  // Rules applied when the field is focused
  ':focus': { ... },
  // Rules applied when the field is disabled
  ':disabled': { ... },
  // Rules applied when the field is valid
  ':valid': { ... },
  // Rules applied when the field is invalid
  ':invalid': { ... },
  // Rules applied to the field placeholder
  '::placeholder': { ... },
}
We only allow certain CSS properties, here’s the full list. 
backgroundColor;
boxShadow;
caretColor;
color;
colorScheme;
cursor;
font;
fontFamily;
fontFeatureSettings;
fontKerning;
fontSize;
fontSizeAdjust;
fontStretch;
fontStyle;
fontVariant;
fontVariantAlternates;
fontVariantCaps;
fontVariantEastAsian;
fontVariantLigatures;
fontVariantNumeric;
fontVariationSettings;
fontWeight;
letterSpacing;
lineHeight;
opacity;
padding;
textAlign;
textShadow;
textRendering;
transition;
MozOsxFontSmoothing;
WebkitFontSmoothing;

​
Logos

A scheme logo can be displayed to the customer as part of the user experience. This is possible by listening to the cardNumberField and displaying the appropriate scheme logo. Refer to payment_method.scheme for the full list of schemes. The logos can be loaded via https://api.<gr4vy_id>.gr4vy.app/assets/icons/card-schemes/<scheme>.svg Refer to card scheme definitions for more information around the schemes and logos. 
cardNumberField.addEventListener('input', function(evt) {
  if (evt.schema && evt.schema === "visa") {
    //change logo where appropriate
  }
});