Very Spacy Food
VGS Collect iOS SDK Showcase Application

Very Spacy Food is a food ordering demo application build with VGSCollectSDK for securely collecting credit card data.

How to run it?

Requirements

• Installed latest Xcode
• Installed latest CocoaPods
• Organization with VGS

Step 1

Go to your VGS organization and establish Inbound connection. For this demo you can import a pre-built Routes configuration:

• Inside the app repository find configuration.yaml file and download it.
• On the Dashboard screen go to the Routes section and selet Inbound Tab.
• At the right corner you will see Manage button. Press it and select Import YAML file, then choose configuration.yaml that you just download and Save the Rout.
• Now the cards data you send by VGSCollectSDK will be secured.

Step 2

Clone Very Spacy Food application repository.

git@github.com:verygoodsecurity/very-spacy-food.git

Step 3

Install application pods.

Open Terminal and change working directory to Very Spacy Food application folder:

$ cd very-spacy-food

Install pods:

pod install

If you already try the app before, you can check for pod updates to get the latest SDK version. In Terminal run the command:

pod update

Step 4

In Very Spacy Food folder find and open with Xcode Very Spacy Food.xcworkspace file (not - Very Spacy Food.xcodeproj). In the app go to CollectCreditCardDataViewController.swift file, find the line:

let vaultId = "vaultId"

and replace vaultId with your organization vault id.

Step 5

Run the application and try to order some Very Spacy Food.

When on Add Credit Card Data sceen

You can use test credit card data to make the order, e.x.:

/// Cardholder Name 
Joe Business

/// Visa Test Card Number   
4111111111111111

or

/// Custom Brand Card Number
911 11111111 1111

/// Exp. Date  
11/22

/// CVC code
123

Press the Save button and the data will be submitted to VGS.
Go to the Logs tab on Dashboard, find request and secure a payload.
Instruction for this step you can find here.

Step 6

Check examples for how to integrate VGSCollectSDK into your app.

CollectCreditCardDataViewController.swiftis build with VGSCollect Forms. You can check how to customise SDK UI elemetnts, observe field states(validation, card bin & last 4 numbers, card brand, etc), submit data to VGS. After you submit card data, VGS will return alias for each secured filed instead of raw data. Then you can use alias to store on your backend or make payments later.

CheckoutViewController.swift use not sensitive card data as card brand, card number bin and last 4 numbers to provide user info about his payment data. On Pay action app will send alias data to our test backend. For demo purpose backend actually do nothing but send "Success" in response if you reach it.

Note that usually you shouldn't make a payment request to payment providers directly from your production app. For security reasons payment requests should be done from your backend. On payment request alias will go through VGS forward proxy. More information how to setup Outbound request from your backend is described here

Useful links

• Documentation
• VGSCollectSDK API References
• VGSCollectSDK GitHub Repo
• CocoaPods