Elements

const element = tokeflow.createCardElement({
  style: { /* see Styling */ },

  // Per-field placeholders on the combined card element
  placeholder: {
    cardNumber: '1234 5678 9012 3456',
    cardExpirationDate: 'MM/YY',
    cardSecurityCode: 'CVC',
  },

  disabled: false,
  readOnly: false,
  autoFocus: false,

  locale: 'pt-BR',       // per-element locale override
  translations: { /* ... */ },

  // Card-element specifics
  showCardIcon: true,
  hidePostalCode: true,
  iconStyle: 'solid',    // 'solid' | 'outline'
});

const cpf = tokeflow.createCpfElement({ placeholder: '000.000.000-00' });
const name = tokeflow.createTextElement({ placeholder: 'Full Name' });

<CardElement
  showCardIcon
  hidePostalCode
  iconStyle="outline"
  placeholder={{
    cardNumber: '1234 5678 9012 3456',
    cardExpirationDate: 'MM/YY',
    cardSecurityCode: 'CVC',
  }}
/>

// Mount / unmount
element.mount('#container');          // selector or HTMLElement
element.unmount();

// Focus management
element.focus();
element.blur();

// Value
element.clear();
element.setValue('some value');       // text-style elements only

// State
const state = element.getState();     // ElementState

// Update options after creation
element.update({ disabled: true });

// Events
element.on('change', handler);
element.off('change', handler);

interface ElementState {
  empty: boolean;     // no value entered yet
  focused: boolean;   // input currently has focus
  valid: boolean;     // current value passes validation
  invalid: boolean;   // current value fails validation
  complete: boolean;  // input is fully filled and valid
  error?: ElementError; // present when the value is invalid
}

const state = cardElement.getState();

if (state.complete && state.valid) {
  // ready to tokenize
}

cardElement.on('ready', () => {
  console.log('Element is ready');
});

cardElement.on('change', (event) => {
  console.log('Complete:', event.complete);
  console.log('Empty:', event.empty);
  console.log('Error:', event.error?.message);
  // Brand / BIN / last4 are surfaced under `value` on the card-number field:
  console.log('Brand:', event.value?.brand, 'BIN:', event.value?.bin, 'last4:', event.value?.last4);
});

cardElement.on('focus', () => console.log('Element focused'));
cardElement.on('blur', () => console.log('Element blurred'));
cardElement.on('error', (event) => console.error('Element error:', event));

<CardElement
  ref={cardRef}
  id="card"
  onReady={() => console.log('Ready')}
  onChange={(e) => console.log('Change:', e.complete, e.error?.message)}
  onFocus={() => console.log('Focus')}
  onBlur={() => console.log('Blur')}
  onError={(e) => console.error('Error:', e)}
  className="my-card-element"
/>

interface ElementChangeEvent {
  elementType: ElementType;
  empty: boolean;
  complete: boolean;
  error?: ElementError;    // singular — there is no `errors` array
  value?: {                // non-sensitive metadata only
    type?: string;         // detected input type
    brand?: string;        // e.g. 'visa', 'mastercard'
    bin?: string;          // bank identification number (leading digits)
    last4?: string;        // last four digits
  };
}

const style = {
  base: {
    color: '#333',
    fontSize: '16px',
    fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
    fontWeight: '400',
    lineHeight: '24px',
    '::placeholder': { color: '#aaa', fontStyle: 'italic' },
    ':focus': { color: '#000' },
  },
  complete: { color: '#28a745' }, // input complete and valid
  invalid: { color: '#dc3545' },  // input invalid
  empty: { color: '#6c757d' },    // input empty
};

const cardElement = tokeflow.createCardElement({ style });

.card-element-container {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card-element-container:focus-within { border-color: #0066ff; }
.card-element-container.invalid { border-color: #dc3545; }
.card-element-container.complete { border-color: #28a745; }

// Override strings for a single element
const cardNumber = tokeflow.createCardNumberElement({
  locale: 'pt-BR',
  translations: {
    number: {
      label: 'Número do cartão',
      errors: { invalid: 'Verifique o número do cartão' },
    },
  },
});

// 1. Create
const cardElement = tokeflow.createCardElement({
  placeholder: {
    cardNumber: '1234 5678 9012 3456',
    cardExpirationDate: 'MM/YY',
    cardSecurityCode: 'CVC',
  },
  showCardIcon: true,
});

// 2. Mount
cardElement.mount('#card-element');

// 3. React to state
cardElement.on('change', (event) => {
  const container = document.getElementById('card-element');
  container.classList.toggle('invalid', !!event.error);
  container.classList.toggle('complete', event.complete);
});

// 4. Gate before tokenizing
async function pay() {
  const state = cardElement.getState();
  if (!state.complete || !state.valid) return;

  const token = await tokeflow.cards.tokenize({ card: cardElement });
  // send token.tokenId to your server

  // 5. Clean up
  cardElement.unmount();
}