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:

• 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

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

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",
          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
Required	Yes
Type	string
Description	Client ID (received from Accrue)
Default	N/A
Example	724a57f2-1670-42de-b1f0-a94425fb60cf
walletId
Required	No
Type	string
Description	Wallet ID (fetched via Merchant API)
Default	N/A
Example	123e4567-e89b-12d3-a456-426614174000
sandbox
Required	No
Type	boolean
Description	Flag that indicates if you are connecting to the Accrue Sandbox
Default	N/A
Example	false
amount
Required	Yes
Type	integer
Description	Positive integer representing how much to charge in the smallest currency unit (e.g., 100 cents to charge $1.00)
Default	N/A
Example	`10000` = $100
reference
Required	No
Type	string
Description	Cart ID, User ID, or any freeform combination of IDs or random strings
Default	N/A
Example	123e4567-e89b-12d3-a456-426614174000
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	{userId: "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; }
onPaymentIntentUpdated
Required	Yes
Type	(paymentIntent: PaymentIntent) => void
Description	Callback with basic basic user profile data that can be stored and used for lookups
Default	N/A
Example	paymentIntent: { id: string; status: PaymentIntentStatus; error?: string; amount: number; email?: string; expiresAt: Date; }