Card.io Camera Scanner

Scan credit card details instantly using the device camera. Nativine embeds native Card.io and ML Kit Credit Card OCR scanner viewports, allowing users to auto-populate card numbers, expiration dates, and cardholder names into web checkout inputs without manual typing.

1. Overview & Native Capabilities

Typing 16-digit credit card numbers on mobile keyboards introduces checkout friction. Nativine's Card.io plugin provides hardware-accelerated camera OCR scanning:

• 1-Tap Camera Card Scanning: Real-time frame analysis extracts card number, expiration month/year, and cardholder name instantly.
• PCI-DSS Compliant Execution: Card images are processed 100% locally in device RAM and never saved to storage or cloud servers.
• Auto-Fill Checkout Inputs: Populate web checkout input fields automatically via JS bridge callbacks.

2. No-Code App Builder Setup Guide

Nativine App Builder Configuration

1. Open the Nativine App Builder at /web-to-app-converter-pro.
2. Click Add-ons & Plugins in the left builder menu and locate Card.io Camera Scanner.
3. Toggle Card.io Camera Scanner to ON (or click Enable), then click Config.
4. Configure your required settings, permissions descriptors, or target web parameters.
5. Click Save Config and navigate to the Builds tab to compile your mobile application.

3. Native JS Bridge API Reference

To open the Card.io camera scanner modal from JavaScript, call nativine.cardScanner.scanCard():

nativine.cardScanner.scanCard({
  requireCardholderName: true,
  requireExpiry: true,
  callback: 'onCardScanned',
  onCancel: 'onCardScanCancelled'
});

function onCardScanned(card) {
  console.log("Card Number:", card.cardNumber);
  console.log("Expiry Month/Year:", card.expiryMonth, card.expiryYear);
  console.log("Cardholder Name:", card.cardholderName);
}

Parameters

4. Frequently Asked Questions (Q&A)