demo · v139

Checkout Router with Availability Probe

A real checkout flow needs to decide which payment UI to show. Without the availability probe you have to try the Secure Payment Confirmation PaymentRequest, fail, and route after a user gesture. With PaymentRequest.securePaymentConfirmationAvailability() you probe up front and never show a button you can't fulfil.

before · v138 flow

1
Render “Pay with SPC” button regardless of support
2
User clicks — show Permission Request UI
3
If SPC actually unavailable, the request rejects
4
Reroute user to fallback (after a user gesture was burned)
// pre-139: have to attempt the actual flow
try {
  const pr = new PaymentRequest([{ supportedMethods: 'secure-payment-confirmation', data }], details);
  const res = await pr.show();
} catch (e) {
  showFallbackCheckout();   // post-gesture, suboptimal
}

after · v139 flow

1
On page load: PaymentRequest.securePaymentConfirmationAvailability()
2
If unavailable, render fallback button instead
3
Single click → correct flow, no rejection round-trip
x
no failed user-gesture
// v139: probe availability up front
const availability = await PaymentRequest.securePaymentConfirmationAvailability();
if (availability === 'available' || availability === true) {
  renderSPCButton();
} else {
  renderFallbackButton();    // CC entry, Apple Pay, Google Pay
}

run it

Click "Probe availability" to feature-detect the known SPC availability entry points and see the checkout route decision.
Route decision Waiting for a probe.

see also