v145 · Web APIs · SPC UX Demo

SPC UX Demo

Checks Secure Payment Confirmation API support and shows a mockup of the refreshed Chrome 145 dialog — instrument card, amount, and payee origin.

API support

PaymentRequest API—
secure-payment-confirmation—

refreshed dialog mockup

Chrome 145 — SPC dialog (mockup)

💳
Visa ending 4242
First National Bank
USD 99.00
merchant.example

dialog fields

// Fields shown in the Chrome 145 refreshed SPC dialog:
const spcData = {
  // instrument.displayName → card name displayed in dialog
  // instrument.icon → bank/card logo shown in dialog
  // payeeOrigin → merchant origin shown under amount
  // total.amount → prominent amount display

  credentialIds: [credentialId],
  challenge: challengeBytes,
  instrument: {
    displayName: 'Visa ending 4242',   // → card title
    icon: 'https://bank.example/icon.png',  // → icon square
  },
  payeeOrigin: 'https://merchant.example',   // → payee line
};

// Payment amount comes from the PaymentRequest details:
const details = {
  total: {
    label: 'Total',
    amount: { currency: 'USD', value: '99.00' },  // → large amount display
  },
};

see also