Accept a payment

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

const overflow = await loadOverflow('live_pub_...');

<script src="https://cdn.overflow.co/sdk/v1/payment-elements.js"></script>
<script>
  const overflow = new Overflow('live_pub_...');
</script>

<div id="checkout"></div>

const checkout = overflow.checkout({
  paymentMethods: ['card', 'bank', 'applePay', 'googlePay'],
  defaultPaymentMethod: 'card',
  contact: { email: {}, fullName: {} },
  billingAddress: {},
});

checkout.mount('#checkout');

checkout.on('onReady', () => {
  document.querySelector('#skeleton').hidden = true;
});

checkout.on('onChange', ({ complete, availableMethods, unavailableMethods }) => {
  renderMethodBadges(availableMethods, unavailableMethods);
  externalSubmit.disabled = !complete;
});

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

  if (!res.ok) {
    showError(await res.text());
    return;
  }

  showConfirmation(await res.json());
});

checkout.on('onError', ({ code, message, fieldErrors }) => {
  switch (code) {
    case 'validation_failed':
      paintFieldErrors(fieldErrors);
      break;
    case 'tokenization_failed':
    case 'network':
    case 'plaid_link_failed':
    case 'wallet_failed':
      toast(message);
      break;
    default:
      toast('Something went wrong. Try again.');
  }
});