Reset ATM PIN React Native Library

Document will explain the process of integrating the reset ATM pin react library

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-reset-pin-flow

or using yarn:

Shell

yarn add --exact @card91/react-native-reset-pin-flow

📘

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.

Usage

Use ResetPinFlow in the place where you need to show the Reset Page:

TypeScript

import { ResetPinFlow } from '@card91/react-native-reset-pin-flow';

export function ResetPinPage() {
	return (
		<View>
            <ResetPinFlow
              templateId="[YOUR_TEMPLATE_ID]"
              environment="[ENV]" 
              cardId="[CUSTOMER_CARD_ID]"
              token="[AUTH_TOKEN]"
              phoneNumber="[MOBILE_NO]"
    					templateId="[TEMPLATE_ID]"
            />
		</View>
	);
}

For Reset Pin page 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	true	Use sandbox or live Keys for Production
phoneNumber	string	true	End user phone number have to pass here.