Wallet Block

<div id="wallet"></div>
<div id="payment"></div>
<button id="pay-card" type="button">Pay by card</button>
<p id="message" role="status" aria-live="polite"></p>

import { loadIonic } from '@ionicfi/js';

// These values come from your authenticated checkout backend.
const response = await fetch('/checkout/payment', { method: 'POST' });
if (!response.ok) throw new Error('Could not load this payment.');
const { publishableKey, connectedMerchantId, clientSecret } =
  await response.json() as {
    publishableKey: string;
    connectedMerchantId: string;
    clientSecret: string;
  };
const ionic = await loadIonic(publishableKey, { account: connectedMerchantId });
const blocks = ionic.blocks({ clientSecret });
const wallet = blocks.create('wallet');
const message = document.querySelector('#message')!;

wallet.on('complete', ({ paymentIntent, wallet }) => {
  message.textContent = 'Payment complete.';
  // Update the receipt using paymentIntent.id. Confirm fulfillment on your server.
});
wallet.on('error', (error) => {
  message.textContent = error.message;
});
wallet.on('change', ({ availableWallets, busy }) => {
  // Optional: show a divider only when at least one wallet button is rendered.
});

document.querySelector('#pay-card')!.addEventListener('click', async () => {
  const result = await ionic.confirmPayment({ blocks });
  message.textContent = result.error?.message ??
    (result.paymentIntent?.status === 'succeeded' ? 'Payment complete.' : 'Checking payment…');
});

// Mount independently so optional wallet loading cannot hold up card collection.
await Promise.all([
  wallet.mount('#wallet'),
  blocks.create('payment').mount('#payment'),
]);

// On navigation: blocks.destroy(). To remove only wallets: wallet.destroy().