Compose standalone elements

<form id="pay-form">
  <div id="email"></div>
  <div id="card"></div>
  <div id="submit"></div>
</form>

import { loadOverflow } from '@getoverflow/payment-elements';

const overflow = await loadOverflow('live_pub_...');
if (!overflow) return; // SSR / non-browser

const email = overflow.email({ required: true });
const card = overflow.card();
const submit = overflow.submitButton({ label: 'Pay' });

let emailOk = false;
let cardOk = false;
const sync = () => submit.update({ disabled: !(emailOk && cardOk) });

email
  .on('onChange', ({ complete }) => { emailOk = complete; sync(); })
  .mount('#email');

card
  .on('onChange', ({ complete }) => { cardOk = complete; sync(); })
  .mount('#card');

submit
  .on('onSubmit', () => card.submit()) // relay: value is undefined
  .mount('#submit');

card.on('onSubmit', async ({ value }) => {
  await fetch('/your-backend/authorize', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      email: email.value,
      paymentMethod: value,
    }),
  });
});

card.on('onError', ({ code, message, fieldErrors }) => {
  if (code === 'validation_failed') paintFieldErrors(fieldErrors);
  else toast(message);
});

document.querySelector('#pay').addEventListener('click', () => card.submit());