v145 · Web APIs · Payments

Secure Payment Confirmation: UX Refresh

Chrome 145 updates the Secure Payment Confirmation (SPC) browser UI — the dialog shown during WebAuthn-backed payment authentication — with a refreshed visual design and clearer transaction summary.

background

Secure Payment Confirmation (SPC) combines WebAuthn with the Payment Request API to let users authenticate payments with a biometric or device credential, replacing SMS OTP and password-based 3DS flows. Chrome 145 updates the browser-native SPC dialog with an improved layout, better instrument display, and clearer amount/payee presentation.

The API surface is unchanged — only the browser-rendered UI is updated. No code changes are required to benefit from the new design.

concepts

  1. SPC UX Demo

    Checks SPC support via PaymentRequest.isSecurePaymentConfirmationOptOut() and shows the fields that populate the refreshed dialog — instrument name, icon, amount, and payee.

  2. UX Changes

    Before and after comparison of the SPC dialog fields, what changed in Chrome 145, and how to populate the instrument display for the best user experience.

  3. Dialog Comparison

    Editable side-by-side mock of the Chrome 144 vs. Chrome 145 dialog. Set merchant, amount, and card label and watch each surface update — useful for designers tuning their PaymentRequest payloads.

  4. Payload Builder

    Fill in payee, amount, instrument name, and icon URL and get a valid PaymentRequest constructor call immediately. A live dialog mock shows exactly how the Chrome 145 SPC UI renders your data.

the change

// SPC API is unchanged — only the browser dialog is refreshed
const request = new PaymentRequest(
  [{
    supportedMethods: 'secure-payment-confirmation',
    data: {
      credentialIds: [credentialId],
      challenge: challengeBytes,
      instrument: {
        displayName: 'Visa ending 4242',  // Shown in refreshed dialog
        icon: 'https://bank.example/card-icon.png',
      },
      payeeOrigin: 'https://merchant.example',
      timeout: 60000,
    },
  }],
  {
    total: { label: 'Total', amount: { currency: 'USD', value: '99.00' } },
  }
);

// Chrome 145 dialog shows: instrument name, icon, amount, payee origin
// in a cleaner, more legible layout.

references