demo · v139

Checkout Router

The exact scenario the API exists for: a checkout page deciding whether to feature SPC, or fall back to a card form, before the user even reaches the pay screen. Probe the availability, render the right UI. Toggle the simulated browser state to see both branches.

v139's PaymentRequest.securePaymentConfirmationAvailability() is under origin trial behind the SecurePaymentConfirmationAvailabilityAPI flag. This page probes the real API and falls back to a simulated availability switch so the routing logic is interactive everywhere.
probe pending…

Pay $24.00

your checkout options:

the code

// Pre-v139: had to build a full PaymentRequest just to learn this
const available = await PaymentRequest
  .securePaymentConfirmationAvailability();

if (available) {
  renderSPCAsPrimary();      // hero placement, "verify with FaceID"
} else {
  renderCardFormAsPrimary(); // 16-digit input front and centre
}

see also