v147 · Payments · Web APIs

SPC Checkout Flow

Probes PaymentRequest.getSecurePaymentConfirmationCapabilities(), conditionally routes SPC-capable browsers into the live WebAuthn/SPC flow, and posts fallback card orders to a backend endpoint.

Acme Widget Pro ×1£29.99
Shipping£2.50
Total£32.49

Calling PaymentRequest.getSecurePaymentConfirmationCapabilities()…

SPC is available — showing one-touch payment button.

The browser will show its own biometric sheet; the merchant page never sees the credential.

SPC not supported — standard card form shown.

🪪

Contacting backend…

✓

Order recorded

Fallback card order stored by the demo backend.

capability-gated progressive enhancement

// 1. Check capabilities before showing the biometric button
const caps = await PaymentRequest
  .getSecurePaymentConfirmationCapabilities();

if (caps.paymentCredentials === true && caps.optOut !== true) {
  showSPCButton();   // fast, frictionless path
} else {
  showCardForm();    // traditional fallback
}

// 2. Execute SPC only when user clicks
// The SPC button opens this site's live WebAuthn/SPC flow, where the
// backend stores the credential public key and verifies the assertion.

references