v139 · Web APIs · Payments

Payment Method Selection Chain

A checkout page must pick the right payment UI on the first try. The Chrome 139 availability probe lets the page test Secure Payment Confirmation before constructing the full PaymentRequest, then cascade to Payment Request or a plain card form without burning a user gesture.

Live API probe: waiting. This page tries the known SPC availability method names and falls back to the scenario selector when the browser does not expose them.

detection chain

1
SPC availability probe
Cheap probe — no user gesture, no permissions dialog. New in Chrome 139.
2
window.PaymentRequest
Fall back to basic-card or Google Pay via the Payment Request API.
3
Plain HTML form
Universal fallback — manual card number entry. Always works.
Run the detection chain to see which payment method is selected.
Why this matters: calling isSecurePaymentConfirmationAvailable() is cheaper than constructing a full PaymentRequest to test capability. A failed PaymentRequest.show() consumes a user gesture. The probe does not. 
async function getBestPaymentMethod() {
  // Step 1: SPC probe (Chrome 139+) — no gesture needed
  if (typeof PaymentRequest !== 'undefined' &&
      typeof PaymentRequest.securePaymentConfirmationAvailability === 'function') {
    const available = await PaymentRequest.securePaymentConfirmationAvailability();
    if (available === true || available === 'available') {
      return 'spc';
    }
  }

  // Step 2: basic PaymentRequest (Google Pay, Apple Pay, basic-card)
  if (typeof PaymentRequest !== 'undefined') {
    return 'basic-card';
  }

  // Step 3: plain HTML form — always available
  return 'form';
}

const method = await getBestPaymentMethod();
renderCheckout(method);

see also