Mobile Integration Guide

The Accrue wallet can be seamlessly integrated into your mobile applications using our native SDKs. These SDKs provide a streamlined integration experience, combining wallet lifecycle management and deep linking capabilities in a single package.

Platform SDKs​

Accrue provides native SDKs for all major mobile platforms. Choose the SDK that matches your development environment:

Key Features​

All Accrue mobile SDKs provide:

• Native Integration - Embed the wallet directly within your app for a seamless user experience
• Deep Linking - Navigate users to specific screens within the wallet
• User Data Passing - Associate your app's user data with Accrue profiles
• Authentication Inheritance - Optional feature to use your app's authentication state
• Event Handling - Receive and respond to user actions in the wallet

React Native SDK​

The Accrue React Native SDK is available in two flavors:

• Bare SDK - For React Native apps without Expo
• Expo SDK - For Expo-based applications

Installation​

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

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

After installation, link the dependencies:

# For npm
npx accrue-sdk link

# For yarn
yarn accrue-sdk link

# For pnpm
pnpm exec accrue-sdk link

Usage Example​

import React, { useState } from "react";
import { SafeAreaView } from "react-native";
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={{ flex: 1, backgroundColor: "white" }}>
      <AccrueWalletWidget
        // For production releases set sandbox to `false` or remove the prop
        sandbox={true}
        // Merchant ID from Accrue (different values for production and sandbox)
        merchantId={params.merchantId}
        // User data to associate with Accrue profile
        userData={{
          referenceId: "123e4567-e89b-12d3-a456-426614174000",
          email: "user@email.com",
          phoneNumber: "+12125559999",
        }}
        // Handle user sign-in events
        onSignIn={(user) => {
          setSignedInUserPayload(user);
        }}
        // Deep linking token (optional)
        redirectionToken={params.to}
        // Optional container styling
        style={{ flex: 1 }}
      />
    </SafeAreaView>
  );
}

Props​

iOS SDK​

The Accrue iOS SDK is available as a Swift Package Manager package.

Installation​

1. In Xcode, select File > Swift Packages > Add Package Dependency
2. Enter the repository URL: https://github.com/accrue-savings/ios-sdk
3. Follow the prompts to complete the installation

Usage Example​

import SwiftUI
import AccrueIosSDK
import WebKit

struct ContentView: View {
    @StateObject private var contextData = AccrueContextData(
      userData: AccrueUserData(
        // A unique reference id for the user
        referenceId: "yourReferenceId",
        // User email
        email: "email@example.com",
        // User US phone number
        phoneNumber: "+12125559999",
        // Additional user data
        additionalData: ["firstName": "John", "lastName": "Doe"]
      ),
      // Settings data
      settingsData: AccrueSettingsData(
        // Whether to inherit authentication from parent app
        shouldInheritAuthentication: true
      )
    )
    
    private var AccrueWalletView: AccrueWallet {
      AccrueWallet(
          // Merchant ID from Accrue
          merchantId: "yourMerchantId",
          // Deep linking token (optional)
          redirectionToken: "yourRedirectionToken",
          // Sandbox mode for testing
          isSandbox: true,
          // Context data with user and settings info
          contextData: contextData,
          // Action handler callback
          onAction: handleOnAction
      )
    }
    
    var body: some View {
        AccrueWalletView
        Button("Go to home screen") {
          // Send event to the wallet
          AccrueWalletView.handleEvent(event: "AccrueTabPressed")
        }
    }

    // Handle actions from the wallet
    func handleOnAction(action: String) {
        print("action with data: \(action)")
    }
}

Props​

Accure Wallet View is the primary UI for the wallet. It is instantiated with the following propertues

The contextData: AccrueContextData properties is composed of two types.

The userData: AccrueUserData struct is used to link identities between the application and the wallet.

The settingsData: AccrueSettingsData struct has a single property which determines if Accure perform additional authentication of the user.

Android SDK​

The Accrue Android SDK is available as a package on GitHub.

Installation​

Add the GitHub package repository to your build.gradle.kts file:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven {
            name = "GitHubPackages"
            url = uri("https://maven.pkg.github.com/accrue-savings/android-sdk")
            credentials {
                username = System.getenv("GITHUB_USERNAME")
                password = System.getenv("GITHUB_TOKEN")
            }
        }
    }
}

Set up GitHub credentials (you can use the provided token):

export GITHUB_USERNAME="accruesavings"
export GITHUB_TOKEN="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"

Add the dependency:

dependencies {
    implementation("com.accruesavings:androidsdk:v1.0.0")
}

Usage Example​

// Create user data object
val userData = AccrueUserData(
    referenceId = "<your_unique_user_id>",
    phoneNumber = "<users_phone_number>",
    email = "<users_email>",
    additionalData = mapOf(
        "firstName" to "John",
        "lastName" to "Doe"
    )
)

// Create settings data object
val settingsData = AccrueSettingsData(
    shouldInheritAuthentication = true
)

// Combine into context data
val contextData = AccrueContextData(userData, settingsData)

// Create wallet fragment
val fragment = AccrueWallet.newInstance(
    contextData = contextData,
    redirectionToken = redirectionToken,
    isSandbox = true,
    merchantId = merchantId,
    onAction = mapOf(
        AccrueAction.SignInButtonClicked to {
            // Handle sign in button click
        },
        AccrueAction.RegisterButtonClicked to {
            // Handle register button click
        }
    )
)

// Add fragment to layout
supportFragmentManager.beginTransaction()
    .replace(R.id.fragment_container, fragment)
    .commit()

Props​

Accure Wallet View is the primary UI for the wallet. It is instantiated with the following propertues

The contextData: AccrueContextData properties is composed of two types.

The userData: AccrueUserData struct is used to link identities between the application and the wallet.

The settingsData: AccrueSettingsData struct has a single property which determines if Accure perform additional authentication of the user.

Authentication​

All SDKs support authentication delegation, which allows the wallet to use your app's for authentication. When enabled (shouldInheritAuthentication = true):

• All identity must be handled in your app
• A referenceId must be provided.
• The wallet will use the provided phone number and email for user notifications
• Phone number and email cannot be changed on the Accrue platform

Call backs for events in the Wallet​

The SDKs provide callbacks for events in the SDK:

• React Native: onSignIn callback with user data
• iOS/Android: Action callbacks for sign-in and registration events

Sending Events to the Wallet from the application​

For iOS and Android, you can send events to the wallet:

// iOS
AccrueWalletView.handleEvent(event: "AccrueTabPressed")

// Android
accrueWallet.handleEvent("AccrueTabPressed")

Currently supported events:

• AccrueTabPressed: Notifies the wallet when the user navigates to the tab containing the wallet