Skip to main content

React Native SDK

The React Native SDK will provide you with components and helper functions to integrate the user-facing payment experience into your app.

Prerequisite: Client ID​

Your dedicated account manager at Accrue will provide you with Client IDs for all your integrations. The Client ID will look similar to this example: 123e4567-e89b-12d3-a456-426614174000

Flavors​

The React Native SDK comes in two flavors:

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

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

Link the dependencies
npx accrue-sdk link

Inline Integration​

  • Integrating Accrue Pay inline means that the user never needs to leave your checkout screen.
  • They can sign in and confirm their payment intent right there on your Checkout screen.
  • Accrue will handle all the balance checks and push the confirmed Payment Intent back to your app.
Accrue Pay Inline Integration
import React, { useState } from "react";
import { ScrollView, Text, TouchableOpacity } from "react-native";

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

export default function CheckoutScreen() {
  const [amount, setAmount] = useState<number | null>(99.99);
  const [paymentIntent, setPaymentIntent] = useState<PaymentIntent>();
  const [signedInUserPayload, setSignedInUserPayload] =
    useState<UserSignInPayload>();

  async function onPay() {
    // Make a request to your backend
    // Include the `paymentIntent.id` in the request body
    // As part of your backend logic use the `paymentIntent` to make a request to the `Accrue Merchant API,` then authorize and capture the payment
    // Please refer to the `Merchant API Integration` section for more details
  }

  return (
    <ScrollView>
      {
        // This will render the Accrue-managed experience that will allow the user to select their payment method, and confirm their Payment Intent.
      }
      <AccruePayInlineComponent
        // For production releases set sandbox to `false` or remove the prop
        sandbox={true}
        // Client ID provided by your dedicated account manager at Accrue
        clientId={"{your-client-id}"}
        // Wallet ID is required if you are implementing `Pay by Wallet`
        walletId={"{wallet-id}"}
        // Your own user data to be attached to the user profile stored with Accrue
        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);
        }}
        // Amount you intent to charge the user for
        amount={amount}
        // Cart ID, User ID, or any freeform combination of IDs or random strings
        reference="string"
        // Callback with payment intent data you'll use to authorize and capture the payment later
        onPaymentIntentUpdated={(paymentIntent) => {
          setPaymentIntent(paymentIntent);
        }}
      />

      <TouchableOpacity onPress={onPay}>
        <Text>Confirm Order</Text>
      </TouchableOpacity>
    </ScrollView>
  );
}

Props​

The following props are available for the AccrueWalletWidget component:

clientId
RequiredYes
Typestring
DescriptionClient ID (received from Accrue)
DefaultN/A
Example724a57f2-1670-42de-b1f0-a94425fb60cf
walletId
RequiredNo
Typestring
DescriptionWallet ID (fetched via Merchant API)
DefaultN/A
Example123e4567-e89b-12d3-a456-426614174000
sandbox
RequiredNo
Typeboolean
DescriptionFlag that indicates if you are connecting to the Accrue Sandbox
DefaultN/A
Examplefalse
amount
RequiredYes
Typeinteger
DescriptionPositive integer representing how much to charge in the smallest currency unit (e.g., 100 cents to charge $1.00)
DefaultN/A
Example`10000` = $100
reference
RequiredNo
Typestring
DescriptionCart ID, User ID, or any freeform combination of IDs or random strings
DefaultN/A
Example123e4567-e89b-12d3-a456-426614174000
userData
RequiredNo
Type{referenceId?: string, stableReferenceId?: string, email?: string, phoneNumber?: string}
DescriptionYour 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.
Defaultundefined
Example{referenceId: "123e4567-e89b-12d3-a456-426614174000", stableReferenceId: "stable-abc-123", email: "user@email.com", phoneNumber: "+12125559999"}
onSignIn
RequiredNo
Type(userSignInPayload: UserSignInPayload) => void
DescriptionCallback with basic user profile data that can be stored and used for lookups
Defaultundefined
ExampleuserSignInPayload: { id: string; referenceId?: string | null; stableReferenceId?: string | null; effectiveReferenceId?: string | null; isNewUser: boolean; }
onPaymentIntentUpdated
RequiredYes
Type(paymentIntent: PaymentIntent) => void
DescriptionCallback with basic user profile data that can be stored and used for lookups
DefaultN/A
ExamplepaymentIntent: { id: string; status: PaymentIntentStatus; error?: string; amount: number; email?: string; expiresAt: Date; }