Styling & Customization

This reference outlines the configuration options available for customizing the visual appearance of the CodaCard secure fields. You can adjust the form's style to match your brand's identity by passing a customStyle object within the appearance parameter during initialization.

Customizing the Form Style

To style your components, define a customStyle object. This object supports a variety of CSS-like properties that control everything from typography to field borders.

appearance.customStyle Properties

The following attributes are currently supported. If you require additional fields for your integration, they can be extended upon request.

Property	Description
backgroundColor	The background color of the form container.
fontFamily	The font family used for labels and input text.
fontWeight	The thickness of the text.
fontSize	The size of the text within the fields.
borderRadius	The roundness of the input field corners.
verticalSpacing	The vertical margin between form elements.
horizontalSpacing	The horizontal margin between adjacent fields.
titleColor	The color of the section titles.
fieldBackgroundColor	The background color of the individual input fields.
fieldLabelColor	The color of the labels above or inside the fields.
fieldTextColor	The color of the text entered by the user.
fieldBorderColor	The color of the input field borders in their default state.
fieldFocusBorderColor	The color of the border when a field is focused.
fieldPlaceholderColor	The color of the placeholder hint text.
checkBoxActiveBackgroundColor	The background color of a checkbox when checked.
checkBoxDeactiveBackgroundColor	The background color of a checkbox when unchecked.
checkBoxBorderWidth	The thickness of the checkbox border.
checkMarkColor	The color of the checkmark icon itself.

Implementation Example

Pass the customStyle object inside the appearance property when calling codaCard.components().

Code Example

const components = codaCard.components({
  clientSecret: 'eyJ...',
  appearance: {
    customStyle: {
      fontFamily: 'Roboto, sans-serif',
      fontSize: '14px',
      borderRadius: '8px',
      fieldBorderColor: '#D1D5DB',
      fieldFocusBorderColor: '#3B82F6',
      checkBoxActiveBackgroundColor: '#3B82F6'
    }
  }
});

Affected Elements

The styles defined in customStyle are automatically applied across all relevant sub-components in the payment form, including:

• Card Entry Fields: Card Number, Expiry, and Security Code.

• Customer Info: Cardholder Name and Email fields.

• Identity Fields: Document ID and Birth Date (if enabled).

• Selection Elements: Checkboxes and Saved Card list items.