v139 · Web APIs · UX Changes

UX Changes

What changed in the Chrome 145 Secure Payment Confirmation dialog, which API fields drive each UI element, and how to populate them for the best user experience.

dialog changes in Chrome 145

UI element Before Chrome 145 Chrome 145 API field
Instrument name Plain text, small Prominent heading with icon instrument.displayName
Instrument icon Small, may be cropped Larger, rounded square treatment instrument.icon
Payment amount Listed with other details Large, prominent typography total.amount
Payee origin Buried in details Visible under amount payeeOrigin
Biometric prompt Separate step Integrated into dialog Browser-managed

instrument display best practices

// Instrument displayName: be specific and recognisable
// Good:
instrument.displayName = 'Visa ending 4242';
// Too generic:
instrument.displayName = 'Credit Card';

// Instrument icon: high contrast, clear on light and dark backgrounds
// Recommended size: at least 64×64 pixels, served over HTTPS
instrument.icon = 'https://bank.example/card-logo-128px.png';

// payeeOrigin: must be the actual merchant origin (verified by Chrome)
// Chrome validates this matches the actual origin — do not spoof.
data.payeeOrigin = 'https://merchant.example';

// Amount: display human-readable value, not just machine value
const details = {
  total: {
    label: 'Order total',
    amount: { currency: 'USD', value: '99.00' },
  },
};

see also

scenario focus

Select a scenario to focus its rendered example and summary.