Issue Card React Native Library

This page will help you get started with ISSUE CARD SDK.

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

or using yarn:

Shell

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

📘

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 IssueCard in the place where you need to show the Issue Card:

TypeScript

import { IssueCard } from '@card91/react-native-issue-card';
export default function App() {
  const [step, setStep] = React.useState('step1');// need to declare the step here which will load intially, eg: 'step1','step2'
  const [trigger, setTrigger] = React.useState(0);// trigger is usestate trigger when state changes
  return (
    <View style={styles.container}>
      <View style={{ backgroundColor: 'blue', height: '80%' }}>
        <IssueCard
          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
          }}
          step={step} 
          cardProgramId={'card_program_id'} // Need to pass card program 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
          customFields={...steps} // Sample json described below which needs to be passed here
          onSubmit={trigger}
        />
      </View>
      <View style={{ display: 'flex', flexDirection: 'row' }}>
        <Button title="pervious" onPress={() => setStep('step1')} /> <!-- if user wants to move to previous step step1-->
        <Button title="Next" onPress={() => setStep('step2')} /> <!-- if user wants to move to next step step3-->
        <Button title="Submit" onPress={() => setTrigger(trigger + 1)} /> <!-- if user wants to submit the card issue form-->
      </View>
    </View>
  );
}

Sample steps JSON for "customFields" param

TypeScript

{
    "step1": [
        {
            "name": "fullName",
            "displayText": "Full Name",
            "elements": {
                "type": "text",
                "defaultValue": "",
             		 "disabled": true // For making the non editable field pass the value as true 
            }
        },
        {
            "name": "mobile",
            "displayText": "Mobile No.",
            "elements": {
                "type": "text",
                "defaultValue": "",
                "disabled": true
            }
        },
        {
            "name": "pan",
            "displayText": "PAN",
            "elements": {
                "type": "text",
                "defaultValue": "",
                "disabled": true
            }
        },
        {
            "name": "nameOnCard",
            "displayText": "Name on card",
            "elements": {
                "type": "text",
                "defaultValue": "",
                "disabled": true
            }
        }
    ]
}

For Issue 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 .
cardProgramId	string	true	Customer Card program id which come when you login with MPIN/Auth token
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
onSubmit	string	true	Methods used to trigger submit button through web view
customFields	object	true	Fields which represent which step have to show
step	string	true	Steps indicates which represent active step of issue card form
cardMode	string	true	value should be DIGITAL_ONLY_CARD / PHYSICAL_NAMED_CARD