Overview
The outer styling (any containers around fields, etc) is completely in your control. Secure Fields will also generate classes along with a set of data attributes and attach them to the outer<iframe>
containers, so you can target
them with your own CSS. Finally, an object of CSS rules can be passed to the
addCardNumberField
, addExpiryDateField
, addSecurityCodeField
and addField
methods
options to style elements inside the frame(s).

When customizing the visual appearance using theming options, please ensure your design meets accessibility standards set by the European Accessibility Act (EAA). Make sure your color choices have enough contrast and your text is easy to read for all users.
Usage
To customize a field, you can pass an Object containing some Options Any options will override the defaults.Options
Placeholder
A placeholder text for the field can be added as a string.Pattern
A pattern the field value should match can be added as a string (regular expression). This only applies to the postal code field.Styles
Each secure input is wrapped with a div, which you can target with your own CSS using the following selectors: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]
(e.g.:hover
) and values as objects containing base styles
Logos
A scheme logo can be displayed to the customer as part of the user experience. This is possible by listening to thecardNumberField
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.