Bank deposit (End-to-end)

<div id="payment-container"></div>

<script>
  // session is `response.session` from your backend
  async function initializeDepositWidget(session) {
    const container = document.getElementById('payment-container');
    const sessionOrigin = new URL(session.url).origin;

    const iframe = document.createElement('iframe');
    iframe.src = session.url;
    iframe.setAttribute('allow', "clipboard-write 'src'; clipboard-read 'src'; payment 'src'; web-share 'src';");
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.border = 'none';

    function teardown() {
      window.removeEventListener('message', onMessage);
      iframe.remove();
    }

    function onMessage(event) {
      if (event.origin !== sessionOrigin) return;

      switch (event.data?.type) {
        case 'load':
          iframe.contentWindow.postMessage({ options: {}, type: 'init' }, sessionOrigin);
          break;
        case 'ready':
          break;
        case 'complete':
          console.log('Complete', JSON.stringify(event.data.value));
          teardown();
          break;
        case 'cancel':
          console.log('Cancelled');
          teardown();
          break;
        case 'error':
          console.error('Error', event.data.error);
          teardown();
          break;
      }
    }

    window.addEventListener('message', onMessage);
    container.appendChild(iframe);
  }
</script>

widget.on('complete', (event) => {
  const result = event.detail.value;

  if ('via' in result) {
    // Bank deposit: no transaction yet — it is created when the transfer arrives
    const { depositMethod, account } = result.selection;
    handleBankDepositInstructionsShown(depositMethod, account);
  } else {
    // Card deposit: see the card end-to-end guide
    handleCardDeposit(result.transaction, result.trigger);
  }

  widget.unmount();
});

// Inside the onMessage switch from Set up the widget
case 'complete': {
  const result = event.data.value;

  if ('via' in result) {
    // Bank deposit: no transaction yet — it is created when the transfer arrives
    const { depositMethod, account } = result.selection;
    handleBankDepositInstructionsShown(depositMethod, account);
  } else {
    // Card deposit: see the card end-to-end guide
    handleCardDeposit(result.transaction, result.trigger);
  }

  teardown();
  break;
}

{
  "via": "deposit-method",
  "selection": {
    "account": {
      "id": "a00507fe-628c-4f27-ae81-e1c40b2a8fb8",
      "label": "My GBP account",
      "asset": "GBP"
    },
    "depositMethod": {
      "type": "bank",
      "status": "ok",
      "details": {
        "network": "fps",
        "asset": "GBP",
        "sortCode": "123456",
        "accountNumber": "12345678",
        "reference": "UH12345678",
        "beneficiary": "John Doe",
        "bankName": "Example Bank",
        "bankAddress": {
          "line1": "123 Bank Street",
          "line2": "London, United Kingdom"
        }
      }
    }
  }
}

{
  "via": "deposit-method",
  "selection": {
    "account": {
      "id": "f47ac10b-58cc-4372-a567-0e02b2c3d479",
      "label": "My USD account",
      "asset": "USD"
    },
    "depositMethod": {
      "type": "bank",
      "status": "ok",
      "details": {
        "network": "ach",
        "asset": "USD",
        "routingNumber": "021000021",
        "accountNumber": "123456789",
        "beneficiary": "John Doe",
        "bankName": "Example Bank",
        "bankAddress": {
          "line1": "456 Bank Avenue",
          "line2": "Fort Lee, NJ 07024"
        },
        "secondaryNetworks": ["fednow", "wire"]
      }
    }
  }
}