💳 Credit Card Autofill Demo

Test the Autofill Event API with Payment Methods

How to test:

Use Chrome Canary with Experimental Web Platform Features enabled
Save a credit card in Chrome Settings (Autofill and passwords → Payment methods)
Click on the card number field and select your saved card
Watch the autofill event fire and observe real-time updates!

CARD

•••• •••• •••• ••••

YOUR NAME

Valid Thru

MM/YY

Cardholder Name

Card Number

Expiration Date

Security Code (CVV)

Card Type Detected by Event

Field Color Legend

Fields filled by browser autofill

Fields added/modified by event handler

Demo Only: This page demonstrates the Autofill Event API. No payment data is transmitted. CVV values are typically not stored by browsers for security.

📊 Event Monitor

Real-time Credit Card Autofill Tracking

Current State

AutofillEvent Support: Checking...

Event Fired: false

Field Data Received: 0 fields

Card Type Detected: —

refill() Called: false

refill() Resolved: false

Form Modified: false

Autofill Completed: false

Event Log

[Ready]

Credit Card Demo initialized. Waiting for autofill events...