VGSCollectSDK 1.3.0

VGSCollectSDK 1.3.0

Maintained by Vitalii Obertynskyi, Dmytro Khludkov.



CircleCI UT license Platform swift Cocoapods Compatible

VGS Collect iOS SDK

VGS Collect - is a product suite that allows customers to collect information securely without possession of it. VGSCollect iOS SDK allows you to securely collect data from your users via forms without having to have that data pass through your systems. The form fields behave like traditional input fields while securing access to the unsecured data.

Table of contents

VGS Collect iOS SDK State VGS Collect iOS SDK Response

Before you start

You should have your organization registered at VGS Dashboard. Sandbox vault will be pre-created for you. You should use your <vault-id> to start collecting data. Follow integration guide below.

Integration

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. To integrate VGSCollectSDK into your Xcode project using CocoaPods, specify it in your Podfile:

pod 'VGSCollectSDK'

Usage

Create VGSCollect instance and VGS UI Elements

Use your <vault-id> to initialize VGSCollect instance. You can get it in your organisation dashboard.

import UIKit
import VGSCollectSDK

class ViewController: UIViewController {

  var vgsForm = VGSCollect(id: "<vault-id>", environment: .sandbox)

  // VGS UI Elements
  var cardNumber = VGSTextField()

    override func viewDidLoad() {
        super.viewDidLoad()

        // Configure Elements UI
        let cardConfig = VGSConfiguration(collector: vgsForm, fieldName: "cardNumber")
        // Submit only if cardNumber input is valid
        cardConfig.isRequiredValidOnly = true
        cardConfig.type = .cardNumber

        cardNumber.configuration = cardConfig
        cardNumber.placeholder = "card number"

        cardNumber.frame = CGRect(x: 10, y: 55, width: 310, height: 35)
        view.addSubview(cardNumber)
    }
}

Customize UI Elements

You can use general properties for styling your UI elements.

// UI Elements styling
cardNumber.borderWidth = 1
cardNumber.borderColor = .lightGray
cardNumber.padding = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
cardNumber.textColor = .magenta
cardNumber.font = UIFont(name: "Arial", size: 22)
cardNumber.textAlignment = .natural

Observe Fields State

// Observing text fields
vgsForm.observeStates = { textFields in
    textFields.forEach({ textField in
           print(textField.state.description)
    })
}

Collect and Send Your Data

func sendData() {
    // extra information will be sent together with all sensitive card information
    var extraData = [String: Any]()
    extraData["cardHolderName"] = "Joe Business"

    // send data
    vgsForm.submit(path: "/post", extraData: extraData, completion: { (json, error) in
        if error == nil, let json = json {
            // parse response data
        } else {
            if let error = error as NSError?, let errorKey = error.userInfo["key"] as? String {
                if errorKey == VGSSDKErrorInputDataRequiredValid {
                    // handle VGSError error
                }
            } else {
               // handle other errors 
            }
        }
    })
}

More useful UI component for bank cards

VGSCardTextField automatically detects card provider and display card brand icon in the input field.

// create VGSCardTextField instance
var cardNumber = VGSCardTextField()

Scan Credit Card Data

VGSCollect provide secure card.io integration for collecting and setting scanned data into VGSTextFields. 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 key with camera usage description into your App Info.plist.

In your ViewController create VGSCardIOScanController instance

class ViewController: UIViewController {

var scanController = VGSCardIOScanController()

override func viewDidLoad() {
    super.viewDidLoad()
    
    // set preferred device camera
    scanController.preferredCameraPosition = .front
    
    // set VGSCardIOScanDelegate
    scanController.delegate = self
}

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

Handle VGSCardIOScanControllerDelegate functions. 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 scand 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
        }
    }
}

Demo Application

Demo application for collecting card data on iOS is here.

Scan Credit Card Data

VGSCollect provide secure CardIO integration module for collecting and setting scaned data into VGSCollectTextFields. To start using CardIO as bank cards scanner you should install additional pod into your app:

pod 'VGSCollectSDK'
pod 'VGSCollectSDK/CardIO'

In your ViewController create VGSCardIOScanController instance

class ViewController: UIViewController {

var scanController = VGSCardIOScanController()

override func viewDidLoad() {
    super.viewDidLoad()
    
    // set preferred device camera
    scanController.preferredCameraPosition = .front
    
    // set VGSCardIOScanDelegate
    scanController.delegate = self
}

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

Handle VGSCardIOScanControllerDelegate functions. 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 scand 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
        }
    }
}

You should also add NSCameraUsageDescription key with description string into your App Info.plist.

For more details check our documentation

https://www.verygoodsecurity.com/docs/vgs-collect/ios-sdk

Dependencies

  • iOS 10+
  • Swift 5
  • 3rd party libraries:
    • Alamofire

License

VGSCollect iOS SDK is released under the MIT license. See LICENSE for details.