Secure Fields theming
Each field can be customized to match your 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 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
and addSecurityCodeField
methods
options to style elements inside the frame(s).
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
Styles
Each secure input is wrapped with a div, which you can target with your own CSS using the following selectors:
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]
(e.g.:hover
) and values as objects containing base styles
We only allow certain CSS properties, here’s the full list.
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.
Was this page helpful?