Payra Elements

const payment = await chargeOnYourServer(paymentMethodSession.id); // your server calls POST /payments
const result = await payra.handleNextAction(payment);
if (result.redirected) return;                        // the page is leaving for the verification page
if (result.error) showError(result.error.message);    // the step could not be run or read
else confirmOnYourServer(payment.id);                 // GET /payments/{id} says how it ended

<form id="checkout">
  <div id="bank-element"></div>
  <p id="hint"></p>
  <button type="submit" disabled>Pay</button>
</form>
<script>
  const submitButton = document.querySelector('#checkout button[type="submit"]');
  const hint = document.querySelector('#hint');
  const payra = Payra('pk_test_...');
  const elements = payra.elements({ clientSecret: 'pms_test_..._secret_...' });
  const bank = elements.create('us_bank_account');
  bank.on('change', ({ complete, error, authorizationAccepted }) => {
    submitButton.disabled = !complete;   // both numbers valid and the box ticked
    hint.textContent = error ? error.message : '';
  });
  bank.mount('#bank-element');

  document.querySelector('#checkout').addEventListener('submit', async (event) => {
    event.preventDefault();
    // billingDetails.name is the name on the account
    const { paymentMethodSession, error } = await payra.confirmPaymentMethodSession(elements, {
      billingDetails: { name: 'Ada Lovelace', postalCode: '94110' },
    });
    if (error) {
      hint.textContent = error.message;
      return;
    }
    // paymentMethodSession.us_bank_account === { last4: '6789', account_type: 'checking', account_holder_type: 'individual' }
    // (last4 is null for an account number under 7 digits; such an account pays once and cannot be saved)
    // paymentMethodSession.ach_authorization.accepted_at is set
  });
</script>

const elements = payra.elements({ clientSecret: 'pms_test_..._secret_...' });
const bank = elements.create('acss_debit');
bank.on('change', ({ complete, error }) => {
  submitButton.disabled = !complete;   // the three numbers valid and the box ticked
  hint.textContent = error ? error.message : '';
});
bank.mount('#bank-element');

document.querySelector('#checkout').addEventListener('submit', async (event) => {
  event.preventDefault();
  const { paymentMethodSession, error } = await payra.confirmPaymentMethodSession(elements, {
    billingDetails: { name: 'Ada Lovelace' },   // the name on the account
  });
  if (error) {
    hint.textContent = error.message;
    return;
  }
  // paymentMethodSession.acss_debit === { last4: '3191', account_type: 'checking', account_holder_type: 'individual',
  //                                       institution_number: '001', transit_number: '00114' }
  // paymentMethodSession.pad_agreement.accepted_at is set
});

elements.create('card', {
  // Inside the secure fields
  style: { base: { color: '#181d27', fontFamily: 'Inter, sans-serif', fontSize: '16px', '::placeholder': { color: '#717680' } } },
  // The boxes around them, and how much room each one gets
  theme: {
    borderColor: '#d5d7da', focusColor: '#2e90fa', errorColor: '#d92d20',
    borderRadius: '8px', background: '#fff',
    fieldHeight: '44px', fieldGap: '8px', numberMinWidth: '240px',
  },
  // 'auto' (default) keeps one row and wraps when it runs out of room; 'stacked' gives each field a row
  layout: 'auto',
  placeholders: { number: 'Card number', expiry: 'MM / YYYY', cvc: 'CVC' },
});