v147 · Payments · Web APIs

Get Secure Payment Confirmation Capabilities

The new static method PaymentRequest.getSecurePaymentConfirmationCapabilities() returns a snapshot of whether the browser can perform Secure Payment Confirmation — letting checkout pages discover support before showing the one-touch biometric payment button.

concepts

  1. Capability Check

    Calls getSecurePaymentConfirmationCapabilities() and displays the full capabilities object — paymentCredentials, optOut, and any other fields returned by the browser.

  2. Progressive Payment UI

    A checkout widget that checks SPC capabilities on load and progressively reveals the biometric one-touch payment option only if the browser reports it is available — no broken buttons on unsupported browsers.

  3. SPC Checkout Flow

    Capability-gated checkout flow: capability check → conditional biometric button → fallback card form. The UI only reveals SPC when the browser reports real support.

  4. SPC Auth Flow

    Three-tab WebAuthn/SPC flow. Setup calls navigator.credentials.create() with the payment extension and posts the attestation to the backend; Challenge calls navigator.credentials.get(); Verify checks the assertion signature server-side against the stored public key.

  5. Compatibility Lab

    Probes PaymentRequest.getSecurePaymentConfirmationCapabilities(), PaymentRequest constructor presence, PublicKeyCredential (WebAuthn), and secure context. Runs the live capabilities call and displays every field the browser returns — letting checkout pages discover support before showing the one-touch biometric payment button.

why it shipped

Secure Payment Confirmation (SPC) authenticates payments using the device's biometric/FIDO2 credential — a faster, phishing-resistant alternative to 3D-Secure challenges. But SPC availability depends on the OS, platform authenticator, and browser configuration. Without a capabilities check, a payment page had to either attempt SPC and handle failure at request time (a poor UX) or blindly show a biometric button that might silently fail. getSecurePaymentConfirmationCapabilities() provides a lightweight, promise-based probe that resolves before any payment request is created, letting the UI adapt gracefully.

references