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", // Deprecated — use stableReferenceId instead
          stableReferenceId: "stable-abc-123", // Always set for new integrations (immutable once set). Legacy merchants may omit during transition.
          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, stableReferenceId?: string, email?: string, phoneNumber?: string}
Description	Your own user data to be attached to the user profile stored with Accrue. New integrations must include stableReferenceId (immutable once set). referenceId is deprecated. The API still accepts profiles without stableReferenceId only for legacy merchants during migration.
Default	undefined
Example	{referenceId: "123e4567-e89b-12d3-a456-426614174000", stableReferenceId: "stable-abc-123", 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; stableReferenceId?: string | null; effectiveReferenceId?: 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" }