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

Ever since 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 a public SDK to integrate Card.io in any of the iPhone applications. In fact, there are a lot of successful companies already using Card.io in their smartphone apps.

card-io

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 a credit card scanner for iPhone.

Let’s Get Started

Go to XCode and create a new project.

1.-Create

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

2.-ProjectType-and-Go

Set the project name and click on next.

3.-ProjectName-And-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.

4.-Drag-and-drop-ViewTextfieldbutton

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

Pod name : pod ‘CardIO’

5.-Add-Pod-and-Install

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

NSCameraUsageDescription

6.-Add-NSCameraUsageDescription
Next, set outlet UITextField in ViewController and Implement Delegate Methods Of:

CardIOPaymentViewControllerDelegate Using Extension

7.-CodePart-1

7.-CodePart-2

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.

Author Bio
Hitesh Trivedi
Hitesh Trivedi
Designation: iOS Team Lead

Hitesh Trivedi is an iOS Team Lead at Space-O Technologies. He has over 10 years of experience in iOS app development. He has guided to develop over 100 iPhone apps with unique features and functionalities. He has special expertise in Swift and Objective-C.