Skip to main content

React Native SDK

Integration

Use one of the following methods to import the React Native SDK to your project.

npm
npm install @link.money/linkpay-reactnative@1
yarn
yarn add @link.money/linkpay-reactnative@1

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
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.

Example
1import {
2	LinkService,
3	LinkHost,
4	LinkCustomerAccount,
5	useLinkPayContext,
6	LinkPayEnvironment,
7} from '@link.money/linkpay-reactnative';
8
9// Checkout
10export default function Checkout({ navigation }: { navigation: any }) {
11	const linkPayContext = useLinkPayContext();
12	const [customerId, setCustomerId] = useState('');
13
14	// Called when the customer has successfully linked their account
15	useEffect(() => {
16		if (linkPayContext.customerId.length > 0) {
17			setCustomerId(linkPayContext.customerId);
18		}
19	}, [linkPayContext.customerId]);
20
21	// Called if customer attempted but failed to link their account
22	useEffect(() => {
23		if (linkPayContext.failure) {
24			let message = linkPayContext.failure.message;
25
26			if (linkPayContext.failure.code) {
27				message = message.concat(' (code: ', linkPayContext.failure.code, ')');
28			}
29
30			return Alert.alert('Error', message);
31		}
32	}, [linkPayContext.failure]);
33
34	// Call this method when customer clicks/taps the link account action
35	const linkCustomerAccount = () => {
36		// Retrieved from LinkPay API using client id + secret
37		linkPayContext.setSessionKey(sessionKey);
38
39		// Choices are sandbox and production with sandbox being default
40		linkPayContext.setEnvironment(LinkPayEnvironment.sandbox);
41
42		// Present the modal
43		navigation.navigate('LinkPayView');
44	};
45}

Package

The React Native SDK contains everything necessary to kick off the linking flow and debug issues resulting from failed linking attempts.

Members

  • LinkPayContextProvider

    LinkPayContextProvider

    React context that passes values from the account linking to the calling React component

  • LinkService

    LinkService

    Retrieves customer and account info

  • LinkPayEnvironment

    LinkPayEnvironment

    LinkPay environment

  • LinkError

    LinkError

    Contains information about any linking errors

LinkPayContextProvider

Add this React context to your navigation stack so that linked account information can be passed back to the calling React component.

Properties

  • sessionKey

    string

    Your session key

  • Preferred Link environment, sandbox or production

  • customerId

    string

    Initially blank, it will contain the generated unique customer id after an account has been successfully linked

  • failure

    LinkError

    Initially null, it encapsulates any errors returned from the linking process

LinkError

  • message

    string

    Error message

  • code

    number *OPTIONAL

    Error code

LinkPayEnvironment

Enum with a value of either sandbox or production.

LinkService

This class provides methods to retrieve customer info and lists of authorized accounts.

Example

Create an instance of the LinkService class passing along the accessToken and environment arguments. You can use either a Promise-style callback or an await inside of an async method.

Example
1const [customerId, setCustomerId] = useState('');
2const [accounts, setAccounts] = useState<LinkCustomerAccount[]>([]);
3
4useEffect(() => {
5	if (customerId.length > 0 && accessToken) {
6		const service = new LinkService(accessToken, LinkPayEnvironment.sandbox);
7		service
8			.getAccounts(customerId)
9			.then((result: LinkCustomerAccount[]) => {
10				setAccounts(result);
11			})
12			.catch((error: any) => {
13				Alert.alert('Error', error.message);
14			});
15	}
16}, [customerId]);

Methods

LinkCustomerDetails

  • id

    string

    Customer ID

  • firstName

    string

    Customer’s first name

  • lastName

    string

    Customer’s last name

  • email

    string

    Customer’s email

  • status

    enum

    ACTIVE or CREATED

  • creationDate

    Date

    Account creation date

LinkCustomerAccount

  • accountId

    int

    Account ID

  • financialInstitutionId

    int

    Financial institution ID

  • financialInstitutionName

    string

    Financial Institution name

  • logoUrl

    URL *OPTIONAL

    URL for a financial institution’s logo, when available

  • lastFour

    string

    Last four digits of a bank account number

  • type

    enum

    CHECKING or SAVINGS

  • status

    enum

    ACTIVE or INACTIVE or ABANDON or CREATED

  • creationDate

    Date

    Account creation date