Card Balance View React Native SDK

Card Balance View React Native 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-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 WalletBalance in the place where you need to show the wallet Balance:

TypeScript

import * as React from 'react';

import { StyleSheet, , View } from 'react-native';
import { WalletBalance } from '@card91/react-native-sdk';
import CardBackground from './assets/balance_bg.gif';
export default function App() {
  const onWalletEvent = (event: any) => {
    console.log('onWalletEvent,event', event); /* Refer listenong Event */
  };
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <WalletBalance
          backgroundImage={CardBackground} /*optionals */
          environment={ENV}
          templateId={YOUR_TEMPLATE_ID} /* Template ID*/
          cardId={cardId}
          token={token}
          onEvent={onWalletEvent}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'black',
  },
  box: {
    height: 120,
  },
});

TypeScript

For WalletBalance component takes the following props:

Input props

Name	Type	Required	Description
environment	string	true	Use to indicate key for design template
templateId	string	true	Use "sandbox" for production sandbox environment and "live" for production environment .
token	string	true	Auth Token received from the Card91 APIs
cardId	string	true	id: card ID received from the Card91 APIs
backgroundImage	image type	false	Background image for the balace