Getting Started

Installation and usage


Install the package using npm using the following command:

npm install --save-exact @card91/react-native-card-view

or using yarn:

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.


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

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

export function App() {
    return (
            {/* Other components here  */}

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

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

export function CardPage() {
    return (

CardView takes the following props:

Input props

templateIdstringtrueID of the card layout containing details like the card number, CVV, expiry date, etc.
card{ id: string; lastFourDigits: string; }trueid: Card ID received from the Card91 APIs,

lastFourDigits: Last 4 digits to be shown in the UI when the other details are masked
cardImageImagetrueBackground image for the card
customer { id: string; nameOnCard: string; }trueid: Cardholder ID received from the Card91 APIs

nameOnCard: Name of the customer to appear in the CardView
tokenstringtrueAuth Token received from the Card91 APIs
cardContainerStyleStylefalseCustom styles for the card container
onEventEventHandlerfalseEvent callback to listen to all the events in the CardView
onAPIErrorEventHandlerfalseError callback which is called with an error message when there is an issue with the Card91 server APIs
onCopyError EventHandlerfalseError callback which is called with an error message if copying the card number failed