Card View React Native SDK

React Native SDK for card view

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-card-view

or using yarn:

Shell

yarn add --exact @card91/react-native-card-view

📘

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

Set up CardProvider somewhere high up in the React tree (for e.g., in App.jsx):

TypeScript

import { CardViewProvider } from '@card91/react-native-card-view';

export function App() {
	return (
		<CardViewProvider>
			{/* Other components here  */}
		</CardViewProvider>
	);	
}

Use CardView in the place where you need to show the card:

TypeScript

import { CardView } from '@card91/react-native-card-view';
import CardBackground from './images/card-background.png';

export function CardPage() {
	return (
		<View>
			<CardView
				templateId="[YOUR_TEMPLATE_ID]"
				card={cardData}
  			    environment="[ENV]"
				cardImage={CardBackground}
				customer={customerData}
				token={token}
			/>
		</View>
	);
}

CardView 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.
card	{ id: string; lastFourDigits: string; }	true	id: Card ID received from the Card91 APIs, lastFourDigits: Last 4 digits to be shown in the UI when the other details are masked
cardImage	Image	true	Background image for the card
customer	{ id: string; nameOnCard: string; }	true	id: Cardholder ID received from the Card91 APIs nameOnCard: Name of the customer to appear in the CardView
token	string	true	Auth Token received from the Card91 APIs
cardContainerStyle	Style	false	Custom styles for the card container
onEvent	EventHandler	false	Event callback to listen to all the events in the CardView
onAPIError	EventHandler	false	Error callback which is called with an error message when there is an issue with the Card91 server APIs
onCopyError	EventHandler	false	Error callback which is called with an error message if copying the card number failed
environment	string	true	Use sandbox or live Keys for Production