Card View Native Android SDK

Installation and Usage Guide

Card91 CardView WebView Android Library

Card91 Card View WebView Android Library Integration with Native Android Apps

Description

Purpose of this document is to illustrate the method to add Card91 ‘cardwebview’ library to any android native application written in Kotlin invoked either from a fragment or an activity.

Card91 cardwebview library allows developers to add the webview component into their layout as per design.

Developers need to get the view onto their activity and through invoking the init() method with certain required parameters mentioned below and a library for viewing the card details can be utilised.

Installation (Gradle and Manifest Configuration)

Android Minimum Requirements :

Gradle Version - 7.3.3
minSdkVersion - 21
compileSdkVersion - 32
targetSdkVersion - 32

Android Permission on Manifest:

<uses-permission android:name="android.permission.INTERNET" />

Update gradle-wrapper.properties

distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-bin.zip

Gradle dependencies

dependencies {
implementation 'androidx.core:core-ktx:1.7.0'
implementation 'androidx.appcompat:appcompat:1.5.0'
implementation 'com.google.android.material:material:1.6.1'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

}

Also enable the binding on the same app gradle file under android tag if the binding has been used

buildFeatures {
       viewBinding true
   }
}

Usage

Below steps is defined to followed to integrate the Library

Add AAR (Android Library Files)

Add the .aar file provided by us at the libs folder on the project eg. cardwebview.aar
Keep the aar file at location {Client project location}/app/src/main/libs
Add below line on the app gradle

implementation files('../app/src/main/libs/cardwebview.aar')

or

implementation(name: 'cardwebview', ext: 'aar' )

📘

Note

Clean and Build the android app to get the dependencies added on to the application

ADD CARD VIEW COMPONENT ON LAYOUT

Library class will be ready to use after their adding on gradle.
Add Card91WebView onto the layout where the developer wants to use it .
Make sure not to keep any background colour of the webview since it is supposed to be transparent and keep a card background image component just behind the card webview as you wish depending on the card bank.
Eg:

    <com.card91.webview.Card91WebView
        android:id="@+id/cardwebview"
        android:layout_width="match_parent"
        android:layout_height="230dp"
        android:visibility="visible"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="10dp"
        tools:layout_editor_absoluteY="10dp" />

SETUP CARD VIEW COMPONENT

Get the instance of the added card91webview onto your activity or fragment.
As shown in the example below .
Set the Listener as given below

   override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mWebView = findViewById<Card91WebView>(R.id.cardwebview)
        mWebView.setListener(this, this)
        val cardId = "" // card id for which details needs to be shown eg:220909102312683ID1CARD8822222
        val customerId ="" // customer id eg: 220909102312642ID1CUSTID2347690
        val cardLastFourDigit = "5832" // Last four digit of the card selected eg: 2414
        val token = "=" // Authorization token eg: C91CHbBZSkkyIFUjJ/2022mjyPOVm34sI0jfkeGjYgYZipvk=
        val nameOnCard = "Puneet" // Name on the card eg: priyesh agarwal
        val env="PROD_SANDBOX" // "PROD" in case of production and "PROD_SANDBOX" on sandbox environment
        val templateId= "xoltt" // Template id by default its "xoltt" or "default"
        mWebView.init(this, cardLastFourDigit,cardId, customerId, nameOnCard, token, env, templateId )
}

INPUT PARAMETER DETAILS

NameTypeRequiredDescription
contextContexttrueActivity context or Fragment activity context is passed here
cardIdstringtruecardId which has been received form login token service (Card91 API)
customerIdstringtruecustomerId from the Card91 Login token API
cardLastFourDigitstringtruecardId which has been received form login token service (Card91 API)
tokenstringtrueAuth Token received from the Card91 APIs
nameOnCardstringtrueName of the customer to appear in the CardView
templateIdstringfalseLook and feel of the card based on templateId, By default its "xoltt"
envstringtrue"PROD" in case of production and "PROD_SANDBOX" on sandbox environment

SUBSCRIBE FOR LISTENING CALLBACK EVENTS

Implement Interface Card91WebView.Listener for listening to the call back event from the webview .

Interface has below and their usage .

   override fun onPageStarted(url: String?) {
        Log.w("Page Started", url.toString())
    }

    override fun onPageFinished(url: String?) {
        Log.w("Page onPageFinished", url.toString())
    }

    override fun onPageError(errorCode: Int, description: String?, failingUrl: String?) {
        Log.w("Page onPageError", description.toString())
    }

    override fun onCardViewEvent(type: String?) {
        Log.w("Page onCardViewEvent", type.toString())
    }

onPageStarted is called when the webpage is loaded.
onPageFinished is called when webpage loading is finished .
onPageError is called when there is any error while loading the page.
onCardViewEvent is called when card is initialised, detail is show, CVV is shown or copy card number event has happened.

DIFFERENT CALLBACLK EVENTS

The events are as follows:

Event NameDescription
C91_CARD_DETAILS_FETCH_SUCCESSCalled when the server-side APIs load successfully. At this time, the card details are available, but they will be masked if no call to action has been triggered.
C91_CARD_DETAILS_FETCH_FAILURECalled when the server-side APIs fail to load. An error message would be visible in the CardView.
C91_CARD_NUMBER_SHOWNCalled upon the successful operation of the showNumber trigger. At this time, the card number and the expiry date are un-masked and the CVV is masked.
C91_CARD_CVV_SHOWNCalled upon the successful operation of the showCVV trigger. At this time, the CVV is un-masked and the card number and the expiry date are masked.
C91_CARD_AUTHENTICATION_FAILURECall back event type when client is passing incorrect or expired auth token
C91_CARD_MISSING_PARAMETERCall back event type when client is not passing any required/blank parameter .
C91_CARD_SERVER_FAILURECall back event type when there is server service exception with error code 500 to 599