Card

<div id="card"></div>
<button id="pay" disabled>Pay</button>

<script>
  const overflow = new Overflow('live_pub_...');

  const card = overflow.card({
    fields: {
      holderName: { label: 'Name on card' },
      postalCode: { hidden: false },
    },
  });

  card.on('onChange', ({ complete }) => {
    document.getElementById('pay').disabled = !complete;
  });

  card.on('onSubmit', ({ value }) => {
    fetch('/api/authorize', { method: 'POST', body: JSON.stringify({ method: 'card', card: value }) });
  });

  card.mount('#card');
  document.getElementById('pay').addEventListener('click', () => card.submit());
</script>

card.on('onSubmit', ({ value }) => {
  // value.encryptedCardNumber:   Encrypted PAN, forward verbatim.
  // value.encryptedExpiryMonth:  Encrypted two-digit month.
  // value.encryptedExpiryYear:   Encrypted four-digit year.
  // value.encryptedSecurityCode: Encrypted CVC. Empty string when
  //                              `fields.cardSecurityCode.hidden: true`.
  // value.riskData:              { clientData: string } for risk scoring.
  // value.browserInfo:           Browser context the authorize call requires.
  // value.holderName?:           Cardholder name if the field is visible.
  // value.postalCode?:           Postal code if the field is visible.
});

overflow.checkout({
  paymentMethods: ['card', 'bank'],
  card: {
    fields: {
      postalCode: { hidden: true },
    },
  },
});