v139 · 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. Before vs After Gallery

    Type merchant name, amount, currency, and card last-4. Both dialogs (v138 and v139 refresh) re-render side-by-side with annotated callouts pointing out exactly which UX problems the refresh fixes.

  4. SPC Flow Walkthrough

    Step-by-step annotated walkthrough of the full SPC payment flow: merchant checkout UI → authentication request → simulated Chrome dialog with refreshed design → signature response. Each step shows the relevant JS snippet alongside the visual, with a UX diff callout comparing old and new dialog layouts.

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