Smart Fields Types

Virtual Card

TypeDescription
read-only-panThe card’s PAN.
read-only-expirationThe card’s expiration date.
read-only-cvvThe card’s CVV2.

PIN

TypeDescription
pinAllows cardholders to set their PIN code.
new-pinAllows cardholders to set their new PIN code (change PIN method).
old-pinAllows cardholders to enter their current PIN code (change PIN method).

Field options

All Smart Fields accept a common set of options, and then some field specific options.

OptionTypeDescription
classesObjectSet custom class names on the container DOM element when the dLocal Field is in a particular state.
- base - The base class applied to the container. Defaults to dLocalField.
styleObject (Optional)​Customize appearance using CSS properties. Style is specified as an object for any of the variants below.
- base, base style—all other variants inherit from this style

For each of the above, the properties below can be customized.
- color
- fontFamily
- fontSize
- fontSmoothing
- fontStyle
- fontVariant
- iconColor
- lineHeight, to avoid cursors being rendered inconsistently across browsers, consider using a padding on the Field's container instead.
- letterSpacing
- textDecoration
- textShadow
- textTransform

The following pseudo-classes and pseudo-elements can also be styled with the above properties, as a nested object inside the variant.
- :hover
panStyleObject (Optional)Customize the PAN style:
- separatedEach: to set card number intervals.
- spaceBetween: quantity of spaces (in pixels) between intervals. Eg. if you need to expose the card PAN like '1111 2222 3333 4444'
- separatedEach: 4
-* spaceBetween : 1
maskInputBoolean (Optional)Mask the value like an input type password.
hideIconBolean (Optional)Hide the card scheme icon.