Embedded widgets

<div id="cashier"></div>
<script src="https://engine.example/embed.js"></script>
<script>
  PaymentsEngine.deposit('#cashier', {
    account: 'account_4471',          // your account reference
    assets:  ['USDT', 'BTC', 'ETH'],  // what you accept — the customer picks
    amount:  '250.00'               // optional — omit for any amount
  });
</script>

// You have already checked the account and debited your own ledger.
const intent = await fetch('https://engine.example/api/embed/withdrawal', {
  method: 'POST',
  headers: {
    'content-type': 'application/json',
    Authorization: 'Bearer ' + process.env.PAYMENTS_CONSOLE_ACCESS_TOKEN
  },
  body: JSON.stringify({
    accountRef:     'account_4471',
    assetCode:      'USDT',
    chainId:        'ethereum',
    amount:         '120.00',
    destination:    withdrawal.destination,
    idempotencyKey: `withdrawal-${withdrawal.id}`
  })
}).then(r => r.json());

// { token, payoutId, expiresAt, widgetUrl }

PaymentsEngine.withdraw('#cashier', { token: intent.token });

const checkout = PaymentsEngine.mount('#cashier', { account: 'account_4471' });

checkout.on('status', (state) => {
  state.status;         // AWAITING_PAYMENT | DETECTED | CONFIRMING | CREDITED | EXPIRED | REORGED
  state.confirmations;  // against state.requiredConfirmations
  state.receivedMinor;  // a decimal string, never a number

  if (state.status === 'CREDITED') closeModal();
});

checkout.on('wallet_submitted', ({ txHash }) => showPending(txHash));
checkout.on('ready', () => hideSpinner());
checkout.on('*', (type, detail) => console.log(type, detail));

const response = await fetch('https://engine.example/api/embed/session', {
  method: 'POST',
  headers: {
    'content-type': 'application/json',
    Authorization: 'Bearer ' + process.env.PAYMENTS_CONSOLE_ACCESS_TOKEN
  },
  body: JSON.stringify({
    accountRef: 'account_4471',
    assetCode: 'USDT',
    chainId: 'ethereum',
    amount: '250.00',
    ttlSeconds: 900
  })
});

const { token, address, checkoutUrl, expiresAt } = await response.json();
// Hand the token to the page. It reads one checkout's state and nothing else.

<iframe
  src="https://engine.example/embed/checkout?token=SESSION_TOKEN"
  style="width:100%;height:560px;border:0"
  allow="clipboard-write; payment">
</iframe>

<!-- Or hand the token to the loader instead of an account: -->
<script>
  PaymentsEngine.mount('#cashier', { token: 'SESSION_TOKEN' });
</script>

// If you would rather render your own interface, the state endpoint is public
// for a session token and needs no signature.
const state = await (await fetch(
  `https://engine.example/api/embed/state?token=${token}`
)).json();

state.paymentUri;   // Tokens: plain address until a verified token contract is configured.
state.address;
state.status;
state.secondsRemaining;

const accounts = await ethereum.request({ method: 'eth_requestAccounts' });

if (await ethereum.request({ method: 'eth_chainId' }) !== expected) {
  await ethereum.request({
    method: 'wallet_switchEthereumChain',
    params: [{ chainId: expected }]
  });
}

await ethereum.request({ method: 'eth_sendTransaction', params: [{
  from: accounts[0],
  to: state.address,
  // Hex wei via BigInt — a value this size is not representable as a double.
  value: '0x' + BigInt(state.amountMinor).toString(16)
}] });