Payment Flow Gate

Checkout demo

How the gate works

1. Call the static SPC availability API — check if SPC is available before rendering any payment UI. Current browsers expose securePaymentConfirmationAvailability(); older trials exposed getSecurePaymentConfirmationCapabilities().
2. Inspect the returned value — "available" means the frame can start an SPC flow. Other values give a concrete non-availability reason.
3. Show appropriate UI — if SPC is available, render the passkey button prominently. Otherwise hide it and go straight to card form. No wasted clicks or confusing "not available on this device" errors.
4. Invoke payment — call request.show() only when the user clicks the button for the chosen path, ensuring the gesture requirement is met.

API usage

// Query SPC availability before showing any UI
const availability = await PaymentRequest.securePaymentConfirmationAvailability();

if (availability === "available") {
  showSPCButton(); // passkey-authenticated payment
} else {
  showCardForm();  // standard card entry fallback
}

// When SPC is available, show() presents the passkey sheet
const request = new PaymentRequest([{ supportedMethods: 'secure-payment-confirmation', data: { ... } }], details);
const response = await request.show();

references

• ChromeStatus entry
• MDN — Payment Request API
• Secure Payment Confirmation spec