Card components - React Native

Prerequisites

Before implementing card components, ensure you have:

• Initialised the Weavr SDK
• Valid API credentials

Components

1. Card number component

tip

Card number component shows the full 16-digit card number to your customers.

Once you have installed and initialised Weavr Mobile SDK, you can integrate to the Card number component.

To add it programmatically:

import { SecureCardNumberLabel } from "@weavr-io/secure-components-react-native";
const labelRef = useRef<any>();
<SecureCardNumberLabel
  style={styles.labelBox}
  textColor="#ff0000"
  textSize="16"
  isVertical={true} //used to show the card number in vertical alignment
  toDetokenize={CARD_NUMBER} //provide the tokenized card number
  onDeTokenize={(resp: any) => {
    if (resp.value != null && resp.value != undefined)
      Toast.show("" + resp.value);
    else Toast.show("" + resp);
  }}
  ref={labelRef}
/>;
//deTokenize action, you can use deTokenize() to detokenize and render secure data on the Label
labelRef.deTokenize();

Vertical card number display

You can display a card number using a vertically alignment, by adding the following line of code:

isVertical = true;

The card number would show as:

5412;
1234;
5678;
9012;

2. CVV component

tip

CVV Component shows the 3-digit number that is needed to make online purchases using cards.

Once you have installed and initialised Weavr Mobile SDK, you can integrate to the CVV label component.

Initialise the Card CVV Mobile Component by:

import { SecureCardCVVLabel } from "@weavr-io/secure-components-react-native";
const labelRef = useRef<any>();
<SecureCardCVVLabel
  style={styles.labelBox}
  fontStyle={{ fontFamily: "Lobster-Regular" }} //optional, used to set font
  textColor="#ff0000"
  textSize="16"
  toDetokenize={CARD_CVV} //provide the tokenized card cvv
  onDeTokenize={(resp: any) => {
    if (resp.value != null && resp.value != undefined)
      Toast.show("" + resp.value);
    else Toast.show("" + resp);
  }}
  ref={labelRef}
/>;
//deTokenize action, you can use deTokenize() to detokenize and render secure data on the Label
labelRef.deTokenize();

3. Card PIN view component

tip

Card PIN component shows the 4-digit PIN number needed to make in-person purchases using cards

You only need to use this component if you are issuing physical cards.

Once you have installed and initialized Weavr Mobile SDK, you can integrate to the card PIN label component.

Creating a TextView Widget,

import { secureCardPinLabel } from "@weavr-io/secure-components-react-native";
const labelRef = useRef<any>();
<secureCardPinLabel
  style={styles.labelBox}
  fontStyle={{ fontFamily: "Lobster-Regular" }} //optional, used to set font
  textColor="#ff0000"
  textSize="16"
  toDetokenize={CARD_PIN} //provide the tokenize card number
  onDeTokenize={(resp: any) => {
    if (resp.value != null && resp.value != undefined)
      Toast.show("" + resp.value);
    else Toast.show("" + resp);
  }}
  ref={labelRef}
/>;
//deTokenize action, you can use deTokenize() to detokenize and render secure data on the Label
labelRef.deTokenize();

4. Card PIN set component

tip

Capture card PIN component collects your customer's defined physical card PIN

Due to requirements related to strong customer authentication, your authentication token is required to be stepped-up before calling this component.

Once you have installed and initialized Weavr Mobile SDK, you can integrate to the capture card PIN label component.

Set user token in SDK

import { setUserToken } from "@weavr-io/secure-components-react-native";
setUserToken(token).then((res: any) => {
  console.log(res);
});

Check if an association exists with the SDK

import { isAssociated } from "@weavr-io/secure-components-react-native";
isAssociated().then((res) => {
  if (res) {
    //do your stuff
  } else {
    console.log("You must login to continue!");
  }
});

Create a TextField component

import { secureCardPinTextField } from "@weavr-io/secure-components-react-native";
const textFieldRef = useRef<any>();
//tag is only required for group actions
const [tagPass1, setTagPass1] = React.useState<string | undefined>();
<secureCardPinTextField
  placeholder="Enter Card Pin"
  style={styles.fieldBox} //only define sizing
  textSize="16"
  background={true} //here default behaviour is system default
  onCreateToken={onPassToken}
  onGetTag={(resp: any) => {
    console.log(resp);
    setTagPass1(resp.value);
  }}
  onTextChanges={(resp) => {
    console.log(resp);
  }}
  onFocus={(resp) => {
    console.log(resp);
  }}
  onBlur={(resp) => {
    console.log(resp);
  }}
  ref={textFieldRef}
  placeholderTextColor="#000000"
/>;

Create a token from a TextField component

textFieldRef.current.createToken();
//it receives the tokenized password
const onPassToken = (resp: any) => {
  console.log(resp);
  setPassword(resp.value);
  Toast.show(resp.value);
};

Important notes

1. PIN Requirements:

   • PIN must be exactly 4 digits
   • Only numeric input is allowed
   • Input is masked for security

2. Card Number Display:

   • Vertical display shows 4 digits per line
   • Horizontal display shows all digits in one line
   • Format can be toggled using isVertical property

3. Security Features:

   • All sensitive data is automatically tokenised
   • No sensitive data is stored in memory
   • Components are PCI DSS compliant
   • Secure communication with backend services