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
Name | Type | Required | Description |
---|---|---|---|
context | Context | true | Activity context or Fragment activity context is passed here |
cardId | string | true | cardId which has been received form login token service (Card91 API) |
customerId | string | true | customerId from the Card91 Login token API |
cardLastFourDigit | string | true | cardId which has been received form login token service (Card91 API) |
token | string | true | card holder Auth Token received from the Card91 APIs |
nameOnCard | string | true | Name of the customer to appear in the CardView |
templateId | string | false | Look and feel of the card based on templateId, By default its "xoltt" |
env | string | true | "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 Name | Description |
---|---|
C91_CARD_DETAILS_FETCH_SUCCESS | Called 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_FAILURE | Called when the server-side APIs fail to load. An error message would be visible in the CardView . |
C91_CARD_NUMBER_SHOWN | Called 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_SHOWN | Called 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_FAILURE | Call back event type when client is passing incorrect or expired auth token |
C91_CARD_MISSING_PARAMETER | Call back event type when client is not passing any required/blank parameter . |
C91_CARD_SERVER_FAILURE | Call back event type when there is server service exception with error code 500 to 599 |