v147 · Payments · Web APIs
SPC Auth Flow
Walk through the full Secure Payment Confirmation authentication flow — credential registration, payment challenge, and server-side signature verification — using real WebAuthn API calls with the payment extension.
Capabilities preflight
Before the WebAuthn ceremony, this page performs the Chrome 147 preflight: PaymentRequest.getSecurePaymentConfirmationCapabilities(). It returns a promise for a boolean-keyed record; keys are interpreted lexicographically and omitted keys stay unknown, not false.
Register a WebAuthn credential with the payment extension. In a real SPC flow this credential is created by your bank's authenticator. Here we create one in this origin so you can see the full API shape.
-
navigator.credentials.create()
pending
Build PublicKeyCredentialCreationOptions with payment extension
-
Authenticator gesture
pending
User biometric / security key interaction
-
Credential stored
pending
Credential ID and public key extracted from response
Request a payment authentication challenge from the backend. This corresponds to the bank's server sending a challenge that the authenticator must sign, binding it to the payment instrument and merchant.
-
Build challenge options
pending
Server-side challenge bytes + payment extension descriptor
-
navigator.credentials.get()
pending
Browser shows payment confirmation sheet to user
-
Assertion received
pending
AuthenticatorAssertionResponse returned — ready for verification
Ask the backend to verify the assertion signature against the public key extracted during registration.