v147 · Payments · demo

Progressive Payment UI

A checkout widget that probes getSecurePaymentConfirmationCapabilities() on load and reveals the biometric one-touch button only when the browser confirms SPC is available — standard card entry always shown as the fallback.

Checkout
Artisan Desk Lamp£89.00
Shipping£4.50
Total£93.50
⟳ Checking biometric payment availability…
One-touch payment
✓ Payment confirmed
Order #CPX-2147 placed. Dispatch within 1–2 working days.

Capabilities detected

Probing capabilities…

// Chrome 147+ — probe before building the UI
async function initCheckout() {
  if (!PaymentRequest.getSecurePaymentConfirmationCapabilities) {
    showCardFormOnly(); // API not available — standard card is the fallback
    return;
  }

  const caps = await PaymentRequest.getSecurePaymentConfirmationCapabilities();

  if (caps.paymentCredentials === true) {
    showSpcButton();   // biometric one-touch available ✓
    showCardForm();    // card form below as "or pay by card"
  } else {
    showCardFormOnly(); // SPC not available — card form only
  }
}

see also