How to Integrate Card.io to Create Credit Card Scanner App For iPhone

Ever since the smartphones have arrived, it became quite easier to make and receive payments on-the-go. iOS users, for example, can pick up Square dongles at a variety of national retailers, while those smartphones with Google Wallet can now raid vending machines with just a few taps. Both of these methods, however, still requires unique hardware, whereas the Card.io for iOS platform utilizes your iPhone’s built-in camera to charge funds by scanning a credit card.

The company, Card.io, initially unveiled its scanning technology (private beta) as a tool for iPhone app developers to integrate Card.io in iPhone apps back in June. Now, they’ve launched public SDK to integrate Card.io in any of the iPhone application. In fact, there are a lot of successful companies already using Card.io in their smartphone apps.

As we always like to experiment with new frameworks and tools, we gave it a try and created an iOS swift tutorial on how to use integrate card.io to create credit card scanner for iPhone.

Let’s Get Started

Go to XCode and create a new project.

Select project type and go to next (here we are selecting Single View Application).

Set the project name and click on next.

With this, you’ve now created a new project.

Now go to Main.storyboard and select ViewController

drag and drop View,TextField,Button from “Show the object library” section.

Now Create PodFile and Write PodName in File and Install Pods.

Pod name : pod ‘CardIO’

Now write the following key in info.plist for camera use.

NSCameraUsageDescription

Next, set outlet UITextField in ViewController and Implement Delegate Methods Of:

CardIOPaymentViewControllerDelegate Using Extension

import UIKit

class CardIOExample: UIViewController {

@IBOutlet var txtCvv: UITextField!
@IBOutlet var txtExpiry: UITextField!
@IBOutlet var txtNumber: UITextField!
@IBOutlet var txtCardHolderName: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
CardIOUtilities.preload()

// Do any additional setup after loading the view, typically from a nib.
}

// Press on ScanCard button and display ScanCard screen

@IBAction func btnScanCardClk(_ sender: UIButton) {


let cardIOVC = CardIOPaymentViewController(paymentDelegate: self)
cardIOVC?.collectCardholderName = true
cardIOVC?.modalPresentationStyle = .formSheet
cardIOVC?.guideColor = UIColor(red:0.13, green:0.54, blue:0.61, alpha:1.00)
cardIOVC?.disableManualEntryButtons = true
cardIOVC?.hideCardIOLogo = true
present(cardIOVC!, animated: true, completion: nil)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}

// extension for CardIOPaymentViewControllerDelegate

extension CardIOExample : CardIOPaymentViewControllerDelegate{

// Close ScanCard Screen
public func userDidCancel(_ paymentViewController: CardIOPaymentViewController!) {
paymentViewController.dismiss(animated: true, completion: nil)
}

// Using this delegate method, retrive card information
func userDidProvide(_ cardInfo: CardIOCreditCardInfo!, in paymentViewController: CardIOPaymentViewController!) {
if let info = cardInfo {
let str = String(format: "Received card info.\n Cardholders Name: %@ \n Number: %@\n expiry: %02lu/%lu\n cvv: %@.", info.cardholderName,info.redactedCardNumber
, info.expiryMonth, info.expiryYear, info.cvv)

txtCardHolderName.text = info.cardholderName

txtNumber.text = info.redactedCardNumber

txtExpiry.text = String(format:"%02lu/%lu\n",info.expiryMonth,info.expiryYear)

txtCvv.text = info.cvv

print(str)
}

paymentViewController.dismiss(animated: true, completion: nil)
}
}

Now run the project.

As you can see, it’s pretty straightforward to implement if you follow the above steps. Now if you want to go one step forward, you can also set up the functionality of recurring payments or use Apple Pay at some point in future. And if you get stuck somewhere, just comment down below to hire iPhone app developer to get it integrated into your iPhone app.

This page was last edited on March 14th, 2018, at 2:43.