Get Secure Payment Confirmation capabilities

concepts

1. Capabilities Demo

   Calls getSecurePaymentConfirmationCapabilities() and displays what the browser reports about SPC support on this device — including whether a platform authenticator is available.

2. SPC Overview

   Explains what Secure Payment Confirmation is, how it uses WebAuthn for payment step-up authentication, and how the new capabilities API fits into the merchant integration flow.

3. Payment Flow Gate

   A checkout that calls getSecurePaymentConfirmationCapabilities() before rendering the payment sheet — showing the SPC passkey button only when the device supports it, and falling back gracefully to a standard payment form. Walks through the 4-step gate pattern.

4. Payment Method Checker

   An e-commerce checkout that probes SPC and Payment Request support before showing any UI. A live availability panel and four-step checkout decision show which path this browser can actually take.

5. Checkout Decision Lab

   A four-step checkout (cart → capability check → payment → confirmation) that gates the payment step on the SPC availability API and falls back when the browser reports that SPC is unavailable.

why it shipped

Secure Payment Confirmation uses a stored WebAuthn credential to authenticate a payment — showing a browser-native dialog with transaction details before the user's biometric confirms. Before Chrome 148, merchants had no way to know upfront whether the device was capable of SPC (requires a platform authenticator like Touch ID or Windows Hello). Calling new PaymentRequest() with SPC method data and then checking availability was the only option. The new static method provides a lightweight, non-interactive capability check.

the change

// Chrome 148+: static capability check before payment sheet
if ('securePaymentConfirmationAvailability' in PaymentRequest) {
  const availability = await PaymentRequest
    .securePaymentConfirmationAvailability();

  if (availability === "available") {
    // Safe to use SPC in PaymentRequest
    showBiometricCheckout();
  } else {
    // Fall back to password or OTP step-up
    showFallbackAuth();
  }
}

// Without this API (pre-148): you had to construct a PaymentRequest
// and call canMakePayment() — more setup, same result

references

• ChromeStatus entry
• MDN — Secure Payment Confirmation
• MDN — PaymentRequest