v148 · Payment · WebAuthn
Checkout Simulator
A multi-step checkout that calls PaymentRequest.getSecurePaymentConfirmationCapabilities() (Chrome 148) before rendering the payment step. Based on the capability result, it shows biometric SPC, standard card, or a graceful "not available" fallback. Pick a device scenario to see each code path.
real browser capability probe
Spec method
Calls
PaymentRequest.getSecurePaymentConfirmationCapabilities() when this browser exposes it.
Graceful fallback
If the API is missing or throws, the simulator keeps showing the standard card path and records the reason.
Probe has not run yet.
Simulated checkout flow
Device scenario:
1. Cart
2. Capability check
3. Payment
4. Confirm
Chrome 148 Dev T-Shirt$29.99
Web Platform Poster$14.99
Shipping$4.99
Total$49.97
Calling
PaymentRequest.getSecurePaymentConfirmationCapabilities()…API available: checking…
spcSupported: —
authenticatorAttachment: —
Result: —
Select payment method
Payment complete
Proceed through the checkout to see how getSecurePaymentConfirmationCapabilities() gates the payment step. Change the scenario to explore each capability outcome.
// Chrome 148: getSecurePaymentConfirmationCapabilities()
if ('getSecurePaymentConfirmationCapabilities' in PaymentRequest) {
const caps = await PaymentRequest
.getSecurePaymentConfirmationCapabilities();
if (caps.spcSupported) {
// Show biometric payment UI
showSpcCheckout(caps.authenticatorAttachment);
} else {
// Fall back to card form
showCardForm();
}
} else {
// API not present — browser too old for SPC
showCardForm();
}
see also
- Capabilities Demo — raw capability probe
- SPC Overview — how SPC works
- Payment Flow Gate — 4-step gate pattern
- Payment Method Checker — all payment methods
- ChromeStatus entry
- Secure Payment Confirmation capabilities spec
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗