v147 · Payments · Web APIs
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.
API probes
SPC capability detection matrix
| Detection method | Chrome ≤146 | Chrome 147+ | Returns |
|---|---|---|---|
| PaymentRequest.getSecurePaymentConfirmationCapabilities() | ✗ Missing | ✓ Available | Promise<{paymentCredentials, optOut, …}> |
| PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() | ✓ | ✓ | Boolean — authenticator present |
| 'PaymentRequest' in window | ✓ | ✓ | Boolean — Payment Request API present |
| window.isSecureContext | ✓ | ✓ | Boolean — HTTPS required |
Live capabilities probe
PaymentRequest.getSecurePaymentConfirmationCapabilities()
Click "Run capabilities probe" to call getSecurePaymentConfirmationCapabilities()…
Capability-gated SPC pattern
/* Progressive SPC checkout — detect before showing biometric button */
async function getSPCCapabilities() {
// Chrome 147+: static method for lightweight capability check
if ('PaymentRequest' in window &&
'getSecurePaymentConfirmationCapabilities' in PaymentRequest) {
try {
return await PaymentRequest.getSecurePaymentConfirmationCapabilities();
} catch (e) {
return null;
}
}
// Fallback: construct a minimal PaymentRequest to check support
// (older detection method — requires user gesture)
if ('PaymentRequest' in window) {
return { available: true, method: 'legacy-pr-check' };
}
return null;
}
async function initCheckout() {
const caps = await getSPCCapabilities();
if (!caps) {
showCardForm(); // SPC not available — use traditional checkout
return;
}
// Chrome 147+ returns rich capabilities object
if (caps.paymentCredentials === 'available') {
showBiometricButton(); // show one-touch SPC button
} else if (caps.paymentCredentials === 'not-available') {
showEnrollmentPrompt(); // user hasn't enrolled a payment credential
} else {
showCardForm(); // unknown state — fall back
}
}
/* Also check platform authenticator directly */
async function hasAuthenticator() {
if (typeof PublicKeyCredential === 'undefined') return false;
return PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
}