card91_webview 0.0.4

A card91 webview to view the assign card.

Card91 card view plugin

This package is made to utilize to get the card detail associated with card91 This package directly communicate to card91 SDK to fetch the card details for the end users.

Features

Package directly communicate with the SDK (secured platform) with provided details basic details of the card and in return package display the card details

Getting started

Add the widget package on your pubspec version $ flutter pub add card91_webview

Use this package as a library

Depend on it Run this command: With Flutter: $ flutter pub add card91_webview

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get): dependencies:card91_webview: ^0.0.3 Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it Now in your Dart code, you can use: import 'package:card91_webview/card91_webview.dart';

Usage

Add the widget as on the specified container as child per developer choice Check out the below code snippet for the same Since the card will be multiple so try to add the CardViewItemWidget inside the PageView builder and inside itembuilder add the CardViewItemWidget Sample code below

import 'package:card91_webview/card91_webview.dart';

PageView.builder(
    itemBuilder:(context, index)
    {
        return Column
        (
        
        children:[
        Center(
        child: CardViewItemWidget(
        cardId: "", // provide card id here 
        customerId: "", // Customer id
        cardLastFourDigit: "", // last four digit of the card for which details need to be loaded
        token: "", // auth token needs to be provided here 
        nameOnCard: "", // provide name on card value here 
        cardUrl:"", //  send blank url
        serverUrl: "https://card-webview-sandbox.card91.io/view-card?templateId=XXXX&platform=XX", // SDK server url provide 
        webViewChannelName: "ReactNativeWebView", // JavascriptChannel channel name provided here
        cardImageUrl: "https:XXXXXXXX", // card  background image user needs to be added her 
        onDataResponse:(String response){
        setState(() => print("Repose from package$response"));
        }),
        )
        ]
        )
    }
)

Input parameter for CardViewItemWidget

|Name |Type |Required |Description |--- |--- |--- | |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 |Auth Token received from the Card91 APIs |nameOnCard |string |true |Name of the customer to appear in the CardView |cardUrl |string |false |NA |serverUrl |string |true |URL will be provided with templateId ("default" should be passed) |webViewChannelName |string |true |"ReactNativeWebView" is default which should be passed |cardImageUrl |string |true |Card Background URL |onDataResponse |Function |true |Add a call back function to receive the error & success event

Basic call back event type

Event Type

"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.