Customize Card Element

Customise the Card Element's appearance using theme presets, CSS variables, custom rules, and element-specific options.

Element Options

Option	Type	Description
`hideIcon`	`boolean`	Hide the card brand icon
`iconStyle`	`'solid' \| 'default'`	Card brand icon style
`showInlineErrors`	`boolean`	Show validation errors inline (default: true)
`showAcceptedBrands`	`boolean`	Show accepted card brand logos
`disabled`	`boolean`	Disable user input

Theme Presets

Six built-in theme presets are available:

const teya = await initTeyaBlocks('session-token', {
  appearance: {
    theme: 'default', // default | dark | minimal | rounded | compact | bold
  },
});

Theme Variables

Override individual CSS variables using appearance.variables:

const teya = await initTeyaBlocks('session-token', {
  appearance: {
    variables: {
      colorPrimary: '#0055ff',
      colorBackground: '#ffffff',
      colorText: '#333333',
      colorDanger: '#dc3545',
      borderRadius: '8px',
      fontFamily: 'Inter, sans-serif',
      fontSizeBase: '16px',
    },
  },
});

Custom CSS Rules

const teya = await initTeyaBlocks('session-token', {
  appearance: {
    rules: {
      '.Input': { border: '1px solid #ccc', padding: '12px' },
      '.Input:focus': { borderColor: '#0055ff' },
      '.Input--invalid': { borderColor: '#dc3545' },
      '.Label': { fontWeight: '600' },
    },
  },
});

Callbacks

Callback	Description
`onReady`	Fired when the element is ready for input
`onChange`	Fired when element state changes
`onFocus`	Fired when the element gains focus
`onBlur`	Fired when the element loses focus
`onSuccess`	Fired on successful payment
`onError`	Fired on payment failure
`onTokenRefresh`	Called when session token needs refreshing

Handling common flows

Payment success: The onSuccess callback receives a PaymentSubmitResponse with a payment_id. Redirect the customer to a confirmation page or update your UI.

Payment error: The onError callback receives an error object with message and optional code. Display the error to the customer and allow them to retry.

3D Secure: 3DS challenges are handled automatically by the SDK. The challenge modal appears within the card element iframe. No additional code is needed - the onSuccess or onError callback fires after the challenge completes.

Dynamic Currency Conversion (DCC): If DCC is enabled for your store, the SDK may offer the customer a choice of currencies. Use the DCC callbacks (onDccOffered, onDccSelectionRequired, onDccSelected) to track the customer's currency preference. The final payment amount reflects their choice.

Updating the pay button: Use the onChange callback to enable/disable your submit button based on event.complete. This ensures the button is only clickable when all fields are valid.

Fonts & Locales

See the Embedded Checkout Customize page for the full list of built-in fonts and supported locales - they apply to all elements.