VGS Collect iOS SDK - React Native Demo

NOTE: This demo is just an example of how VGS Checkout iOS SDK and VGS Checkout Android SDK can be integrated into your's RN application. VGS don't provide RN wrapper for Checkout SDK.

How to run it?

Requirements

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

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

Install npm:

npm install

Open Terminal and change working directory to ios folder that is inside:

cd ~/CheckoutDemoApp/ios

Install pods:

pod install

Step 4

iOS: In vgs-checkout-react-native-demo folder find and open CheckoutDemoApp.xcworkspace file. In the app go to CheckoutCustomFlowManager.swift file, find DemoAppConfiguration class and vaultId attribute there:

let vaultId = "vaultId"

and replace vaultId with your organization vault id.

Android: Replace private const val VAULT_ID = "" in android/app/src/main/java/com/checkoutdemoapp/modules/checkout/CheckoutModule.kt with your organization vault id.

Step 5

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

Useful links

• VGS Checkout SDK Documentation
• Checkout Demo App in native iOS
• Checkout Demo App in native Android
• Exporting Swift into React Native