Getting Started
Getting Started with VGS Collect React Native SDK
Before you start, you can also check @vgs/collect-react-native GitHub Page and Example Application.
How to Integrate the SDK
Quickstart from Dashboard
You should have your organization registered at VGS Dashboard. A Sandbox Vault will be pre-created for you. Use your VGS Dashboard to start collecting data. If you don’t have an organization registered yet, check the Quick Integration guides. Then, follow the VGSCollectSDK integration guide below
Integrate VGSCollectSDK into your React Native Project
Step 1: Install the SDK
VGS Collect SDK is distributed through npm.
Install the @vgs/collect-react-native package using npm or yarn:
npm install @vgs/collect-react-native
yarn add @vgs/collect-react-native
Ensure you have React Native set up in your project. If not, follow the React Native Getting Started guide.
Next
Follow the steps below to build a simple form that collects credit card data and submits it securely to your Vault.
Step 2: Configure Your App
Import the SDK Components:
import { VGSCollect, VGSTextInput, VGSCardInput, VGSCVCInput } from '@vgs/collect-react-native';To initialize VGSCollect instance you need to set your Vault id and Environment type.
Initialize VGSCollect:
const collector = new VGSCollect('yourVaultId', 'sandbox'); // Use 'live' for production
You can have multiple
VGSCollectinstances; they will work independently with the fields you configure for each specific instance. - AllVGSCollectinstances can be configured differently.
There are two steps in the integration process:
Configuring VGS Collect UI components
Sending data to VGS
Configure UI Components
Create UI Form with VGS Input components
VGS Collect UI inputs have pre-defined configurations, such as validation and masking. To use a pre-defined configuration, you should use the type field. Available types are described in VGSInputType. More information about VGS Collect UI components is described here.
import { StyleSheet, SafeAreaView, View, Text, TouchableOpacity } from 'react-native';
import { VGSCollect, VGSTextInput, VGSCardInput, VGSCVCInput } from '@vgs/collect-react-native';
const App = () => {
// Setupt your vauldId and environment
const collector = new VGSCollect('yourVaultId', 'sandbox');
return (
<SafeAreaView style={styles.safeArea}>
<View style={styles.container}>
<Text style={styles.title}>VGS Collect Example</Text>
<VGSTextInput
collector={collector}
fieldName="card_holder"
type="cardHolderName"
placeholder="Name"
onStateChange={(state: any) => {
console.log('card_holder state: ', state);
}}
containerStyle={styles.inputContainer} // Container-specific styles
textStyle={styles.inputText} // text-specific styles
/>
<VGSCardInput
collector={collector}
fieldName="card_number"
placeholder="4111 1111 1111 1111"
onStateChange={(state: any) => {
console.log('card_number state: ', state);
}}
containerStyle={styles.inputContainer} // Container-specific styles
textStyle={styles.inputText} // text-specific styles
/>
<VGSTextInput
collector={collector}
fieldName="expiration_date"
type="expDate"
placeholder="MM/YY"
divider="-"
onStateChange={(state: any) => {
console.log('expiration_date state: ', state);
}}
containerStyle={styles.inputContainer} // Container-specific styles
textStyle={styles.inputText} // text-specific styles
/>
<VGSCVCInput
collector={collector}
fieldName="card_cvc"
placeholder="CVC/CVV"
onStateChange={(state: any) => {
console.log('card_cvc state: ', state);
}}
containerStyle={styles.inputContainer} // Container-specific styles
textStyle={styles.inputText} // text-specific styles
/>
<TouchableOpacity
style={[styles.button, { backgroundColor: 'blue' }]}
onPress={handleSubmit}
>
<Text style={{ color: 'white' }}>Submit</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};Setup styles attributes
const styles = StyleSheet.create({
safeArea: {
flex: 1,
backgroundColor: 'white',
},
container: {
flex: 1,
paddingHorizontal: 20,
paddingTop: 40,
},
title: {
fontSize: 20,
marginBottom: 10,
},
inputContainer: {
height: 50,
borderWidth: 2,
borderRadius: 8,
paddingHorizontal: 12,
backgroundColor: 'white',
marginBottom: 20,
},
inputText: {
fontSize: 16,
color: 'black',
},
button: {
backgroundColor: 'blue',
padding: 15,
borderRadius: 8,
alignItems: 'center',
},
});Securely collecting and sending information
Use vgsCollect.submit(_:) to collect data from VGS Collect UI components and save it to your secure Vault. You can find additional information on how to send data to your Vault here.
// Handle submit request
const handleSubmit = async () => {
try {
const { status, response } = await collector.submit('/post', 'POST');
if (response.ok) {
try {
const responseBody = await response.json();
const json = JSON.stringify(responseBody, null, 2);
console.log('Success:', json);
} catch (error) {
console.warn(
'Error parsing response body. Body can be empty or your <vaultId> is wrong!',
error
);
}
} else {
console.warn(`Server responded with error: ${status}\n${response}`);
}
} catch (error) {
if (error instanceof VGSError) {
switch (error.code) {
case VGSErrorCode.InputDataIsNotValid:
for (const fieldName in error.details) {
console.error(
`Not valid fieldName: ${fieldName}: ${error.details[fieldName].join(', ')}`
);
}
break;
default:
console.error('VGSError:', error.code, error.message);
}
} else {
console.error('Network or unexpected error:', error);
}
}
};Check next
Last updated