VGS Collect/Show SDKs - React Native Demo

NOTE: This demo is just an example of how VGS Collect iOS SDK & Android SDK and VGS Show iOS SDK & Android SDK can be integrated into your RN application. We do not have official RN packages.

How to run it?

Requirements

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

NOTE: This demo is build with Xcode 13.4. Check open Xcode-React Native issues here and here.

Step 1

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

• Find the configuration.yaml file inside the app repository and download it.
• Go to the Routes section on the Dashboard page and select the Inbound tab.
• Press Manage button at the right corner and select Import YAML file.
• Choose configuration.yaml file that you just downloaded and tap on Save button to save the route.

Step 2

Clone the application repository.

Step 3

Open Terminal, navigate to application directory and run npm install & generate the iOS bundle:

npm install && npm run build:ios

In Terminal change working directory to ios folder that is inside:

cd ios

Install pods:

pod install

Step 4

iOS: In vgs-collect-show-ios-react-native-demo folder find and open AwesomeProject.xcworkspace file. In the app go to VGSCollectManager.swift file, find SharedConfig class and vaultId attribute there:

let vaultId = "vaultId"

and replace vaultId with your organization vault id.

Launch the application using the below command:

npx run-ios

Android: Setup "<VAULT_ID>".

For VGS Collect Android SDK, open SharedConfig.java. Replace the <VAULT_ID> with your vault id, and replace <ENVIRONMENT> with your environment (sandbox or live).

Ensure the Android SDK is available on your PATH:

export ANDROID_HOME="~/Library/Android/sdk"

Launch the application using the below command:

npm run android

Step 5

Run the application and submit the form. Then go to the Logs tab on Dashboard, find request and secure a payload. Instruction for this step you can find here.

How it works?

The application provides you an example of how to integrate VGS Collect and Show SDKs into React Native via bridges. It also shows you an example of how to integrate with CardIO and collect card data securely.

There are two main types of integration: simplified and andvanced approach. VGSCollect and VGSShow integration consists of 2 main parts:

1. Creating and styling UI components: VGSTextField & VGSLabel.
2. Setup VGSCollect & VGSShow instance and binding them to proper UI components to VGSTextField & VGSLabel.

How to bind VGSCollect & VGSShow to UI textFields and labels defines approach.

Simplified approach

Simplified approach is based on binding VGSCollect textfield inputs to VGSCollect in native platform code iOS and Android. Each VGSTextField can be bound to shared VGSCollect instance (singleton) in native code on creation. This approach doesn't require complicated interaction with React Native since all setup is going on in native platform code.

The same adheres to VGSShow.

Advanced approach(iOS only)

Advanced approach is based on binding VGSCollect textfields to VGSCollect instance in React Native code. It requires more code and more interactions with React Native, it can provide more flexibility if you need it (like setup VGSCollect from React Native code).

1. Create native view VGSCollectCardView subclass of UIView holding VGSTextFields. Keeping multiple VGSTextFields in single view is not required, however it may mitigate handling additional actions.
2. Create React Native bridge class returning view subclass. VGSCollectCardViewManager in iOS and in Android.
3. Create VGSCollectManager React Native bridge class holding VGSCollect instance with proper methods.
4. Import native module for VGSCollectCardView, add VGSCollectCardView to your component tree.
5. Import native module for VGSCollectManager.
6. Setup VGSCollectManager once in useEffect([]), set your vaultId and environment.
7. Create ref for VGSCollectCardView, register useEffect hook for this ref. You should not use useRef hook for this since VGSCollectCardView is not pure React component.
8. When ref is avaiable use findNodeHandle to find React node for this view. Then pass node number to native code with VGSCollectManager and find native view corresponding to this node. Bind VGSCollect with proper VGSTextFields.

Useful links

• VGS Collect SDK Documentation
• VGS Show SDK Documentation
• VGS Collect iOS SDK source code on GH
• VGS Collect Android SDK source code on GH
• VGS Show iOS SDK source code on GH
• VGS Show Android SDK source code on GH
• Exporting Swift into React Native