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:

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

Theme Variables

Override individual CSS variables using appearance.variables:

```javascript 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

```javascript 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.