v139 · Web APIs · SPC UX Demo

SPC UX Request Builder

Build a real PaymentRequest for secure-payment-confirmation, change the fields that populate the refreshed Chrome 139 Android dialog, and exercise success, cancellation, fallback, and construction-error branches.

request builder

The browser still owns the native SPC dialog. This page does a safe dry run: it constructs the real request, calls canMakePayment(), and simulates the response branch so you can verify the merchant UI without enrolled payment credentials.

API support Not checked

PaymentRequest, PublicKeyCredential, and SPC construction appear here.

request construction Not built

Constructor errors and canMakePayment results are surfaced here.

dialog outcome Waiting

Use the mock dialog buttons to exercise the refreshed output states.

merchant fallback Ready

Fallback UI is shown when SPC is unavailable, cancelled, or failed.

refreshed SPC dialog preview

Chrome 139 SPC dialog preview
CARD
Visa ending 4242
First National Bank · Rewards card
USD 99.00
Demo Merchant · https://merchant.example
Construct the request to populate the response branch.

request payload + result

awaiting request build
  1. Populate SecurePaymentConfirmationRequest with credential IDs, challenge, RP ID, instrument details, payee fields, timeout, and optional payment entity logos.
  2. Construct new PaymentRequest([{ supportedMethods: "secure-payment-confirmation", data }], details).
  3. Call canMakePayment() to decide whether to offer SPC or immediately show merchant fallback authentication.
  4. Handle separate merchant outcomes: success, continue without SPC, cancellation, authentication failure, or constructor validation errors.

see also