> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gr4vy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Secure Fields theming

> Each field can be customized to match the brand using the `styles` property
when adding the field.

## 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.

<Frame>
  <img src="https://mintcdn.com/gr4vy/81rUFzs1xxqEKdRI/assets/images/secure-fields/theming.png?fit=max&auto=format&n=81rUFzs1xxqEKdRI&q=85&s=ff97c451624f9030b601668c1703ffaa" alt="Secure Fields Anatomy" width="494" height="388" data-path="assets/images/secure-fields/theming.png" />
</Frame>

<Warning>
  When customizing the visual appearance using theming options, please ensure the design meets accessibility standards set by the [European Accessibility Act (EAA)](https://commission.europa.eu/strategy-and-policy/policies/justice-and-fundamental-rights/disability/union-equality-strategy-rights-persons-disabilities-2021-2030/european-accessibility-act_en). Make sure color choices have enough contrast and text is easy to read for all users.
</Warning>

## Usage

To customize a field, pass an Object containing some [Options](#options)

**Any options override the defaults**.

```js theme={"system"}
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.

```js theme={"system"}
{
  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.

```js theme={"system"}
{
  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:

```css theme={"system"}
/* 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

```js theme={"system"}
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.

```js theme={"system"}
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](/reference/transactions/new-transaction#response-payment-method-scheme) for the full list of schemes.

The logos can be loaded via `https://cdn.<gr4vy_id>.gr4vy.app/assets/icons/card-schemes/<scheme>.svg`
Refer to [card scheme definitions](/reference/card-schemes/list-card-scheme-definitions) for more
information around the schemes and logos.

```js theme={"system"}
cardNumberField.addEventListener('input', function(evt) {
  if (evt.schema && evt.schema === "visa") {
    //change logo where appropriate
  }
});
```