Card Scanner

You can add a card scanning solution to your application by adding CardIO module. VGS Collect provides secure Card.io integration for collecting and setting scanned card data into VGSTextFields.

Integration

To use Card.io with VGSCollectSDK you should add CardIO module alongside with core VGSCollectSDK module into your App Podfile:

pod 'VGSCollectSDK'
pod 'VGSCollectSDK/CardIO'

Also you need to add <NSCameraUsageDescription> key with camera usage description into your App Info.plist.

VGSCardIOScanController

An object you use to manage CardIO scan ViewController.

Declaration

class VGSCardIOScanController

Creating a VGSCardIOScanController

init(_ delegate: VGSCardIOScanControllerDelegate? = nil)

VGSCardIOScanController Attributes and Methods

/// Handle CardIO states
var delegate: VGSCardIOScanControllerDelegate?

/// Set preferred camera position(default, back, front)
var preferredCameraPosition: AVCaptureDevice.Position?

/// Present CardIO scan ViewController
func presentCardScanner(on viewController: UIViewController, animated: Bool, completion: (() -> Void)?)

/// Dismiss CardIO scan ViewController
func dismissCardScanner(animated: Bool, completion: (() -> Void)?)

VGSCardIOScanControllerDelegate

Declaration

protocol VGSCardIOScanControllerDelegate

Managing Controller States

/// On user confirm scanned data by selecting Done button on CardIO screen
@objc optional func userDidFinishScan()

/// On user selecting Cancel button on CardIO screen
@objc optional func userDidCancelScan()

Providing VGSTextFields for setting Scanned Data

 /// Asks VGSTextField where scanned data with type need to be set.
 /// Called after user select Done button, just before userDidFinishScan() delegate.
 @objc func textFieldForScannedData(type: CradIODataType) -> VGSTextField?

If scanned data is valid, it will be set in your VGSTextField automatically after user confirmation.

CradIODataType

Supported scan data types by CardIO module

CradIODataType Type, Value
cardNumber String, 16 digits number
expirationDate String, “mm/yy” digits
expirationMonth String, “mm” digits
expirationYear String, “yy” digits
cvc String, 3-4 digits

Usage

Inside your ViewController create and configure VGSCardIOScanController instance:

class ViewController: UIViewController {

  // Create VGSCardIOScanController instance
  var scanController = VGSCardIOScanController()

  // Scan card button
  var scanButton = UIButton()

  // VGS UI Elements
  var cardNumber = VGSCardTextField()
  var expCardDate = VGSTextField()
  var cvcCardNum = VGSTextField()
  var cardHolderName = UITextField(frame: .zero)

  override func viewDidLoad() {
     super.viewDidLoad()

     // Set preferred device camera
     scanController.preferredCameraPosition = .front

     // Set VGSCardIOScanDelegate
     scanController.delegate = self

     // Add action to handle scan button touch
     scanButton.addTarget(self, action: #selector(scanData(_:)), for: .touchUpInside)
     ...
    }

    // Present scan ViewController
    @objc func scanData(_ sender: UIButton) {
        scanController.presentCardScanner(on: self, animated: true, completion: nil)
    }
  }

To setup scanned data into specific VGSTextField implement textFieldForScannedData: . If scanned data is valid it will be set in your VGSTextField automatically after user confirmation. Check CradIODataType to get available scanned data types.

extension ViewController: VGSCardIOScanControllerDelegate {

  //When user press Done button on CardIO screen
  func userDidFinishScan() {
      scanController.dismissCardScanner(animated: true, completion: {
          // add actions on scan controller dismiss completion
      })
  }

  //When user press Cancel button on CardIO screen
  func userDidCancelScan() {
      scanController.dismissCardScanner(animated: true, completion: nil)
  }

  //Asks VGSTextField where scanned data with type need to be set.
  func textFieldForScannedData(type: CradIODataType) -> VGSTextField? {
      switch type {
      case .expirationDate:
          return expCardDate
      case .cvc:
          return cvcCardNum
      case .cardNumber:
          return cardNumber
      default:
          return nil
      }
  }
}