Skip to main content

React Native SDK - Reference

Package

The React Native SDK contains everything necessary to kick off the linking and payment flow and debug issues resulting from failed linking/payment attempts.

Components

  • LinkPayContextProvider

    Publishes the context object for the management of account linking and payment outcomes. Add this context provider to your navigation stack so that linked account information can be passed back to the calling React component.

  • LinkPayView

    Responsible for the rendering and event handling for the container and underlying web view for linking and payment. Pass this component as a parameter to Stack.Screen in the same group as the checkout page to enable it to be accessible via a parent navigator.

  • LinkButton

    LinkButton

    Renders the button used in the combined Linking and Payment experience to open the LinkPayView and manage linking and payment outcomes.

Types

  • LinkPayEnvironment

    enum

    Target environment for the use of Link services

    • Possible Values

      • sandbox

        Link testing environment

      • production

        Link production environment

  • LinkPayContext

    LinkPayContext

    Contains all possible observable attributes for account linking and payment outcomes.

  • SessionResult

    SessionResult

    Surfaces upon completion of a LinkPayView session, containing the attributes that reflect the outcome of linking and payment.

  • LinkError

    LinkError

    Contains information about any errors that occurred during linking or payment.

  • LinkCustomerDetails

    LinkCustomerDetails

    Contains customer data returned by the Link Service customer retrieval method.

  • LinkCustomerAccount

    LinkCustomerAccount

    Contains account data returned by the Link Service account retrieval method.

Hooks

  • useLinkPayContext

    LinkPayContext

    Subscribes to and returns the context used for link session outcome observation.

Services

  • LinkService

    LinkService

    Retrieves customer and account info.

LinkButton

Renders the Secure Bank Payment button that, when clicked, opens the LinkPayView to initiate the linking and payment process.

Properties

  • sessionKey

    string

    Contains the identifier from the session API call to initiate a session.

  • environment

    LinkPayEnvironment

    Target environment for the use of Link services

  • navigation

    NavigationProp

    Facilitates navigation to screens in the stack that the LinkPayView is a part of. Used here to open the LinkPayView modal.

  • disabled

    boolean | null

    Disables and applies disablement styling for the Secure Bank Payment button when true.

  • style

    ViewStyle | null

    Applies styles if populated to the Secure Bank Payment button. Takes precedence over disabled button styling.

SessionResult

Stores the outcome of the linking/payment session for later use by the client application.

Properties

  • customerId

    string

    Unique identifier for the customer

  • paymentId

    string | null

    If payment was attempted as part of the session, this contains the unique identifier for the payment.

  • paymentStatus

    "AUTHORIZED" | "FAILED" | "PENDING" | null

    If payment was attempted as part of the session, this contains the outcome for the payment.

LinkError

Contains data for failures that cause the session to terminate before completion.

  • message

    string

    Error message

  • code

    number | null

    Error code

LinkPayContext

Type of object surfaced when using the LinkPayContextProvider/useLinkPayContext. All properties below each have an associated setter.

Properties

  • sessionKey

    string

    Contains the identifier from the session API call to initiate a session.

  • environment

    LinkPayEnvironment

    Target environment for the use of Link services

  • sessionResult

    SessionResult | null

    Initially null, it contains the outcome of the session including customer and payment attributes.

  • failure

    LinkError | null

    Initially null, it encapsulates any errors returned from the linking and payment process.

LinkService

This class provides methods to retrieve customer info and lists of authorized accounts.

Example

Create an instance of the LinkService class passing along the accessToken andenvironment arguments. You can use either a Promise-style callback or an await inside of an async method.

Example
1const [customerId, setCustomerId] = useState('');
2const [accounts, setAccounts] = useState<LinkCustomerAccount[]>([]);
3
4useEffect(() => {
5  if (customerId.length > 0 && accessToken) {
6    const service = new LinkService(accessToken, LinkPayEnvironment.sandbox);
7    service
8      .getAccounts(customerId)
9      .then((result: LinkCustomerAccount[]) => {
10        setAccounts(result);
11      })
12      .catch((error: any) => {
13        Alert.alert('Error', error.message);
14      });
15  }
16}, [customerId]);

Methods

LinkCustomerDetails

Container of customer data returned by the Link Service customer retrieval method.

Properties

  • id

    string

    Customer ID

  • firstName

    string

    Customer’s first name

  • lastName

    string

    Customer’s last name

  • email

    string

    Customer’s email

  • status

    enum

    ACTIVE or CREATED

  • creationDate

    Date

    Account creation date

LinkCustomerAccount

Container of account data returned by the Link Service account retrieval method.

Properties

  • accountId

    int

    Account ID

  • financialInstitutionId

    int

    Financial institution ID

  • financialInstitutionName

    string

    Financial Institution name

  • logoUrl

    URL | null

    URL for a financial institution’s logo, when available

  • lastFour

    string

    Last four digits of a bank account number

  • type

    enum

    CHECKING or SAVINGS

  • status

    enum

    ACTIVE or INACTIVE or ABANDON or CREATED

  • creationDate

    Date

    Account creation date