LinkPay SDK – ReactNative

Installation

npm

npm install @link.money/linkpay-reactnative

yarn

yarn add @link.money/linkpay-reactnative

Use

The LinkPay SDK presents as a full screen takeover so you’ll want to include it at the root of your navigation stack.

import {
  LinkPaylinkPayContextProvider,
  LinkPayView,
} from '@link.money/linkpay-reactnative';

<NavigationContainer>
  <LinkPayContextProvider>
    <Stack.Navigator>
      <Stack.Group>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ title: 'Your app’s root view' }}
        />
      </Stack.Group>
      <Stack.Group screenOptions={{ presentation: 'modal' }}>
        <Stack.Screen name="LinkPayView" component={LinkPayView} />
      </Stack.Group>
    </Stack.Navigator>
  </LinkPayContextProvider>
<NavigationContainer>

Additionally, you’ll need to reference it from your checkout UI.

import {
  LinkService,
  LinkHost,
  LinkCustomerAccount,
  useLinkPaylinkPayContext,
  LinkPayEnvironment,
} from '@link.money/linkpay-reactnative';

// Checkout
export default function Checkout({ navigation }: { navigation: any }) {
  const linkPayContext = useLinkPayContext();
  const [customerId, setCustomerId] = useState('');

  // Called when the customer has successfully linked their account
  useEffect(() => {
    if (linkPayContext.customerId.length > 0) {
      setCustomerId(linkPayContext.customerId);
    }
  }, [linkPayContext.customerId]);

  // Called if customer attempted but failed to link their account
  useEffect(() => {
    if (linkPayContext.failure) {
      let message = linkPayContext.failure.message;

      if (linkPayContext.failure.code) {
        message += ` (code: ${linkPayContext.failure.code})`;
      }

      return Alert.alert('Error', message);
    }
  }, [linkPayContext.failure]);

  // Call this method when customer clicks/taps the link account action
  const linkCustomerAccount = () => {
    // Retrieved from LinkPay API using client id + secret
    linkPayContext.setSessionKey(sessionKey);

    // Choices are sandbox and production with sandbox being default
    linkPayContext.setEnvironment(LinkPayEnvironment.sandbox);

    // Present the modal
    navigation.navigate('LinkPayView');
  };
}

Further Reading

• Developer documentation
• Link Financial Website