Card components - Flutter

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,

SecureCardNumberTextView(
textColor: Colors.white70,
textSize: 24,
font: "weavr_font", //pass the font name here
onTextViewCreated: (controller) async {
  final res = await controller.setSecureText("input tokenised card number here");
  print(res);
  },
),

You can display a car 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.

Initialize the Card CVV Mobile Component by,

SecureCardCVVTextView(
    textColor: Colors.white70,
    textSize: 24,
    font: "weavr_font", //pass the font name here
    onTextViewCreated: (controller) async {
    final res = await controller.setSecureText("Input the tokenised card cvv here");
    },
),

Show card PIN 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,

SecureCardPinTextView(
textColor: Colors.white70,
textSize: 24,
font: "weavr_font", //pass the font name here
onTextViewCreated:
    (controller) async {
  //todo: add card number here
  final res =
      await controller.setText(
          "Your secure value for show");

  },
),

4. Capture card PIN 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.

Create a widget

late SecureCardPinEditTextController _secureCardPinEditTextController;

var secureEditText = SecureCardPinEditText(
    textColor: Colors.red,
    placeholderColor: Colors.grey,
    hintColor: Colors.blue,
    textSize: 14,
    font: "weavr_font", //pass the font name here
    onTextViewCreated: (SecureEditTextController controller) {
        _secureCardPinEditTextController = controller;
},
);

Add a widget to the tree

....
Container(
    height: 48,
    padding: const EdgeInsets.symmetric(horizontal: 8),
    child: secureEditText,
),....

Create a token out of editText value

_secureCardPinEditTextController.createToken().then((String text) {
    tokenisedCardPin = text;
});