Custom elements

type CustomElementBase = {
  elementType: 'text' | 'number' | 'select' | 'checkbox';
  name: string;                // unique per Overflow instance
  label: string;               // required
  placeholder?: string;
  defaultValue?: unknown;      // element-specific type
  autocomplete?: string;       // HTML autofill token
  disabled?: boolean;
  readOnly?: boolean;
  id?: string;
  ariaLabel?: string;
  locale?: string;
  required?: boolean;
  validate?: (value) => string | null;
};

const message = overflow.text({
  name: 'giftMessage',
  label: 'Gift message (optional)',
  placeholder: 'Add a personal note',
});

message.on('onChange', ({ value, complete }) => console.log(value, complete));
message.mount('#gift-message');

overflow.checkout({
  paymentMethods: ['card'],
  customElements: {
    giftMessage: { elementType: 'text', label: 'Gift message (optional)' },
    tipAmount: { elementType: 'number', label: 'Add a tip', min: 0 },
    shirtSize: {
      elementType: 'select',
      label: 'Shirt size',
      required: true,
      options: [
        { label: 'Medium', value: 'M' },
        { label: 'Large', value: 'L' },
      ],
    },
    coverFee: { elementType: 'checkbox', label: 'Cover the processing fee' },
  },
});