React Native SDK - User Guide
Integration
Use one of the following methods to import the React Native SDK to your project.
npm
Copied!
npm install @link.money/linkpay-reactnative@3yarn
Copied!
yarn add @link.money/linkpay-reactnative@3In addition to the example shown below, we have also made available sample applications demonstrating how to integrate the SDK.
Example
The React Native SDK presents as a full screen takeover so you’ll want to include it at the root of your navigation stack.
Example
Copied!
1import {
2 LinkPayContextProvider,
3 LinkPayView,
4} from '@link.money/linkpay-reactnative';
5
6<NavigationContainer>
7 <LinkPayContextProvider>
8 <Stack.Navigator>
9 <Stack.Group>
10 <Stack.Screen
11 name="Home"
12 component={Home}
13 options={{ title: 'Your app’s root view' }}
14 />
15 </Stack.Group>
16 <Stack.Group screenOptions={{ presentation: 'modal' }}>
17 <Stack.Screen name="LinkPayView" component={LinkPayView} />
18 </Stack.Group>
19 </Stack.Navigator>
20 </LinkPayContextProvider>
21<NavigationContainer>Additionally, you’ll need to reference it from your checkout UI. Two examples are shown below.
Use the LinkButton component to surface the "Secure Bank Payment" button that when clicked would open a session where linking and payment both are performed by Link.
Example - Account Linking and Payment Initiation
Copied!
1import {
2 LinkButton,
3 useLinkPayContext,
4 LinkPayEnvironment
5} from '@link.money/linkpay-reactnative';
6
7// Checkout
8export default function Checkout({ navigation }: { navigation: any }) {
9 const linkPayContext = useLinkPayContext();
10 const [customerId, setCustomerId] = useState('');
11 const [paymentId, setPaymentId] = useState('');
12 const [paymentStatus, setPaymentStatus] = useState('');
13 const [btnDisabled, setBtnDisabled] = useState(false);
14
15 // Called when account linking and payment has completed
16 useEffect(() => {
17 if (linkPayContext.sessionResult) {
18 setCustomerId(linkPayContext.sessionResult.customerId);
19 setPaymentId(linkPayContext.sessionResult.paymentId);
20 setPaymentStatus(linkPayContext.sessionResult.status);
21 }
22 }, [linkPayContext.sessionResult]);
23
24 // Called if a failure occurred during account linking or payment
25 useEffect(() => {
26 if (linkPayContext.failure) {
27 let message = linkPayContext.failure.message;
28
29 if (linkPayContext.failure.code) {
30 message = message.concat(' (code: ', linkPayContext.failure.code, ')');
31 }
32
33 return Alert.alert('Error', message);
34 }
35 }, [linkPayContext.failure]);
36
37 return (
38 <SafeAreaView>
39 <ScrollView>
40 // ... other checkout form content ...
41 <View style={{alignItems: 'center'}}>
42 <LinkButton // Button that when clicked handles the transition to the LinkPayView modal for linking and payment.
43 navigation={navigation}
44 sessionKey={sessionKey} // Retrieved from LinkPay API using client id + secret
45 environment={LinkPayEnvironment.sandbox} // target environment - either sandbox or production
46 disabled={btnDisabled} // optional button enablement toggle
47 />
48 </View>
49 </ScrollView>
50 </SafeAreaView>
51 );
52}Navigate to the LinkPayView modal directly for linking-only sessions and use LinkPay APIs afterwards to initiate payments.
Example - Account Linking
Copied!
1import {
2 useLinkPayContext,
3 LinkPayEnvironment
4} from '@link.money/linkpay-reactnative';
5
6// Checkout
7export default function Checkout({ navigation }: { navigation: any }) {
8 const linkPayContext = useLinkPayContext();
9 const [customerId, setCustomerId] = useState('');
10
11 // Called when the customer has successfully linked their account
12 useEffect(() => {
13 if (linkPayContext.sessionResult && linkPayContext.sessionResult.customerId.length > 0) {
14 setCustomerId(linkPayContext.sessionResult.customerId);
15 }
16 }, [linkPayContext.sessionResult]);
17
18 // Called if customer attempted but failed to link their account
19 useEffect(() => {
20 if (linkPayContext.failure) {
21 let message = linkPayContext.failure.message;
22 if (linkPayContext.failure.code) {
23 message = message.concat(' (code: ', linkPayContext.failure.code, ')');
24 }
25 return Alert.alert('Error', message);
26 }
27 }, [linkPayContext.failure]);
28
29 // Call this method when customer clicks/taps the link account action
30 const linkCustomerAccount = () => {
31 // Retrieved from LinkPay API using client id + secret
32 linkPayContext.setSessionKey(sessionKey);
33
34 // Choices are sandbox and production with sandbox being default
35 linkPayContext.setEnvironment(LinkPayEnvironment.sandbox);
36
37 // Present the modal
38 navigation.navigate('LinkPayView');
39 };
40 return (
41 // ... checkout form including button to link account ...
42 );
43}