Card scanning

Card scanning implementation tutorial

Card.io was acquired by PayPal, and has recently made their card scanning SDK open source. You can find both the compiled sdk and the source on GitHub.

The SDK is relatively easy to integrate using cocoapods.

add the CardIO pod to your Podfile and run pod install

pod 'CardIO'

removing logo

The CardIOView class has two properties that set the behavior of the visible logos.

/// Set to YES to show the card.io logo over the camera instead of the PayPal logo. Defaults to NO.
@property(nonatomic, assign, readwrite) BOOL useCardIOLogo;
/// Hide the PayPal or card.io logo in the scan view. Defaults to NO.
@property(nonatomic, assign, readwrite) BOOL hideCardIOLogo;

In case you do not want any logo to show up you just need to set the hideCardIOLogo property in the CardIOView instance you are using to YES

The following is taken fromthe Card.IO readme:

Integrate as a View Controller

Create a class (most likely a subclass of UIViewController) that conforms to CardIOPaymentViewControllerDelegate.

// SomeViewController.h

#import "CardIO.h"
@interface SomeViewController : UIViewController<CardIOPaymentViewControllerDelegate>
// ...

Make an optional call to speed up the subsequent launch of card.io scanning:

// SomeViewController.m

- (void)viewWillAppear:(BOOL)animated {
  [super viewWillAppear:animated];
  [CardIOUtilities preload];
}

Start card.io card scanning:

// SomeViewController.m

- (IBAction)scanCard:(id)sender {
  CardIOPaymentViewController *scanViewController = [[CardIOPaymentViewController alloc] initWithPaymentDelegate:self];
  [self presentViewController:scanViewController animated:YES completion:nil];
}

Write delegate methods to receive the card info or a cancellation:

// SomeViewController.m

- (void)userDidCancelPaymentViewController:(CardIOPaymentViewController *)scanViewController {
  NSLog(@"User canceled payment info");
  // Handle user cancellation here...
  [scanViewController dismissViewControllerAnimated:YES completion:nil];
}

- (void)userDidProvideCreditCardInfo:(CardIOCreditCardInfo *)info inPaymentViewController:(CardIOPaymentViewController *)scanViewController {
  // The full card number is available as info.cardNumber, but don't log that!
  NSLog(@"Received card info. Number: %@, expiry: %02i/%i, cvv: %@.", info.redactedCardNumber, info.expiryMonth, info.expiryYear, info.cvv);
  // Use the card info...
  [scanViewController dismissViewControllerAnimated:YES completion:nil];
}

Integrate as a View

CardIOView is new as of card.io Version 3.3.0 (September 2013). We look forward to seeing how creative developers integrate it into their apps. If you do something cool with it, share it with @cardio! We also look forward to quickly resolving any issues that you may discover.

Create a class (most likely a subclass of UIViewController) that conforms to CardIOViewDelegate.

// SomeViewController.h

#import "CardIO.h"
@interface SomeViewController : UIViewController<CardIOViewDelegate>
// ...

Using a CardIOView provides UI flexibility. Here are two sample integration options:

• Create a CardIOView when you need it, and then delete it when its work is finished.
• Include a hidden CardIOView in your view, show it when you need it, and then hide it when its work is finished.

Option 1: Create a CardIOView when you need it

Confirm that the user's device is capable of scanning cards:

// SomeViewController.m

- (void)viewDidLoad {
  [super viewDidLoad];

  if (![CardIOUtilities canReadCardWithCamera]) {
    // Hide your "Scan Card" button, or take other appropriate action...
  }
}

Make an optional call to speed up the subsequent launch of card.io scanning:

// SomeViewController.m

- (void)viewWillAppear:(BOOL)animated {
  [super viewWillAppear:animated];
  [CardIOUtilities preload];
}

Start card.io card scanning:

// SomeViewController.m

- (IBAction)scanCard:(id)sender {
  CardIOView *cardIOView = [[CardIOView alloc] initWithFrame:CGRECT_WITHIN_YOUR_VIEW];
  cardIOView.delegate = self;
  
  [self.view addSubview:cardIOView];
}

Write the delegate method to receive the results:

// SomeViewController.m

- (void)cardIOView:(CardIOView *)cardIOView didScanCard:(CardIOCreditCardInfo *)info {
    if (info) {
    // The full card number is available as info.cardNumber, but don't log that!
    NSLog(@"Received card info. Number: %@, expiry: %02i/%i, cvv: %@.", info.redactedCardNumber, info.expiryMonth, info.expiryYear, info.cvv);
    // Use the card info...
  }
  else {
    NSLog(@"User cancelled payment info");
    // Handle user cancellation here...
  }
  
  [cardIOView removeFromSuperview];
}

Include a method to cancel card scanning:

// SomeViewController.m

- (IBAction)cancelScanCard:(id)sender {
  [cardIOView removeFromSuperview];
}

Option 2: Include a hidden CardIOView in your view

Make an IBOutlet property:

// SomeViewController.m

@interface SomeViewController ()
@property(nonatomic, strong, readwrite) IBOutlet CardIOView *cardIOView;
@end

In your .xib, include a CardIOView, mark it as hidden, and connect it to the IBOutlet property. (Note: usually you will want to set the background color of the CardIOView to clearColor.)

After confirming that the user's device is capable of scanning cards, set the delegate property of the CardIOView:

// SomeViewController.m

- (void)viewDidLoad {
  [super viewDidLoad];

  if (![CardIOUtilities canReadCardWithCamera]) {
    // Hide your "Scan Card" button, remove the CardIOView from your view, and/or take other appropriate action...
  } else {
    self.cardIOView.delegate = self;
  }
}

Make an optional call to speed up the subsequent launch of card.io scanning:

// SomeViewController.m

- (void)viewWillAppear:(BOOL)animated {
  [super viewWillAppear:animated];
  [CardIOUtilities preload];
}

Start card.io card scanning:

// SomeViewController.m

- (IBAction)scanCard:(id)sender {
  self.cardIOView.hidden = NO;
}

Write the delegate method to receive the results:

// SomeViewController.m

- (void)cardIOView:(CardIOView *)cardIOView didScanCard:(CardIOCreditCardInfo *)info {
    if (info) {
    // The full card number is available as info.cardNumber, but don't log that!
    NSLog(@"Received card info. Number: %@, expiry: %02i/%i, cvv: %@.", info.redactedCardNumber, info.expiryMonth, info.expiryYear, info.cvv);
    // Use the card info...
  }
  else {
    NSLog(@"User canceled payment info");
    // Handle user cancellation here...
  }

  cardIOView.hidden = YES;
}

Include a method to cancel card scanning:

// SomeViewController.m

- (IBAction)cancelScanCard:(id)sender {
  self.cardIOView.hidden = YES;
}

Hints & Tips

• Processing images can be memory intensive, so make sure to test that your app properly handles memory warnings.
• For your users' security, obscure your app's cached screenshots.
  Note: By default, a CardIOPaymentViewController automatically blurs its own screens when the app is backgrounded. A CardIOView does not do any automatic blurring.
• The first time that you create either a CardIOPaymentViewController or a CardIOView, the card.io SDK must load resources, which can result in a noticeable delay. To avoid this delay you may optionally call [CardIOUtilities preload] in advance, so that this resource loading occurs in advance on a background thread.