Visual Customization

The Card Enrollment SDK supports visual customization through CSS custom properties. You can adjust colors for buttons, inputs, checkboxes, links, and overlays to match your brand.

Customization is applied using the CardEnrollmentSdk.setStyle() method, which is called independently from openForm.

Available Properties

CSS Custom Property	Default	Description
`--btn-primary-bg-color`	`#000`	Primary button background color (e.g. Submit, Continue, Save)
`--checkbox-bg-color--checked`	`#000`	Checkbox background color when selected
`--input-color`	`#767676`	Text color inside form input fields
`--input-border-color`	`#e6e8eb`	Input field border color in its normal state
`--input-border-color--error`	`#f04437`	Input field border color when there is a validation error
`--terms-link-color`	`#000`	Color of Terms & Conditions and Privacy Policy links
`--overlay-bg-color`	`rgba(81,96,120,0.75)`	Background color of screen overlays (modals, pop-ups, dimmed backgrounds)

Usage

Call CardEnrollmentSdk.setStyle() with a colors object containing the properties you want to override. You only need to include the properties you want to change — all others will use their defaults.

CardEnrollmentSdk.setStyle({
  colors: {
    '--btn-primary-bg-color': '#6200ee',
    '--checkbox-bg-color--checked': '#6200ee',
    '--input-border-color': '#cccccc',
    '--overlay-bg-color': 'rgba(0, 0, 0, 0.5)',
  }
});

setStyle should be called after openForm. The styles are applied automatically once the SDK loads. For example:

// Initiates card enrollment UI
CardEnrollmentSdk.openForm({
  companyName: "Your company name",
  subaccountId: "67bc3887-4e25-49cf-bea7-326d808acb5f",
  getAccessToken: async () => 'valid-json-web-token',
  onSuccess: (data) => console.log(data),
  onError: (data) => console.log(data),
  onCancel: () => console.log("The user abandoned the enrollment flow."),
});

// Apply custom styles
CardEnrollmentSdk.setStyle({
  colors: {
    '--btn-primary-bg-color': '#1a73e8',
    '--terms-link-color': '#1a73e8',
  }
});

All color values must be valid CSS color strings (hex, rgb(), rgba(), or named colors). Only the properties listed above are supported — any other CSS variables will be ignored.

📘
These are the only visual customizations currently available. The SDK does not support custom fonts, layouts, or additional component styling. For consent message customization, see Installation.