Home

Awesome

card.io logo

card.io SDK for iOS

card.io provides fast, easy credit card scanning in mobile apps.

NEW!!! card.io is now an open-source project!

As of December 2014, all of the source code for card.io is now available at the card.io-iOS-source repo.

What does this mean for you?

Brought to you by
PayPal logo

Stay up to date

Please keep your app up to date with the latest version of the SDK. All releases follow semantic versioning.

To receive updates about new versions:

You can find and start technical discussions using the Stack Overflow card.io tag.

Sample app

For a quick first look at card.io, we have included a very small sample application that you can build and run.

  1. Download the latest version of the SDK.
  2. Simply open the SampleApp folder or the SampleApp-Swift folder and follow the instructions in the README.md file you find there.

Instructions

The card.io iOS SDK includes header files and a single static library. We'll walk you through integration and usage.

Requirements

Setup

If you use CocoaPods, then add this line to your podfile:
pod 'CardIO'
If you don't use CocoaPods, then:
  1. Download the latest version of the SDK.
  2. Add the CardIO directory (containing several .h files, libCardIO.a, libopencv_core.a, and libopencv_imgproc.a) to your Xcode project.
  3. In your project's Build Settings (in the TARGETS section, not the PROJECTS section), add -lc++ to Other Linker Flags.
  4. Either:
  1. or:
With or without CocoaPods:
  1. Add card.io's open source license acknowledgments to your app's acknowledgments.
  2. Refer to the header files for more usage options and information.
  3. You should add the key NSCameraUsageDescription to your app's Info.plist and set the value to be a string describing why your app needs to use the camera (e.g. "To scan credit cards."). This string will be displayed when the app initially requests permission to access the camera.

Sample code

You can use card.io in two ways:

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 preloadCardIO];
}

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:

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 preloadCardIO];
}

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 preloadCardIO];
}

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