React Native SDK

The Accrue Savings React Native SDK is available as a package for your company to integrate the Accrue Wallet.

It simplifies the integration by combining the Wallet lifecycle and deep linking into a single package.

Prerequisite: Merchant ID

Please reach out to your Accrue Savings representative to get your Merchant ID to load the widget.

Flavors

The React Native SDK comes in two flavors:

• Bare SDK
• Expo SDK

Installation

To install the Accrue Savings SDK, run the following command:

• If you are using Expo:

Install Expo SDK

npm install --save @accrue-savings/expo-sdk

• If you are using Bare React Native:

Install Bare SDK

npm install --save @accrue-savings/react-native-sdk

Link the dependencies

After installing the dependencies, you will need to link them to your project, on the root of your project run:

npm

Link the dependencies

  npx accrue-sdk link

yarn

Link the dependencies

  yarn accrue-sdk link

pnpm

Link the dependencies

  pnpm exec accrue-sdk link

Usage

Here is an example of how to embed the widget in a React Native application:

import React, { useState } from "react";
import {
  AccrueWalletWidget,
  UserSignInPayload,
} from "@accrue-savings/<expo-sdk|react-native-sdk>";

export default function AccrueWalletView({ route }) {
  const params = route.getParams();

  const [signedInUserPayload, setSignedInUserPayload] =
    useState<UserSignInPayload>();

  return (
    <SafeAreaView
      style={{
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "white",
      }}
    >
      <AccrueWalletWidget
        // For production releases set sandbox to `false` or remove the prop
        sandbox={true}
        // Merchant ID from Accrue (value will be different for `production` and `sandbox`)
        merchantId={params.merchantId}
        // Forwarded user data
        userData={{
          referenceId: "123e4567-e89b-12d3-a456-426614174000",
          email: "user@email.com",
          phoneNumber: "+12125559999",
        }}
        // Once the user signs in you'll receive basic profile data that you can store and use for lookups
        onSignIn={(user) => {
          setSignedInUserPayload(user);
        }}
        // Redirection token for deep linking
        redirectionToken={params.to}
        // Optional style for the container
        style={{ flex: "auto" }}
      />
    </SafeAreaView>
  );
}

Props

The following props are available for the AccrueWalletWidget component:

merchantId
Required	Yes
Type	string
Description	Merchant ID (received from Accrue)
Default	N/A
Example	724a57f2-1670-42de-b1f0-a94425fb60cf
sandbox
Required	No
Type	boolean
Description	Flag that indicates if you are connecting to the Accrue Sandbox
Default	N/A
Example	false
userData
Required	No
Type	{referenceId?: string, email?: string, phoneNumber?: string}
Description	Your own user data to be attached to the user profile stored with Accrue
Default	undefined
Example	{referenceId: "123e4567-e89b-12d3-a456-426614174000", email: "user@email.com", phoneNumber: "+12125559999"}
onSignIn
Required	No
Type	(userSignInPayload: UserSignInPayload) => void
Description	Callback with basic user profile data that can be stored and used for lookups
Default	undefined
Example	userSignInPayload: { id: string; referenceId?: string | null; isNewUser: boolean; }
redirectionToken
Required	No
Type	string
Description	Redirection token for the deep linking. This token will be used to redirect the user to a specific screen within the Accrue Savings Widget
Default	undefined
Example	61a77652-14ae-4ed4-9bb3-cdb31312869e
style
Required	No
Type	StyleProp<ViewStyle>
Description	Style for the underlying WebView container. Type: React Native Docs
Default	undefined
Example	{ "flex": "auto" }