card-react-native 0.0.7

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2023 mahmoudAllam
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,307 @@
+# card-react-native
+
+Tap Card SDK Wrapper
+
+#Card-SDK
+
+We at [Tap Payments](https://www.tap.company/) strive to make your payments easier than ever. We as a PCI compliant company, provide you a from the self solution to process card payments in your iOS apps.
+
+# Get your Tap keys
+
+You can always use the example keys within our example app, but we do recommend you to head to our [onboarding](https://register.tap.company/sell) page. You will need to register your `bundle id` to get your `Tap Key` that you will need to activate our `Card SDK`.
+
+# Installation
+
+We got you covered, `TapCardSDK` can be installed with all possible technologies.
+
+## Node modules
+
+```sh
+npm install card-react-native
+```
+
+```sh
+yarn install card-react-native
+```
+
+Then run in your terminal
+
+```swift
+cd ios
+pod install
+pod update
+```
+
+## Documentation
+
+To make our sdk as dynamic as possible, we do accept many configurations as input. Let us start by declaring them and explaining the structure and the usage of each.
+
+```js
+/**
+
+Creates a configuration model to be passed to the SDK
+
+- Parameters:
+
+	- publicKey: The Tap public key
+
+	- scope: The scope of the card sdk. Default is generating a tap token
+
+	- purpose: The intended purpose of using the generated token afterwards.
+
+	- merchant: The Tap merchant details
+
+	- transaction: The transaction details
+
+	- order: The tap order id
+
+	- invoice: Link this token to an invoice
+
+	- customer: The Tap customer details
+
+	- acceptance: The acceptance details for the transaction
+
+	- fields: Defines the fields visibility
+
+	- addons: Defines some UI/UX addons enablement
+
+	- interface: Defines some UI related configurations
+
+*/
+```
+
+| Configuration | Description                                                                                                                        | Required | Type          | Sample                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| publicKey     | This is the `Tap Key` that you will get after registering you bundle id.                                                           | True     | `String`      | `let publicKey = "key"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| scope         | Defines the intention of using the `TapCardSDK`.                                                                                   | True     | `Scope` enum  | ` let scope:Scope = .Token //This means you will get a Tap token to use afterwards` OR ` let scope:Scope = .Authenticate //This means you will get an authenticated Tap token to use in our charge api right away`                                                                                                                                                                                                                                                                                                              |
+| merchant      | This is the `Merchant id` that you will get after registering you bundle id.                                                       | True     | `Merchant`    | ` let merchant: { id: ''}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| purpose       | Defines the intention of using the `Token` after generation.                                                                       | True     | `String`      | ` let purpose:String = "PAYMENT_TRANSACTION" //Using the token for a single charge.` OR ` let purpose:String = "RECURRING_TRANSACTION" //Using the token for multiple recurring charges.` OR ` let purpose:String = "INSTALLMENT_TRANSACTION" //Using the token for a charge that is a part of an installement plan.` OR ` let purpose:String = "ADD_CARD" //Using the token for a save a card for a customer.` OR ` let purpose:String = "CARDHOLDER_VERIFICATION" //Using the token for to verify the ownership of the card.` |
+| transaction   | Needed to define the amount and the currency, if you are generating an authenticated token.                                        | False    | `Transaction` | ` let transaction = { metadata: {}, reference: A reference to this transaciton in your system,`                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| customer      | The customer details you want to attach to this tokenization process.                                                              | True     | `Customer`    | ` let customer = {nameOnCard: 'Tap Payments',editable: true,id: '',name: [  {    first: 'Tap',    lang: Locale.en,    middle: '',    last: 'Payments',  },],contact: {  phone: {    number: '88888888',    countryCode: '+965',  },  email: 'tappayments@tap.company'},`                                                                                                                                                                                                                                                        |
+| post          | This is the `webhook` for your server, if you want us to update you server to server.                                              | False    | `Post`        | ` let post = {url:""}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| acceptance    | The acceptance details for the transaction. Including, which card brands and types you want to allow for the customer to tokenize. | False    | `Acceptance`  | ` let acceptance = {supportedBrands: [  SupportedBrands.AMEX,  SupportedBrands.MASTERCARD,  SupportedBrands.VISA,  SupportedBrands.MADA,],supportedCards: [SupportedCards.Debit, SupportedCards.Credit]},`                                                                                                                                                                                                                                                                                                                      |
+| order         | This is the `Tap order id` that you created before and want to attach this token to it if any.                                     | False    | `Order`       | ` let order = {id:"", amount: 1, currency: TapCurrencyCode.SAR, description: ''}`                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| invoice       | This is the `invoice id` that you want to link this token to if any.                                                               | False    | `Invoice`     | ` let invoice:Invoice = {id:""}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| fields        | Needed to define visibility of the optional fields in the card form.                                                               | False    | `Fields`      | ` let fields = {cardHolder: true}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| addons        | Needed to define the enabling of some extra features on top of the basic card form.                                                | False    | `Addons`      | ` let addons = { displayPaymentBrands: true, loader: true, saveCard: true }` `/**- displayPaymentBrands: Defines to show the supported card brands logos - loader: Defines to show a loader on top of the card when it is in a processing state - scanner: Defines whether to enable card scanning functionality or not*/`                                                                                                                                                                                                      |
+| interface     | Needed to defines look and feel related configurations.                                                                            | False    | `Interface`   | ` let interface = {locale: Locale.en,theme: Theme.dark,edges: Edges.curved,direction: Direction.ltr},`                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| perator       | Operator publicKey.                                                                                                                | False    | `Operator`    | ` let operator = {publicKey: "key"},`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+
+## Initialisation of the input
+
+### Initialise Config
+
+You can create a model from our defined structure to pass it afterwards to our `TapCardSDK` as a configuration.
+
+```Ts
+  const generateTransactionId = () => {
+    let result = '';
+    const characters =
+      'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    const charactersLength = characters.length;
+    let counter = 0;
+    while (counter < 23) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+      counter += 1;
+    }
+    return result;
+  };
+
+  const generateOrderId = () => {
+    let result = '';
+    const characters = '0123456789';
+    const charactersLength = characters.length;
+    let counter = 0;
+    while (counter < 17) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+      counter += 1;
+    }
+    return result;
+  };
+var config: Config = {
+    publicKey: 'pk_test_YhUjg9PNT8oDlKJ1aE2fMRz7',
+    merchant: {
+      id: '',
+    },
+    transaction: {
+      metadata: {},
+      reference: `tck_LV${generateTransactionId()}`,
+    },
+    order: {
+      id: `${generateOrderId()}`,
+      amount: 1,
+      currency: TapCurrencyCode.SAR,
+      description: '',
+    },
+    invoice: {
+      id: 'Map to authenticate.reference.invoice',
+    },
+    post: {
+      url: 'Map to authenticate.reference.post',
+    },
+    purpose: 'PAYMENT_TRANSACTION',
+    operator: {
+      publicKey: 'pk_test_YhUjg9PNT8oDlKJ1aE2fMRz7',
+    },
+    scope: Scope.Authenticate,
+    customer: {
+      nameOnCard: 'Tap Payments',
+      editable: true,
+      id: '',
+      name: [
+        {
+          first: 'Tap',
+          lang: Locale.en,
+          middle: '',
+          last: 'Payments',
+        },
+      ],
+      contact: {
+        phone: {
+          number: '88888888',
+          countryCode: '+965',
+        },
+        email: 'tappayments@tap.company',
+      },
+    },
+    acceptance: {
+      supportedBrands: [
+        SupportedBrands.AMEX,
+        SupportedBrands.MASTERCARD,
+        SupportedBrands.VISA,
+        SupportedBrands.MADA,
+      ],
+      supportedCards: [SupportedCards.Debit, SupportedCards.Credit],
+    },
+    fields: {
+      cardHolder: true,
+    },
+    addons: {
+      displayPaymentBrands: true,
+      loader: true,
+      saveCard: true,
+    },
+    interface: {
+      locale: Locale.en,
+      theme: Theme.dark,
+      edges: Edges.curved,
+      direction: Direction.ltr,
+    },
+  }
+```
+
+# Initializing the TapCardSDK form
+
+```ts
+import TapCardView, {
+  TapCurrencyCode,
+  type Config,
+  Locale,
+  SupportedBrands,
+  SupportedCards,
+  Theme,
+  Edges,
+  Direction,
+  Scope,
+  type ITapCardViewInputRef,
+} from 'card-react-native';
+
+const tapCardRef =
+  React.useRef<ITapCardViewInputRef>() as MutableRefObject<ITapCardViewInputRef>;
+
+<TapCardView
+  ref={tapCardRef}
+  style={{ width: '100%' }}
+  config={config}
+  onSuccess={(tokenValue) => {}}
+  onHeightChange={(height) => {}}
+  onReady={() => {}}
+  onFocus={() => {}}
+  onBinIdentification={(binIdentification: Object) => {}}
+  onInvalidInput={(invalidInput: boolean) => {}}
+  onError={(error: object) => {}}
+/>;
+```
+
+# TapCardView Callbacks
+
+callbacks that allows integrators to get notified from events fired from the `TapCardView`.
+
+```Ts
+@objc public protocol TapCardViewDelegate {
+    /// Will be fired whenever the card is rendered and loaded
+    onReady={() => {}}
+    /// Will be fired once the user focuses any of the card fields
+    onFocus={() => {}}
+    /// Will be fired once we detect the brand and related issuer data for the entered card data
+    /** - Parameter data: will include the data in JSON format. example :
+     *{
+        "bin": "424242",
+        "bank": "",
+        "card_brand": "VISA",
+        "card_type": "CREDIT",
+        "card_category": "",
+        "card_scheme": "VISA",
+        "country": "GB",
+        "address_required": false,
+        "api_version": "V2",
+        "issuer_id": "bnk_TS02A5720231337s3YN0809429",
+        "brand": "VISA"
+     }*     */
+     onBinIdentification={(binIdentification: Object) => {}}
+    /// Will be fired whenever the validity of the card data changes.
+    /// - Parameter invalid: Will be true if the card data is invalid and false otherwise.
+       onInvalidInput={(invalidInput: boolean) => {}}
+    /**
+        Will be fired whenever the card sdk finishes successfully the task assigned to it. Whether `TapToken` or `AuthenticatedToken`
+     - Parameter data: will include the data in JSON format. For `TapToken`:
+     {
+         "id": "tok_MrL97231045SOom8cF8G939",
+         "created": 1694169907939,
+         "object": "token",
+         "live_mode": false,
+         "type": "CARD",
+         "source": "CARD-ENCRYPTED",
+         "used": false,
+         "card": {
+             "id": "card_d9Vj7231045akVT80B8n944",
+             "object": "card",
+             "address": {},
+             "funding": "CREDIT",
+             "fingerprint": "gRkNTnMrJPtVYkFDVU485Gc%2FQtEo%2BsV44sfBLiSPM1w%3D",
+             "brand": "VISA",
+             "scheme": "VISA",
+             "category": "",
+             "exp_month": 4,
+             "exp_year": 24,
+             "last_four": "4242",
+             "first_six": "424242",
+             "name": "AHMED",
+             "issuer": {
+                "bank": "",
+                "country": "GB",
+                "id": "bnk_TS07A0720231345Qx1e0809820"
+            }
+         },
+         "url": ""
+     }
+     */
+    onSuccess={(tokenValue) => {}}
+    /// Will be fired whenever there is an error related to the card connectivity or apis
+    /// - Parameter data: includes a JSON format for the error description and error
+    onError={(error: object) => {}}
+    /// Will be fired whenever the card element changes its height for your convience
+    /// - Parameter height: The new needed height
+    onHeightChange={(height) => {}}
+
+}
+```
+
+# Tokenize the card
+
+Once you get notified that the `TapCardView` now has a valid input from the callback. You can start the tokenization process by calling the public interface:
+
+```swift
+///  Wil start the process of generating a `TapToken` with the current card data
+tapCardRef.current.generateToken();
+```

package/android/build.gradle

@@ -0,0 +1,118 @@
+buildscript {
+  // Buildscript is evaluated before everything else so we can't use getExtOrDefault
+  def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["CardSdkReactNative_kotlinVersion"]
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:7.2.1"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+  }
+}
+
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+
+def appProject = rootProject.allprojects.find { it.plugins.hasPlugin('com.android.application') }
+
+rootProject.allprojects {
+  repositories {
+    google()
+    mavenCentral()
+    jcenter()
+    maven { url 'https://jitpack.io' }
+  }
+}
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["CardSdkReactNative_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["CardSdkReactNative_" + name]).toInteger()
+}
+
+def supportsNamespace() {
+  def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+  def major = parsed[0].toInteger()
+  def minor = parsed[1].toInteger()
+
+  // Namespace support was added in 7.3.0
+  if (major == 7 && minor >= 3) {
+    return true
+  }
+
+  return major >= 8
+}
+
+android {
+  if (supportsNamespace()) {
+    namespace "com.cardsdkreactnative"
+
+    sourceSets {
+      main {
+        manifest.srcFile "src/main/AndroidManifestNew.xml"
+      }
+    }
+  }
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+  }
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+dependencies {
+  // For < 0.71, this will be from the local maven repo
+  // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
+  //noinspection GradleDynamicVersion
+  implementation "com.facebook.react:react-native:+"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+  implementation 'com.github.Tap-Payments:Card-Android:0.0.24'
+}
+
+if (isNewArchitectureEnabled()) {
+  react {
+    jsRootDir = file("../src/")
+    libraryName = "CardSdkReactNativeView"
+    codegenJavaPackageName = "com.cardsdkreactnative"
+  }
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+CardSdkReactNative_kotlinVersion=1.7.0
+CardSdkReactNative_minSdkVersion=21
+CardSdkReactNative_targetSdkVersion=31
+CardSdkReactNative_compileSdkVersion=31
+CardSdkReactNative_ndkversion=21.4.7075529

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.cardsdkreactnative">
+</manifest>

package/android/src/main/AndroidManifestNew.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/com/cardsdkreactnative/CardSdkReactNativePackage.kt

@@ -0,0 +1,17 @@
+package com.cardsdkreactnative
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+
+class CardSdkReactNativePackage : ReactPackage {
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+    return emptyList()
+  }
+
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    return listOf(CardSdkReactNativeViewManager())
+  }
+}

package/android/src/main/java/com/cardsdkreactnative/CardSdkReactNativeViewManager.kt

@@ -0,0 +1,164 @@
+package com.cardsdkreactnative
+
+import android.util.Log
+import android.view.LayoutInflater
+import android.view.View
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.uimanager.events.RCTEventEmitter
+import company.tap.tapcardformkit.open.TapCardStatusDelegate
+import company.tap.tapcardformkit.open.web_wrapper.TapCardConfiguration
+import company.tap.tapcardformkit.open.web_wrapper.TapCardKit
+
+
+class CardSdkReactNativeViewManager : SimpleViewManager<View>() {
+  val GENERATE_TOKEN = 3
+
+  lateinit var customView: TapCardKit
+  override fun getName() = "CardSdkReactNativeView"
+
+  override fun createViewInstance(reactContext: ThemedReactContext): View {
+    // init view
+    // add as subview
+     var testView = LayoutInflater.from(reactContext).inflate(R.layout.cardview, null)
+    customView = testView.findViewById(R.id.tapCardForm)
+    Log.e("configTest", "render")
+    return testView
+  }
+
+
+  override fun getCommandsMap(): MutableMap<String, Int>? {
+        return MapBuilder.of(
+      "generateToken",
+          GENERATE_TOKEN
+    );
+  }
+
+
+  override fun receiveCommand(root: View, commandId: Int, args: ReadableArray?) {
+    Log.e("configTest","receiveCommand")
+    if( commandId == GENERATE_TOKEN) {
+      customView.generateTapToken()
+    }
+  }
+
+
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any>? {
+    return MapBuilder.of(
+      "onHeightChange",MapBuilder.of("registrationName","onHeightChange"),
+      "onSuccess", MapBuilder.of("registrationName","onSuccess"),
+      "onReadyCallback", MapBuilder.of("registrationName","onReadyCallback"),
+      "onFocusCallback", MapBuilder.of("registrationName","onFocusCallback"),
+      "onBinIdentification", MapBuilder.of("registrationName","onBinIdentification"),
+      "onInvalidInput", MapBuilder.of("registrationName","onInvalidInput"),
+      "onError", MapBuilder.of("registrationName","onError"),
+    )
+  }
+  @ReactProp(name = "config")
+  fun setConfig(view: View, config: ReadableMap) {
+    print(config.toString())
+
+    TapCardConfiguration.configureWithTapCardDictionaryConfiguration(view.context, customView ,config.toHashMap(), object : TapCardStatusDelegate{
+
+      override fun onHeightChange(heightChange: String) {
+//        view.layoutParams.height = 95
+//        var webview = customView.webViewFrame.findViewById<WebView>(R.id.webview)
+//        webview.layoutParams.height = 95
+//
+//        Log.e("configTest webview",webview.height.toString())
+//
+//        val newHeight =95
+//        val params: ViewGroup.LayoutParams? = customView.webViewFrame.layoutParams
+//        params?.height = customView.webViewFrame.context.getDimensionsInDp(newHeight?.toInt() ?: 95)
+//        webview.layoutParams = params
+
+//        Log.e("configTest webview",webview.height.toString())
+
+        Log.e("configTest",heightChange.toString())
+        val event = Arguments.createMap().apply {
+          putInt("data", heightChange.toInt())
+        }
+        val reactContext = view.context as ReactContext
+        reactContext
+          .getJSModule(RCTEventEmitter::class.java)
+          .receiveEvent(view.id, "onHeightChange", event)
+      }
+
+      override fun onBindIdentification(data: String) {
+        val event = Arguments.createMap().apply {
+          putString("data", data)
+        }
+        val reactContext = view.context as ReactContext
+        reactContext
+          .getJSModule(RCTEventEmitter::class.java)
+          .receiveEvent(view.id, "onBinIdentification", event)
+        Log.e("configTest", data)
+      }
+
+      override fun onError(error: String) {
+        val event = Arguments.createMap().apply {
+          putString("data", error)
+        }
+        val reactContext = view.context as ReactContext
+        reactContext
+          .getJSModule(RCTEventEmitter::class.java)
+          .receiveEvent(view.id, "onError", event)
+        Log.e("configTest", error)
+      }
+
+      override fun onFocus() {
+        val event = Arguments.createMap().apply {
+          putString("data","")
+        }
+        val reactContext = view.context as ReactContext
+        reactContext
+          .getJSModule(RCTEventEmitter::class.java)
+          .receiveEvent(view.id, "onFocusCallback", event)
+        Log.e("configTest", "onFocus")
+      }
+
+      override fun onReady() {
+        val event = Arguments.createMap().apply {
+          putString("data","")
+        }
+        val reactContext = view.context as ReactContext
+        reactContext
+          .getJSModule(RCTEventEmitter::class.java)
+          .receiveEvent(view.id, "onReadyCallback", event)
+        Log.e("configTest", "onReady")
+      }
+
+      override fun onSuccess(data: String) {
+        val event = Arguments.createMap().apply {
+          putString("data",data)
+        }
+        val reactContext = view.context as ReactContext
+        reactContext
+          .getJSModule(RCTEventEmitter::class.java)
+          .receiveEvent(view.id, "onSuccess", event)
+        Log.e("configTest", data)
+      }
+
+      override fun onValidInput(isValid: String) {
+        Log.e("configTest", isValid)
+        val event = Arguments.createMap().apply {
+          putBoolean("data",!isValid.toBoolean())
+        }
+        val reactContext = view.context as ReactContext
+        reactContext
+          .getJSModule(RCTEventEmitter::class.java)
+          .receiveEvent(view.id, "onInvalidInput", event)
+//        customView.generateTapToken()
+      }
+
+    })
+//    customView.init()
+//    view.setBackgroundColor(Color.parseColor(color))
+  }
+}

package/android/src/main/res/layout/cardview.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:app="http://schemas.android.com/apk/res-auto"
+  android:layout_width="match_parent"
+  android:orientation="vertical"
+  android:layout_height="wrap_content">
+  <company.tap.tapcardformkit.open.web_wrapper.TapCardKit
+    android:id="@+id/tapCardForm"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toTopOf="parent" />
+</LinearLayout>
+