Card components - Android

Prerequisites

Before implementing card components, ensure you have:

• Initialised the Weavr SDK
• Valid API credentials
• Required permissions in your AndroidManifest.xml

Components

1. Card number component (TextView)

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.

Implementation

XML layout

<io.weavr.components.SecureCardNumberTextView
    android:id="@+id/view_card_number"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:textColor="#FFFFFF"
    app:isVertical="true"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView" />

Programmatic implementation

// Create instance
val secureCardNumberView = SecureCardNumberTextView(context)

// Configure vertical alignment
secureCardNumberView.isVertical = true

// Set secure text with token
secureCardNumberView.setSecureText(
    tokenizedCardNumber,
    onDeTokenizeListener = object : OnDeTokenizeListener {
        override fun onDeTokenizeComplete(deTokenisedResult: String) {
            // Handle successful de-tokenisation
        }

        override fun onDeTokenizeFailed(error: ErrorResponse) {
            // Handle de-tokenisation failure
        }
    }
)

Tokenisation

Once you have implemented SecureCardNumberTextView, it has inbuilt tokenising capabilities, which returns a token after successful completion as above.

Vertical card number display

When isVertical is set to true, the card number is be displayed in a vertical format:

2. CVV number component (TextView)

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.

Implementation

XML layout

<io.weavr.components.SecureCVVTextView
    android:id="@+id/view_card_cvv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:textColor="#FFFFFF"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView" />

Programmatic implementation

// Create instance
val secureCVVView = SecureCVVTextView(context)

// Set secure text with token
secureCVVView.setSecureText(
    tokenizedCVV,
    onDeTokenizeListener = object : OnDeTokenizeListener {
        override fun onDeTokenizeComplete(deTokenisedResult: String) {
            // Handle successful de-tokenisation
        }

        override fun onDeTokenizeFailed(error: ErrorResponse) {
            // Handle de-tokenisation failure
        }
    }
)

Tokenisation

Once you have implemented SecureCVVTextView, it has inbuilt tokenising capabilities, which returns a token after successful completion as above.

3. Card PIN view component (TextView)

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.

Implementation

XML layout

<io.weavr.components.SecureCardPinTextView
    android:id="@+id/View_CardPinNumber"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:textColor="#FFFFFF"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView" />

Programmatic implementation

// Create instance
val securePinView = SecureCardPinTextView(context)

// Set secure text with token
securePinView.setSecureText(
    tokenizedCardPin,
    onDeTokenizeListener = object : OnDeTokenizeListener {
        override fun onDeTokenizeComplete(deTokenisedResult: String) {
            // Handle successful de-tokenisation
        }

        override fun onDeTokenizeFailed(error: ErrorResponse) {
            // Handle de-tokenisation failure
        }
    }
)

Tokenisation

Once you have implemented SecureCardPinTextView, it has inbuilt tokenising capabilities, which returns a token after successful completion as above.

4. Card PIN set component (EditText)

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.

Implementation

XML layout

<io.weavr.components.SecureCardPinEditText
    android:id="@+id/CardPinNumber"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:ems="10"
    android:hint="Card Pin"
    android:minHeight="48dp"
    app:layout_constraintEnd_toEndOf="@+id/editText"
    app:layout_constraintStart_toStartOf="@+id/editText"
    app:layout_constraintTop_toBottomOf="@+id/editText" />

Programmatic implementation

// Create instance
val securePinEditText = SecureCardPinEditText(context)

// Set layout parameters
securePinEditText.layoutParams = LayoutParams(
    LayoutParams.MATCH_PARENT,
    LayoutParams.WRAP_CONTENT
)

// Add to view hierarchy
binding.root.addView(securePinEditText)

// Create token (only works with 4-digit PIN)
securePinEditText.createToken(
    onTokenizeListener = object : OnTokenizeListener {
        override fun onTokenizeComplete(tokenizedResult: Map<String, String?>?) {
            val tokenizedPin = tokenizedResult?.values?.firstOrNull()
            // Handle successful tokenisation
        }

        override fun onTokenizeFailed(error: ErrorResponse) {
            // Handle tokenisation failure
        }
    }
)

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

4. De-tokenisation Callbacks:

   • All de-tokenisation callbacks return "Success!" on completion
   • The actual de-tokenised value is displayed in the view
   • Error callbacks provide detailed error messages