Transaction View React Native Library

Getting Started

Create npmrc File

Create .npmrc file in React Native project root folder with the following information:

Shell

@card91:registry=https://registry.npmjs.org
//registry.npmjs.org/:_authToken=ghp_Access_Token

This files direct npm client to look for all packages starting from @github-banc91 in the registry - https://registry.npmjs.org/

As it is a private repository, it would need a private token to access it (ghp_Access_Token)
Please reach out to Card91 team to get this token

Installation

Install the package using npm using the following command:

Shell

npm install --save-exact @card91/react-native-sdk

or using yarn:

Shell

yarn add --exact @card91/react-native-sdk

📘

Peer Dependencies

Our React Native SDK relies on the react-native-webview library, so please make sure that it is installed before using the SDK.

Installation (Gradle and Manifest Configuration)

Android Minimum Requirements :

Bash

Gradle Version - 7.3.3
minSdkVersion - 21
compileSdkVersion - 32
targetSdkVersion - 32

Android Permission on Manifest:

Bash

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
        tools:ignore="ScopedStorage" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<application
        <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.provider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/provider_paths" />
        </provider>
</application>        

Update gradle-wrapper.properties

Bash

distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-bin.zip

Usage

Use TransactionsView in the place where you need to show the Transactions List:

TypeScript

import { TransactionsView } from '@card91/react-native-sdk';

export function TransactionPage() {
	return (
		<View>
            <TransactionsView
              templateId="[YOUR_TEMPLATE_ID]"
              environment="[ENV]" 
              cardId="[CUSTOMER_CARD_ID]"
              token="[AUTH_TOKEN]"
            	/>
		</View>
	);
}

Transaction component very specific to last 5 transaction without download pdf and filter option, please use below component for the same.

TypeScript

import { RecentTransactionPage } from '@card91/react-native-sdk';

export function RecentTransactionPage() {
  return (
    <View>
      <RecentTransactionsView
              templateId="[YOUR_TEMPLATE_ID]"
              environment="[ENV]" 
              cardId="[CUSTOMER_CARD_ID]"
              token="[AUTH_TOKEN]"
      />
    </View>
  );
}

For Transactions list takes the following props:

Input props

Name	Type	Required	Description
templateId	string	true	ID of the card layout containing details like the card number, CVV, expiry date, etc.
token	string	true	Auth Token received from the Card91 APIs
cardId	string	true	Customer Card id which come when you login with MPIN/Auth token
environment	string	false	Use sandbox or live Keys for Production