How Credit Card Scanning Works in iOS 16 Safari

In iOS 16, Apple's Safari browser simplifies mobile shopping by allowing users to scan physical credit cards directly into checkout forms using the device's camera. This feature relies on on-device optical character recognition to read card details, combines it with web-standard form detection to identify input fields, and injects the extracted credentials into the payment form securely without uploading sensitive imagery to external servers.

Activating the Scanner

When a user navigates to an online checkout page in Safari and taps on a payment field, the browser detects that a payment method is required. Above the software keyboard, Safari presents an "AutoFill Credit Card" prompt alongside a "Scan Credit Card" option. Selecting this launches a specialized camera overlay directly within Safari.

On-Device Optical Character Recognition (OCR)

Once the camera viewfinder is active, iOS 16 uses machine learning models powered by Apple’s Vision framework to process the video feed in real time:

  • Text Extraction: The software identifies embossed, printed, or flat-printed numerical strings, parsing the standard 15- or 16-digit Primary Account Number (PAN).
  • Expiration Date Parsing: The algorithm searches for standard date formats (such as MM/YY or MM/YYYY) positioned near words like "VALID THRU" or "EXP."
  • Cardholder Name Detection: The system looks for capitalized alphabetical strings typically found in the lower-left or center region of the card.
  • Local Processing: All image processing occurs strictly on the device’s Neural Engine. No captured frames, video feeds, or raw images are sent to Apple or the website host.

Form Field Detection and Mapping

To inject the parsed text into the correct locations, Safari analyzes the webpage's Document Object Model (DOM) using two primary methods:

  1. HTML Autocomplete Attributes: Safari prioritizes standard HTML5 specifications. If developers implement standard autocomplete tokens, Safari maps the extracted data seamlessly:

    • autocomplete="cc-number" receives the card number.
    • autocomplete="cc-exp", cc-exp-month", or cc-exp-year" receives the expiration details.
    • autocomplete="cc-name" receives the cardholder's name.

  2. Heuristic Field Matching: If a website does not follow proper HTML5 autocomplete standards, Safari employs heuristic algorithms. It inspects the name, id, placeholder, and adjacent <label> elements for semantic keywords like cardnumber, ccexp, cardholder, or expiration.

Data Injection and Event Dispatching

Once the fields are matched, Safari automatically populates the text inputs with the scanned strings. To ensure compatibility with modern JavaScript frameworks (such as React, Angular, or Vue), the browser dispatches standard DOM events—including input and change events—ensuring that client-side form validation scripts recognize the newly entered data.

Security and PCI Compliance

To maintain security standards aligned with Payment Card Industry Data Security Standards (PCI-DSS):

  • Security Code (CVV/CVC) Exclusion: Safari intentionally avoids capturing the three- or four-digit CVV/CVC code found on the back or front of the card. The user must type this code manually to verify physical possession.
  • Data Storage: The user is given the choice to either use the scanned card data solely for that specific transaction or securely save the card details to their encrypted iCloud Keychain for future autofill requests.