Print Card React Native

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.

Usage

Use PrintCard in the place where you need to show the Issue Card:

TypeScript

import * as React from 'react';

import { StyleSheet, View } from 'react-native';
import { PrintCard } from '@card91/react-native-sdk';

export default function App() {
  return (
    <View style={styles.container}>
      <PrintCard
  			environment="sandbox" /* sandbox or live */
        templateId="xoltt" /* Template ID*/
        onEvent={(onEvent) => {
          console.log('onEvent', onEvent);// Event will be trigger based on card status and events
        }}
        cardId={'card_id'} // Need to pass card  id here
        organizationId={'org_id'}// Need to pass organization id here
        uniqueId={'unique_id'} // secret key for api validation on webhook
        authUrl={'https://XXXXXXXXXXX/auth/token'}// Ref: Auth URL Documentation
        customerId={'customer_id'}
        organizationId={'org_id'}
        mobile={'customer_mobile_number'}
       
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

For print Card takes the following props:

Input props

Name	Type	Required	Description
templateId	string	true	Use to indicate key for design template
environment	string	false	Use "sandbox" for production sandbox environment and "live" for production environment .
cardId	string	true	Need to pass cardId
customerId	string	true	Need to pass customerId
organizationId	string	true	Need to pass business id
uniqueId	string	true	Need to pass secret key auth url validation
authUrl	string	true	Auth Url from client need pass in responses attached with token
mobile	string	true	Need to pass customer mobile number with prefix '91'