Styling & custom fields

Layout

Fields are rendered in the order you declare them. Use position to place a field above (default) or below the card form, and size: 'half' to put two fields on the same row.

fields: [
  { type: 'email', label: 'Email' },
  { type: 'name', label: 'First name', size: 'half' },
  { type: 'lastName', label: 'Last name', size: 'half' },
  { type: 'divider', position: 'below' },
  { type: 'country', label: 'Country', position: 'below', size: 'half' },
  { type: 'zip', label: 'Postal code', position: 'below', size: 'half' },
],

Custom text fields

Use type: 'text' with a unique name to show extra inputs:

{ type: 'text', name: 'companyName', label: 'Company', placeholder: 'Acme Inc.' }

Note

Values from custom text fields, phone and state are not stored by CreditCore yet and are not included in webhooks. To pass data through to your backend, use additionalData.

Styles

theme.styles accepts CSS style objects (camelCase properties) for labels, inputs and selects:

theme: {
  styles: {
    label: { color: '#334155', fontSize: '14px', fontWeight: '600' },
    input: { borderRadius: '8px', border: '1px solid #cbd5e1', padding: '12px' },
    select: { borderRadius: '8px' },
  },
},
payButton: {
  text: 'Pay €9.99',
  backgroundColor: '#0f172a',
  color: '#ffffff',
},

Localization

All labels and placeholders are configurable, so you can translate the checkout into any language:

cardFields: {
  cardNumber: { label: 'Número de la tarjeta', placeholder: '0000 0000 0000 0000' },
  expiration: { label: 'Fecha de expiración', placeholder: 'MM/AA' },
  cvc: { label: 'CVC', placeholder: 'CVC' },
},
payButton: { text: 'Pagar' },

Tracking data

Use additionalData to attach attribution or order information. It is returned in the CONVERSION webhook:

additionalData: {
  orderId: 'ORD-2026-0042',
  utm_source: 'newsletter',
  clickId: 'abc123',
},