Styling & Customization

Style Object

Pass a style object when creating the card element:

style: {
  fontFamily: 'Inter',
  fillParent: true,

  inputContainer: {
    backgroundColor: '#F5F5F5',
    borderRadius: '8px',
    borderEnabled: true,
    borderColor: '#E0E0E0'
  },

  input: {
    textColor: '#1A1A1A',
    placeholderColor: '#999999',
    backgroundColor: 'transparent'
  },

  button: {
    backgroundColor: '#0070F3',
    textColor: '#FFFFFF',
    borderRadius: '8px',
    fontSize: '16px',
    fontWeight: 600,
    hover: {
      backgroundColor: '#0051CC'
    },
    disabled: {
      opacity: 0.5
    }
  },

  successUI: {
    backgroundColor: '#F5F5F5',
    primaryTextColor: '#1A1A1A',
    secondaryTextColor: '#999999'
  }
}

Style Properties

Property	Description
`fontFamily`	Font used in the form (e.g. `'Inter'`, `'DM Sans'`, `'Poppins'`, `'Nunito'`)
`fillParent`	Whether the form fills its parent container
`inputContainer`	Background, border, and radius of input wrappers
`input`	Text color, placeholder color, and background of input fields
`button`	Pay button appearance: colors, radius, font, hover and disabled states
`successUI`	Built-in success screen colors (title, subtitle, background)
`generalError`	Styling for general error messages
`disclaimerColor`	Color of disclaimer text
`fieldErrorColor`	Color of field-level validation errors
`dark`	Dark mode overrides (same structure as the properties above)

Dark Mode

Add a dark key with overrides:

style: {
  // Light mode defaults
  input: { textColor: '#1A1A1A' },
  button: { backgroundColor: '#0070F3' },

  // Dark mode overrides
  dark: {
    inputContainer: {
      backgroundColor: '#1A1A1A',
      borderColor: '#333333'
    },
    input: {
      textColor: '#FFFFFF',
      placeholderColor: '#959499'
    },
    button: {
      backgroundColor: '#0066CC'
    },
    successUI: {
      backgroundColor: '#1A1A1A',
      primaryTextColor: '#FFFFFF',
      secondaryTextColor: '#959499'
    }
  }
}

Custom Button Text & Placeholders

buttonText: 'Pay €49.99',
placeholders: {
  cardNumber: '1234 5678 9012 3456',
  expiry: 'MM/YY',
  cvc: 'CVC'
}

The styling API may evolve. Refer to the npm package for the full TypeScript types and all available properties.