From 84e15194c9c10e87fa3417730b88b6c22009abd9 Mon Sep 17 00:00:00 2001
From: Kishan_maurya <kishan.maurya@cashfree.com>
Date: Mon, 29 Apr 2024 12:22:28 +0530
Subject: [PATCH] Cashfree Card component

---
 example/__tests__/App-test.js                 |   2 +-
 example/__tests__/App-test.tsx                |   2 +-
 example/index.js                              |   2 +-
 example/ios/.ruby-version                     |   1 +
 .../project.pbxproj                           |  15 +-
 .../xcschemes/CashfreePgApiExample.xcscheme   |  11 +-
 .../xcshareddata/WorkspaceSettings.xcsettings |   5 +
 example/package.json                          |   2 +-
 example/{ => src}/App.js                      |  84 +++++-
 example/{ => src}/App.tsx                     | 119 +++++++-
 example/src/assests/amex.png                  | Bin 0 -> 911 bytes
 example/src/assests/diners.png                | Bin 0 -> 1221 bytes
 example/src/assests/discover.png              | Bin 0 -> 1138 bytes
 example/src/assests/jcb.png                   | Bin 0 -> 1758 bytes
 example/src/assests/maestro.png               | Bin 0 -> 1722 bytes
 example/src/assests/mastercard.png            | Bin 0 -> 1648 bytes
 example/src/assests/rupay.png                 | Bin 0 -> 1400 bytes
 example/src/assests/visa.png                  | Bin 0 -> 3183 bytes
 package.json                                  |   4 +-
 src/Card/CFCardComponent.js                   | 197 +++++++++++++
 src/Card/CFCardComponent.tsx                  | 263 ++++++++++++++++++
 src/Card/index.js                             |   1 +
 src/Card/index.ts                             |   1 +
 src/index.js                                  |   2 +
 src/index.ts                                  |   2 +
 25 files changed, 672 insertions(+), 41 deletions(-)
 create mode 100644 example/ios/.ruby-version
 create mode 100644 example/ios/CashfreePgApiExample.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings
 rename example/{ => src}/App.js (74%)
 rename example/{ => src}/App.tsx (77%)
 create mode 100644 example/src/assests/amex.png
 create mode 100644 example/src/assests/diners.png
 create mode 100644 example/src/assests/discover.png
 create mode 100644 example/src/assests/jcb.png
 create mode 100644 example/src/assests/maestro.png
 create mode 100644 example/src/assests/mastercard.png
 create mode 100644 example/src/assests/rupay.png
 create mode 100644 example/src/assests/visa.png
 create mode 100644 src/Card/CFCardComponent.js
 create mode 100644 src/Card/CFCardComponent.tsx
 create mode 100644 src/Card/index.js
 create mode 100644 src/Card/index.ts

diff --git a/example/__tests__/App-test.js b/example/__tests__/App-test.js
index c546825..8ad093c 100644
--- a/example/__tests__/App-test.js
+++ b/example/__tests__/App-test.js
@@ -3,7 +3,7 @@
  */
 import 'react-native';
 import React from 'react';
-import App from '../App';
+import App from '../src/App';
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
 it('renders correctly', () => {
diff --git a/example/__tests__/App-test.tsx b/example/__tests__/App-test.tsx
index 1784766..4edaa0a 100644
--- a/example/__tests__/App-test.tsx
+++ b/example/__tests__/App-test.tsx
@@ -4,7 +4,7 @@
 
 import 'react-native';
 import React from 'react';
-import App from '../App';
+import App from '../src/App';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
diff --git a/example/index.js b/example/index.js
index a850d03..69303b3 100644
--- a/example/index.js
+++ b/example/index.js
@@ -3,7 +3,7 @@
  */
 
 import {AppRegistry} from 'react-native';
-import App from './App';
+import App from './src/App';
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);
diff --git a/example/ios/.ruby-version b/example/ios/.ruby-version
new file mode 100644
index 0000000..e4604e3
--- /dev/null
+++ b/example/ios/.ruby-version
@@ -0,0 +1 @@
+3.2.1
diff --git a/example/ios/CashfreePgApiExample.xcodeproj/project.pbxproj b/example/ios/CashfreePgApiExample.xcodeproj/project.pbxproj
index 9bfe43d..ad514ef 100644
--- a/example/ios/CashfreePgApiExample.xcodeproj/project.pbxproj
+++ b/example/ios/CashfreePgApiExample.xcodeproj/project.pbxproj
@@ -200,7 +200,8 @@
 		83CBB9F71A601CBA00E9B192 /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 1210;
+				BuildIndependentTargetsInParallel = YES;
+				LastUpgradeCheck = 1530;
 				TargetAttributes = {
 					00E356ED1AD99517003FC87E = {
 						CreatedOnToolsVersion = 6.2;
@@ -432,6 +433,7 @@
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = C5B5349BB9FA979B25D7E6E5 /* Pods-CashfreePgApiExample-CashfreePgApiExampleTests.debug.xcconfig */;
 			buildSettings = {
+				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				GCC_PREPROCESSOR_DEFINITIONS = (
 					"DEBUG=1",
@@ -459,6 +461,7 @@
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = B985D2D875A593D3BD49C0E4 /* Pods-CashfreePgApiExample-CashfreePgApiExampleTests.release.xcconfig */;
 			buildSettings = {
+				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				COPY_PHASE_STRIP = NO;
 				INFOPLIST_FILE = CashfreePgApiExampleTests/Info.plist;
@@ -566,7 +569,7 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
+				ENABLE_USER_SCRIPT_SANDBOXING = YES;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -639,7 +642,7 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
+				ENABLE_USER_SCRIPT_SANDBOXING = YES;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
@@ -682,7 +685,7 @@
 				00E356F71AD99517003FC87E /* Release */,
 			);
 			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
+			defaultConfigurationName = Debug;
 		};
 		13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "CashfreePgApiExample" */ = {
 			isa = XCConfigurationList;
@@ -691,7 +694,7 @@
 				13B07F951A680F5B00A75B9A /* Release */,
 			);
 			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
+			defaultConfigurationName = Debug;
 		};
 		83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "CashfreePgApiExample" */ = {
 			isa = XCConfigurationList;
@@ -700,7 +703,7 @@
 				83CBBA211A601CBA00E9B192 /* Release */,
 			);
 			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
+			defaultConfigurationName = Debug;
 		};
 /* End XCConfigurationList section */
 	};
diff --git a/example/ios/CashfreePgApiExample.xcodeproj/xcshareddata/xcschemes/CashfreePgApiExample.xcscheme b/example/ios/CashfreePgApiExample.xcodeproj/xcshareddata/xcschemes/CashfreePgApiExample.xcscheme
index 1e7dda1..b5ea366 100644
--- a/example/ios/CashfreePgApiExample.xcodeproj/xcshareddata/xcschemes/CashfreePgApiExample.xcscheme
+++ b/example/ios/CashfreePgApiExample.xcodeproj/xcshareddata/xcschemes/CashfreePgApiExample.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1210"
+   LastUpgradeVersion = "1530"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"
@@ -50,8 +50,11 @@
       debugDocumentVersioning = "YES"
       debugServiceExtension = "internal"
       allowLocationSimulation = "YES">
-      <BuildableProductRunnable
-         runnableDebuggingMode = "0">
+      <PathRunnable
+         runnableDebuggingMode = "0"
+         FilePath = "/Users/kishankumarmaurya/Library/Developer/Xcode/DerivedData/CashfreePgApiExample-gyturcincckczbfubbymyblkewhg/Build/Products/Debug-iphonesimulator/CashfreePgApiExample.app">
+      </PathRunnable>
+      <MacroExpansion>
          <BuildableReference
             BuildableIdentifier = "primary"
             BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
@@ -59,7 +62,7 @@
             BlueprintName = "CashfreePgApiExample"
             ReferencedContainer = "container:CashfreePgApiExample.xcodeproj">
          </BuildableReference>
-      </BuildableProductRunnable>
+      </MacroExpansion>
    </LaunchAction>
    <ProfileAction
       buildConfiguration = "Release"
diff --git a/example/ios/CashfreePgApiExample.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings b/example/ios/CashfreePgApiExample.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings
new file mode 100644
index 0000000..0c67376
--- /dev/null
+++ b/example/ios/CashfreePgApiExample.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict/>
+</plist>
diff --git a/example/package.json b/example/package.json
index bd814e9..14177f3 100644
--- a/example/package.json
+++ b/example/package.json
@@ -13,7 +13,7 @@
     "@react-native-community/checkbox": "^0.5.16",
     "react": "18.2.0",
     "react-native": "0.72.4",
-    "react-native-cashfree-pg-sdk": "^2.1.12"
+    "react-native-cashfree-pg-sdk": "^2.1.12-dev.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/example/App.js b/example/src/App.js
similarity index 74%
rename from example/App.js
rename to example/src/App.js
index e9ec7ff..15b07a7 100644
--- a/example/App.js
+++ b/example/src/App.js
@@ -2,13 +2,14 @@
 import * as React from 'react';
 import { Component } from 'react';
 import CheckBox from '@react-native-community/checkbox';
-import { Button, Platform, ScrollView, StyleSheet, Text, TextInput, ToastAndroid, View } from 'react-native';
-import { CFPaymentGatewayService } from 'react-native-cashfree-pg-sdk';
-import { Card, CFCardPayment, CFDropCheckoutPayment, CFEnvironment, CFPaymentComponentBuilder, CFPaymentModes, CFSession, CFThemeBuilder, CFUPI, CFUPIIntentCheckoutPayment, CFUPIPayment, SavedCard, UPIMode, } from 'cashfree-pg-api-contract';
+import { Button, Image, Platform, ScrollView, StyleSheet, Text, TextInput, ToastAndroid, View } from 'react-native';
+import { CFPaymentGatewayService, CFCard } from 'react-native-cashfree-pg-sdk';
+import { Card, CFCardPayment, CFDropCheckoutPayment, CFEnvironment, CFPaymentComponentBuilder, CFPaymentModes, CFSession, CFThemeBuilder, CFUPI, CFUPIIntentCheckoutPayment, CFUPIPayment, SavedCard, UPIMode, ElementCard } from 'cashfree-pg-api-contract';
 const BASE_RESPONSE_TEXT = 'Payment Status will be shown here.';
 export default class App extends Component {
     constructor() {
         super();
+        this.creditCardRef = React.createRef();
         this.state = {
             responseText: BASE_RESPONSE_TEXT,
             cardNumber: '',
@@ -16,12 +17,13 @@ export default class App extends Component {
             cardExpiryMM: '',
             cardExpiryYY: '',
             cardCVV: '',
-            orderId: '',
-            sessionId: '',
+            orderId: 'order_342fuAjbdkqC3DVHX18iy24dP4ArK',
+            sessionId: 'session_Ulz4xwKmTx-4nNZTIk40n5beAXmWxMiqegtqYMcgrdsqqaxnU0mqTa15NjkAlz1M4oJcwOGyjqNQCKTEhQZAm9ekeM4VIllrICSn4t80XI3o',
             instrumentId: '',
             toggleCheckBox: false,
             cfEnv: '',
             upiId: '',
+            cardNetwork: require('./assests/visa.png'),
         };
     }
     updateStatus = (message) => {
@@ -61,6 +63,47 @@ export default class App extends Component {
     handleUpi = (id) => {
         this.setState({ upiId: id });
     };
+    handleCFCardInput = (data) => {
+        console.log('CFCardInput FROM SDK', data);
+        const cardNetwork = JSON.parse(data)['card_network'];
+        switch (cardNetwork) {
+            case 'visa': {
+                this.setState({ cardNetwork: require('./assests/visa.png') });
+                break;
+            }
+            case 'mastercard': {
+                this.setState({ cardNetwork: require('./assests/mastercard.png') });
+                break;
+            }
+            case 'amex': {
+                this.setState({ cardNetwork: require('./assests/amex.png') });
+                break;
+            }
+            case 'maestro': {
+                this.setState({ cardNetwork: require('./assests/maestro.png') });
+                break;
+            }
+            case 'rupay': {
+                this.setState({ cardNetwork: require('./assests/rupay.png') });
+                break;
+            }
+            case 'diners': {
+                this.setState({ cardNetwork: require('./assests/diners.png') });
+                break;
+            }
+            case 'discover': {
+                this.setState({ cardNetwork: require('./assests/discover.png') });
+                break;
+            }
+            case 'jcb': {
+                this.setState({ cardNetwork: require('./assests/jcb.png') });
+                break;
+            }
+            default: {
+                this.setState({ cardNetwork: require('./assests/visa.png') });
+            }
+        }
+    };
     componentWillUnmount() {
         console.log('UNMOUNTED');
         CFPaymentGatewayService.removeCallback();
@@ -204,7 +247,16 @@ export default class App extends Component {
     getSession() {
         return new CFSession(this.state.sessionId, this.state.orderId, this.state.cfEnv === 'PROD' ? CFEnvironment.PRODUCTION : CFEnvironment.SANDBOX);
     }
+    handleSubmit = () => {
+        console.log('TYPE', this.creditCardRef);
+        if (this.creditCardRef.current) {
+            let nonPciCard = new ElementCard(this.state.cardHolderName, this.state.cardExpiryMM, this.state.cardExpiryYY, this.state.cardCVV, this.state.toggleCheckBox);
+            console.log('KISHANTEST', JSON.stringify(nonPciCard));
+            this.creditCardRef.current.doPayment(nonPciCard);
+        }
+    };
     render() {
+        let cfCard = React.createElement(CFCard, { cfSession: this.getSession(), style: { flex: 1 }, cardListener: this.handleCFCardInput, placeholder: 'Enter Card Number', placeholderTextColor: '#0000ff', underlineColorAndroid: 'transparent', cursorColor: 'gray', returnKeyType: 'next', ref: this.creditCardRef, onSubmitEditing: (e) => console.log('onSubmitEditing', e.nativeEvent.text, '::', e.target.value), onEndEditing: (e) => console.log('onEndEditing', e.nativeEvent.text, '::', e.target.value), onBlur: (e) => console.log('onBlur', e.nativeEvent.text, '::', e.target.value), onFocus: (e) => console.log('onFocus', e.nativeEvent.text, '::', e.target.value), onSelectionchange: (e) => console.log('onSelectionchange', e.nativeEvent.text, '::', e.target.value), onKeyPress: (e) => console.log('onSelectionchange', e.nativeEvent.text, '::', e.target.value) });
         return (React.createElement(ScrollView, null,
             React.createElement(View, { style: styles.container },
                 React.createElement(View, { style: {
@@ -242,18 +294,22 @@ export default class App extends Component {
                         textAlign: 'center',
                         marginBottom: 10,
                     } },
+                    React.createElement(View, { style: styles.cardContainer },
+                        cfCard,
+                        React.createElement(Image, { color: '#000', style: {
+                                margin: 5,
+                            }, source: this.state.cardNetwork })),
                     React.createElement(View, { style: { flexDirection: 'column', alignSelf: 'stretch', textAlign: 'center' } },
-                        React.createElement(TextInput, { style: styles.input, placeholder: 'Card Number', keyboardType: 'numeric', maxLength: 16, onChangeText: this.handleCardNumber }),
-                        React.createElement(TextInput, { style: styles.input, placeholder: 'Holder Name', keyboardType: 'default', onChangeText: this.handleCardHolderName })),
+                        React.createElement(TextInput, { style: styles.input, placeholder: 'Holder Name', keyboardType: 'default', placeholderTextColor: '#0000ff', underlineColorAndroid: 'transparent', cursorColor: 'gray', onChangeText: this.handleCardHolderName })),
                     React.createElement(View, { style: { flexDirection: 'row', alignSelf: 'stretch' } },
-                        React.createElement(TextInput, { style: styles.input, placeholder: 'Expiry Month', keyboardType: 'numeric', maxLength: 2, onChangeText: this.handleCardExpiryMM }),
-                        React.createElement(TextInput, { style: styles.input, placeholder: 'Expiry Year', keyboardType: 'numeric', maxLength: 2, onChangeText: this.handleCardExpiryYY }),
+                        React.createElement(TextInput, { style: styles.input, placeholder: 'Expiry Month', keyboardType: 'numeric', maxLength: 2, placeholderTextColor: '#0000ff', underlineColorAndroid: 'transparent', cursorColor: 'gray', onChangeText: this.handleCardExpiryMM }),
+                        React.createElement(TextInput, { style: styles.input, placeholder: 'Expiry Year', keyboardType: 'numeric', maxLength: 2, placeholderTextColor: '#0000ff', underlineColorAndroid: 'transparent', cursorColor: 'gray', onChangeText: this.handleCardExpiryYY }),
                         React.createElement(TextInput, { style: styles.input, placeholder: 'CVV', keyboardType: 'numeric', maxLength: 3, secureTextEntry: true, onChangeText: this.handleCardCVV })),
                     React.createElement(View, { style: { flexDirection: 'row', alignSelf: 'stretch', alignItems: 'center', textAlign: 'center' } },
                         React.createElement(CheckBox, { value: this.state.toggleCheckBox, onValueChange: this.handleSaveCardToggle }),
                         React.createElement(Text, null, "Saved Card for future payment")),
                     React.createElement(View, { style: styles.button },
-                        React.createElement(Button, { onPress: () => this._startCardPayment(), title: 'Card Payment' }))),
+                        React.createElement(Button, { onPress: () => this.handleSubmit(), title: 'Card Payment' }))),
                 React.createElement(View, { style: {
                         borderWidth: 1,
                         alignSelf: 'stretch',
@@ -289,4 +345,12 @@ const styles = StyleSheet.create({
         borderWidth: 1,
         padding: 10,
     },
+    cardContainer: {
+        flexDirection: 'row',
+        borderWidth: 1,
+        borderColor: '#000',
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: 10,
+    },
 });
diff --git a/example/App.tsx b/example/src/App.tsx
similarity index 77%
rename from example/App.tsx
rename to example/src/App.tsx
index 16873ce..15d7884 100644
--- a/example/App.tsx
+++ b/example/src/App.tsx
@@ -1,11 +1,11 @@
 // @ts-nocheck
 
 import * as React from 'react';
-import { Component } from 'react';
+import { Component, useRef } from 'react';
 import CheckBox from '@react-native-community/checkbox';
 
-import { Button, Platform, ScrollView, StyleSheet, Text, TextInput, ToastAndroid, View } from 'react-native';
-import { CFErrorResponse, CFPaymentGatewayService } from 'react-native-cashfree-pg-sdk';
+import { Button, Image, Platform, ScrollView, StyleSheet, Text, TextInput, ToastAndroid, View } from 'react-native';
+import { CFErrorResponse, CFPaymentGatewayService, CFCard } from 'react-native-cashfree-pg-sdk';
 import {
   Card,
   CFCardPayment,
@@ -16,9 +16,11 @@ import {
   CFSession,
   CFThemeBuilder,
   CFUPI,
-  CFUPIIntentCheckoutPayment, CFUPIPayment,
+  CFUPIIntentCheckoutPayment,
+  CFUPIPayment,
   SavedCard,
   UPIMode,
+  ElementCard
 } from 'cashfree-pg-api-contract';
 
 const BASE_RESPONSE_TEXT = 'Payment Status will be shown here.';
@@ -26,7 +28,7 @@ const BASE_RESPONSE_TEXT = 'Payment Status will be shown here.';
 export default class App extends Component {
   constructor() {
     super();
-
+    this.creditCardRef = React.createRef();
     this.state = {
       responseText: BASE_RESPONSE_TEXT,
       cardNumber: '',
@@ -34,12 +36,13 @@ export default class App extends Component {
       cardExpiryMM: '',
       cardExpiryYY: '',
       cardCVV: '',
-      orderId: '',
-      sessionId: '',
+      orderId: 'order_342fuAjbdkqC3DVHX18iy24dP4ArK',
+      sessionId: 'session_Ulz4xwKmTx-4nNZTIk40n5beAXmWxMiqegtqYMcgrdsqqaxnU0mqTa15NjkAlz1M4oJcwOGyjqNQCKTEhQZAm9ekeM4VIllrICSn4t80XI3o',
       instrumentId: '',
       toggleCheckBox: false,
       cfEnv: '',
       upiId: '',
+      cardNetwork: require('./assests/visa.png'),
     };
   }
 
@@ -86,6 +89,48 @@ export default class App extends Component {
     this.setState({ upiId: id });
   };
 
+  handleCFCardInput = (data: string) => {
+    console.log('CFCardInput FROM SDK', data);
+    const cardNetwork = JSON.parse(data)['card_network'];
+    switch (cardNetwork) {
+      case 'visa': {
+        this.setState({ cardNetwork: require('./assests/visa.png') });
+        break;
+      }
+      case 'mastercard': {
+        this.setState({ cardNetwork: require('./assests/mastercard.png') });
+        break;
+      }
+      case 'amex': {
+        this.setState({ cardNetwork: require('./assests/amex.png') });
+        break;
+      }
+      case 'maestro': {
+        this.setState({ cardNetwork: require('./assests/maestro.png') });
+        break;
+      }
+      case 'rupay': {
+        this.setState({ cardNetwork: require('./assests/rupay.png') });
+        break;
+      }
+      case 'diners': {
+        this.setState({ cardNetwork: require('./assests/diners.png') });
+        break;
+      }
+      case 'discover': {
+        this.setState({ cardNetwork: require('./assests/discover.png') });
+        break;
+      }
+      case 'jcb': {
+        this.setState({ cardNetwork: require('./assests/jcb.png') });
+        break;
+      }
+      default: {
+        this.setState({ cardNetwork: require('./assests/visa.png') });
+      }
+    }
+  };
+
 
   componentWillUnmount() {
     console.log('UNMOUNTED');
@@ -254,7 +299,31 @@ export default class App extends Component {
     );
   }
 
+  private handleSubmit = () => {
+    console.log('TYPE', this.creditCardRef);
+    if (this.creditCardRef.current) {
+      let nonPciCard = new ElementCard(this.state.cardHolderName, this.state.cardExpiryMM, this.state.cardExpiryYY, this.state.cardCVV, this.state.toggleCheckBox);
+      console.log('KISHANTEST', JSON.stringify(nonPciCard));
+      this.creditCardRef.current.doPayment(nonPciCard);
+    }
+  };
+
   render() {
+    let cfCard = <CFCard
+      cfSession={this.getSession()}
+      style={{ flex: 1 }}
+      cardListener={this.handleCFCardInput}
+      placeholder='Enter Card Number'
+      placeholderTextColor='#0000ff'
+      underlineColorAndroid={'transparent'}
+      cursorColor={'gray'}
+      returnKeyType='next'
+      ref={this.creditCardRef}
+      onSubmitEditing={(e) => console.log('onSubmitEditing')}
+      onEndEditing={(e) => console.log('onEndEditing')}
+      onBlur={(e) => console.log('onBlur')}
+      onFocus={(e) => console.log('onFocus')}
+    />;
     return (
       <ScrollView>
         <View style={styles.container}>
@@ -329,18 +398,23 @@ export default class App extends Component {
             textAlign: 'center',
             marginBottom: 10,
           }}>
+            <View style={styles.cardContainer}>
+              {cfCard}
+              <Image
+                color='#000'
+                style={{
+                  margin: 5,
+                }}
+                source={this.state.cardNetwork} />
+            </View>
             <View style={{ flexDirection: 'column', alignSelf: 'stretch', textAlign: 'center' }}>
-              <TextInput
-                style={styles.input}
-                placeholder='Card Number'
-                keyboardType='numeric'
-                maxLength={16}
-                onChangeText={this.handleCardNumber}
-              />
               <TextInput
                 style={styles.input}
                 placeholder='Holder Name'
                 keyboardType='default'
+                placeholderTextColor='#0000ff'
+                underlineColorAndroid={'transparent'}
+                cursorColor={'gray'}
                 onChangeText={this.handleCardHolderName}
               />
             </View>
@@ -350,6 +424,9 @@ export default class App extends Component {
                 placeholder='Expiry Month'
                 keyboardType='numeric'
                 maxLength={2}
+                placeholderTextColor='#0000ff'
+                underlineColorAndroid={'transparent'}
+                cursorColor={'gray'}
                 onChangeText={this.handleCardExpiryMM}
               />
               <TextInput
@@ -357,6 +434,9 @@ export default class App extends Component {
                 placeholder='Expiry Year'
                 keyboardType='numeric'
                 maxLength={2}
+                placeholderTextColor='#0000ff'
+                underlineColorAndroid={'transparent'}
+                cursorColor={'gray'}
                 onChangeText={this.handleCardExpiryYY}
               />
               <TextInput
@@ -377,7 +457,7 @@ export default class App extends Component {
             </View>
             <View style={styles.button}>
               <Button
-                onPress={() => this._startCardPayment()}
+                onPress={() => this.handleSubmit()}
                 title='Card Payment'
               />
             </View>
@@ -440,4 +520,13 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     padding: 10,
   },
+
+  cardContainer: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: '#000',
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 10,
+  },
 });
diff --git a/example/src/assests/amex.png b/example/src/assests/amex.png
new file mode 100644
index 0000000000000000000000000000000000000000..f98c6728fdd51551a0b86d5435d58d217c31cfbd
GIT binary patch
literal 911
zcmV;A191F_P)<h;3K|Lk000e1NJLTq001@s001Be0{{R3ZWMcI0002qP)t-s0dLR)
zZ_)Pp{`~#^0dUZt%I-vy-D#-hbFk-?!t18Z@B?wt2y@l}Z_tCd=;QDDdb8)->-qox
z|0IOhm&NR+&F?LU*`LYoioNO#cGHl+>koL-*y;Gh-t@QE@=%@MSfSw*d(;PW((d;B
z-|hO+=J&wc^mel5YpdkU;`X7+?ryE+AA#29@%zu@_l>{mL6qF`_x-Ze@tel&bFk(<
zliV_k+9`(EyV>)8w&+Tk-bI$(u+s5lr{iCx;u?O{s?YF}!s~~-=|`8{`~Cm)`Tgqi
z{Kwz*aIfV#kK2O3MQQ*501b3fPE-6&PUhs&w40TJXH6ebbf|0q00L7<L_t(I%k9+H
zZrd;zhT%5d<C8^-61A*7EXf+)+m7wb`@f-5aRNAL(Sx8UP@wO@4^lrK9SM4a*Yx&3
z`*UnY2&p|WY%3!_CCgo6w@Dju+a`plC&sweTrY;2cFQA8<6IM^xfqR8YMeUmR2wjD
zHIObfHw=$O_kmdh#lkwufgU{ox{hs8<TbWEC8(e$=zHFvZ^4NeVA8&OVs{R>-_RTr
z|4N&*Y_F<SjjSv%hwh<6=_OQaNg4V^^u)-~$UMY3MvyRSSr7zi4Urc?U-c=a6RUDT
z7}mk@iP>n|<fvwW9|_jJp4PbR&#uMw4(qE5Z3TlZ0gtSQc^o$eLv=t=w#@haUX4y{
zED7|^4(=979N$|e>?`ewjX0U=mFbu_rAe;MEHgz;We(<DGc&VJsM<`8r{e6G;m|gR
zC-y;F!k2#0>0vWX#av<caO*E5Y4f)~uJ_;1*uL}FVj6XRSNZPZjH!|$lJ4)ro3X;h
zajMgmqRhOqZWjyU%@jqQuf+N5IqM-!Qzr@B98!Yi-2{%Jq`knCQKad*@r&{J#?Z!N
z{o*;}oX2zzxHN%EhZrdhiFb_*CKj49;<q7IJSQ)hWm$}d7KVa}{89m6&E<Ac4|f3A
z!UBR%&lznyS~EXNu-&U6RVEAvDq}z&3Ik8fAwE85hG8sHsJ1bkLv;?DP+1D2%I#w8
z8AbqgXBaR(pR+C#C8JAw-DL?Q8=zF3?jYy4Ow@H48)cL;#-lH1%#|OT8FHHj6tcXW
l$S)gD{*@oz>)5OM_5%~}hkIK~r|JLz002ovPDHLkV1kyF*dzb|

literal 0
HcmV?d00001

diff --git a/example/src/assests/diners.png b/example/src/assests/diners.png
new file mode 100644
index 0000000000000000000000000000000000000000..2045f9afaa916a358cc4848f51a87aa4f6b8d35c
GIT binary patch
literal 1221
zcmV;$1UmbPP)<h;3K|Lk000e1NJLTq001fg001Be0{{R3Q-&H30005MP)t-s0000<
zuGj#Z+(W9?1A@l@e8d2M!~lTB1B}oBlg$Bp!T@^00DQv$c)$RC!~uW80E5K<g~|Yi
z%K(he1dP}Ld%^&DzyNl@0Dr{*e#QWR!~lQA0F2B4eZ>HEy#Rf~4ui%?t=Is3!vKE6
zI-b!kmdyZt!2o~70Dr~+g~S4d$N+@K0EEi`gv$Vg!vKB60C&CscfkOD#Q=H20Ds0g
zu-QDX*#LgT0D#0Zn$9bd%m9JOERxJ3i_8E2{{VTu0Cl_ocD+KH&gt~}eY)NNdcg;G
zz4G|{0DHpt`~Lg={sMl*27A8%biDok|N8y@)ampAe8d8IzW{Q(@Av!c_50%R_~7sN
zj>F<bozNPD!~lB0==1sI^7+Kz@WI~izTED!*Xyv=>y*dkm&oLMx!rKH+EJv`G?&ml
zm(41S#|VGK0C>OvcEH^2_Sx(8(C72D*zKp$=y|x^XRg>Ij?6NW%NU5sB#XuZeZ~}l
z!w`YP^!okC;_;u%=7PN6b++7Qt=Br4(J7G49gE8@kI5f~#0q@C0DHg(biB*s@u|}3
zqRr=r!Q)=6*-4_-U#itSo7736(=L?HERoEHNFDnC002I8QchC<!Un=(;dx9I4e#pP
z%&=ZFEF~Hd{P^d&v~pky`}gF|y{e;|mxqCCWJ5nYI3V@$-qg{}%f-Qtje%80L{p~p
zt^fc6cS%G+R5;6xl;>94KoEsD#@%3wO>YS)K!EgKB+H2++`tw04zAz^#x{h6PI`af
zXm{lz8P4JU(VW$%(Vd;y1+9|Li*I&xbX<YDc0)X;5rK0h7pn)&$A43)^6rLZV|{(m
z)UO(v>1zkI()-z;@q*Jx5Qbo6?S#^iB>Bl^njFyx$hj`lk1s@1%<4AFvZBYI%6K+r
zl}Ay6ua*5X3c)tXh_*?N_IurgP|OD(msmM1uamb2ye^_$?@K-kvnr{AE4}lW%Newy
zhoQi5hR;Z(#m;VwKC8tr5kK8TK|r65V82^BjvelSWZ%6c&T(M*{1!!T^p2gcFjxvz
zu?4?UI>w^YwGhggaFFlnsE(=@QU3kbw4$z*kzF*#NU{Yb?fMlqS}yKll$MOL|DQnb
znY4w6Qa%q1t!eDQK5$C`WONj{GV`;N<|Km(!zk&$eh0iTS)tQaivT6J;kxT1hb|8F
zfG1fuMAsZbG!te+r-#I%uf7J4FN?kc&rJnb>SYYb=ol<(?}D-pIFx3~>YG5_Wc0$#
ziVHUjwqO~yplIi}z#D+RqV*P_fsxiC1S*Wz*b}rEOw=2z?qyNU;GZQlo(ZZsF1{!l
zm+&b!E~*i9YNWOjB9^~pHZkh;?xDc_i%UvR^#UkGS0zs%xpMfMya7F(9y9m*M>2rb
zt2zu~R&cm>C`?LbMUBIyJj}O|&Uk~I83PT;B;^txT*_^k5$U%*=*DE-!>}zGHa1C@
zCxa@o(|6SifG?5wq3QScP{3d`GPziys-w_FG~U^*1#MEioEr33%Kwfk+4}W1sTOO%
j`O+@5UYeuxa^Bnjzf2$YCc8ys00000NkvXXu0mjf4C`<#

literal 0
HcmV?d00001

diff --git a/example/src/assests/discover.png b/example/src/assests/discover.png
new file mode 100644
index 0000000000000000000000000000000000000000..870c689fd59cd9f58becbfc9413458ef3dccd6c7
GIT binary patch
literal 1138
zcmV-&1daQNP)<h;3K|Lk000e1NJLTq001%o001Be0{{R3XaCz10005PP)t-s0000Y
zA|fLzGbAJ=CMG6qY-}SVBP1*{Z9^j@BqSv(E+Z%{BqSs@Ha0gmH#RggHZ(FJAt50l
zAtNU%qEi=PVPRoFCTwkQY*ayRLnCcLAYox)WI-h%E;S}EGbSb``T6<(|NsAQ0DgXc
z`uh9+{r!7;dw@wF|8W4`-ro8C|Nm(KY;0`#`~6T*P~T?=|7!rZx3_X~a%pL4|7`*M
z{QRDto}8SVLqkLP|Nr~^`|j`W`s&=JrKLwlNBQ~s^z`)c@$u>D>H6>I*4Ea-!otA7
z!28j#qN1Xbl9T+jespwnWMpJaOicfN8~pe3=H}+&;^N)h+tbt2{N>Wo(b2}n#{1X1
zva+(QtgNZ2sg{<OkB^Uwi;ISahIe;&aBy&KZf{ptSN)z=R#sL$Jw5+|BY;E~|9KVd
z?d{Ia&g0k2$jHdV#Kis0r=Xyq{J)WjiHU`Ug?f5=UteJTqFw!xLjRON|8)@mX8`v2
z_x1Jl_44lO>gw3o*!9b+wyvn(zoh%co$I!Y{kMYrv3dWpb^NY#esgU9s%iYDWnNxh
zfL=xZl|w&2KmCq4H8nLdGBWsyF@R1e+hz&zYy*n>;^F`R03dWyPE!D!nxkvznrrAE
z7Mf4(=)t*kYgqgG`snEB=-u2+JUsnKZqNV#0zXMaK~y-)?Uh$k+dvS2ok{{EklquW
zeMe$h5|-uOF*feqxc5#cbkck8<^Sg7FtI%*naexhj2<+)Z+CTjvnP>APM$q}h>VeQ
z!xE9v(-j#h7shUhIZn+0Vy3j?IL{ddP{hF4wNZ)W$i)9B@?%F2lzkLPpdbK%kpd85
z@C$_?q*<D#kcPq!{)#ks1?*9fMX2be9<Iq}0?ZPM`|InbY2Q}O9bKD6Q`(gkhSBki
zKYJf`6`-nmIN_0=59ZS@r@q8{7q)kmik;^b8HxupssO)~=d{)g=v8DOqStaf$2cij
z00Hz&A;o-q!pU_T4prGTn`5F?ZJ#m$P`${_JIjqca~J>Ii(OG^E^HJ67E@U-Xmekz
zC5N#;%VHzVB^^*_EpR4q@39ga>W>d}U+a!Jl^58(RRM?UQT(5TMlPziaQ@&#<b7~m
zh`m)R6wMUt)E9t>v6ggRVcwcWP=0Ao(Ih<<yf^8{V$owlbJ=3XPPu)nW}33|F^%12
z@yx_sRFb!apI#p7_61Q87?Ic>D7L^x8w@ON9?<;m8p5@pL~Ziwo<agkn_sq-lP8E3
zEcikSwUkt`(Z<B<kOFTap~4!%sm&dnK}x1Tnl-O}mWpSANP#px?XI=Oiii|eT>q}A
z7Aqo9AZ>u=<;{?~lb}zzGBhyyY%FbHr&GSIwi3r5;K%hF0|PdkSbnt~lH%xh_TlIG
z@!`%GXJmhP^Wl4|)w=yRE{@&AM(48VGBR@bA9OB@UkTvx(0|gtl>h($07*qoM6N<$
Ef<iGs2mk;8

literal 0
HcmV?d00001

diff --git a/example/src/assests/jcb.png b/example/src/assests/jcb.png
new file mode 100644
index 0000000000000000000000000000000000000000..e72dff92309d4a810f0ae7ccc6eb3c6081303259
GIT binary patch
literal 1758
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
Axc~qF

literal 0
HcmV?d00001

diff --git a/example/src/assests/maestro.png b/example/src/assests/maestro.png
new file mode 100644
index 0000000000000000000000000000000000000000..b30de58370ce003c6164e114d261b798fa870e29
GIT binary patch
literal 1722
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

literal 0
HcmV?d00001

diff --git a/example/src/assests/mastercard.png b/example/src/assests/mastercard.png
new file mode 100644
index 0000000000000000000000000000000000000000..fdb9ec08ecc2ddc70f757b72b587c296e52e0a76
GIT binary patch
literal 1648
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
Hyp#U}^RG1E

literal 0
HcmV?d00001

diff --git a/example/src/assests/rupay.png b/example/src/assests/rupay.png
new file mode 100644
index 0000000000000000000000000000000000000000..74bdcdcf0cbacdc17ee650d4fef6305130431052
GIT binary patch
literal 1400
zcmeAS@N?(olHy`uVBq!ia0vp^NkA;a!3-qV2G8ncU|@_4@Ck7Ra<z1t!Kg)BzeP)@
z#lQkcf<(0ST5N4wfg(V*sVPtdBnwht&}wAVX=2s^k<!*}1tJ~YRzJTv5Cz)0&DuIG
zKoK3|4t;&7GPq(eqg6{6Y>Qrtu5PoQUbmJm%zU7@Zi_b1cHL%OU8wCqEkF@1y%sI~
zR-odq`3js>u3XhFUkVhts$GGy+|@3;weCFi9@^RsoYk&h@)bF&T)3)$3<V(jYk?wn
zt;@GUrSAnwUkX&emniWxcuKT+{-3IqTV@JW1~kf`(hjKXD_AjD#0_Z6>{9)&1qxhM
zE?<jOeikbIEKudDa_4XN{$HUBc7w~DV%-n<io#V+DwXyVi}f`s?CVO6))r~+D$<mz
z{hkF3+>DYSzhH*<Z_mp;XMMC^i{pAf-<tX|c@d%GhyA^5neR?(PBxU}+Pr9Xdu4t`
zOsJ!b*wa(nvlAlS)OW2|+GVaH@b%En74v#rt<-tGzj|<HNl8+KzrBI1C>Ptmch8^Q
zKDBf8tm#wQybX0VB?SdVUW&e8U|>%3ba4#vIDT|$X0Vi_K->Mj7GZvl4y*?ogaRgd
zKc4C$e71Jg&iB>k&;I?FH?p<euzP7}*wPK3YG%${T7LiCOJ;-FGb>bEjF&DI+$AcP
zt$Is6E7UZ0`<jA^GZCF@|2H?S{Mk8YiQ&`jGmdA<Fj+M8_lZ5Q=@aCYcp+`kYAxT8
z`@=$f%8bK?&zi+@=Nx)^`bPQv%I7By_J*DM`suUSTPurWI=20$MR%8M@o3s``Qkqd
zzbCsse_U66*?Rru=tu$1TW%B2ORW`^cCgBpxaoW2)8S9WmoLd4(2=srU7l39;Ia{q
z^O_s84WcG;$yuCRn|pn46Jv48F0(IYOl!JQo6Z?-lw_VYPgp$TwtM->csb7~V}_ul
zwT#<kk5|6hC2p9|$|JR9wqV~&*0Nn@8cQ-4XuRhXnWj4T#Ooz<J2GTSy;x@ohRcb)
z=2rZ8_3NRI(+$EacW!0TENNh}eKAobch`ZIHBA-E;*D<1HJr4LL9=YX-)W`YlbHCn
zw;Z|XuirE0S+XYowkwYV;te*gV2zmPl3|>8x=+NN*}}j7v_`a&iDJ$D!VrmY#(nwn
z&l$?BjCMFNXRwGY6I0+kJ7wBSo3(pl9DGc#Mr#&+xm&95=(LgD%6#$4ke=6bnqE45
zp4>F|erH77@^2Zw-&=nkQE7PI_vE-j5AV(OEB&f{_a$r0mkRj!+`;^O#IdY-`!4eR
zHZc#m`F-W1*$n$OG>N-qR@hhedT%+FdPsFmzS1eru4&r;wD{kf7;pZ=6dkZ;wZNTV
zq56G0ufOA4?#|47I5i=1YJ%hAIah9WDrRPivuh=Ob+$6t6Sw(L{=$Nzv*jKizH}=v
z*fh*TcV*;8sX4td>Anrt>-c!Q*RegixnO}@u-c9<J176_6>^$2zo}>u&!OxOkE;5;
z3)`Z+uST&owKvDu-~4*^!Xoq6RSjCA%8r^GKj$XA_$knRDgX1nbIo%^>UO^Cjot6<
zD-c=MwRxrb+iekgD?&sbUVK`;UTjBwo6t=G{-T8+PL$@?H6^XzlQ8Sg>{zqP=oM?v
z&UR4C)w|`85g762p!?=oE3Tb(u+q|T;9c@AgtzE<?+n@bhF&{9tlm@qAm{GwGJV;E
z79ExJ)OE*yR#d;X%iF_~IAz7hNzBEsZOh_)la_p_@O1hpaO1eg!~L^!#M3(^O|^fl
b|HG=4R$`|wzJUpt%Naaf{an^LB{Ts5{`puJ

literal 0
HcmV?d00001

diff --git a/example/src/assests/visa.png b/example/src/assests/visa.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c09f2f6b21e9ce4d6d8789c0cf9f5e31494e8b3
GIT binary patch
literal 3183
zcmV-#43P7QP)<h;3K|Lk000e1NJLTq002t>000;W1^@s7#ZxdP00004XF*Lt006O%
z3;baP000aoNkl<ZSP6}o3vAa{703Jkmp*7|DSc5WE$=-jP&#mkFd=S^5Cw)y=8P;x
zGh-q~%`}r_Gh*C`vc+U(QMaivEQ>DDxuKJ>IR_iiL1cXZb7L?%3bdvFw)RC||A(LN
z{r~RW{k3J=P454mdtUe4bIv{Y{{9&&SFW61S65e-LDOjAWy_Y`C*1Po%gZ%JPn<Z>
zJ32c0RZYgm#%kz0mM&eo>*UFkzZ5Q+OcrR2=toV&Q>RYts;Q~D|Mcn8do(u$ep0E_
zuQIh%dwcs;=277`Y}hcRyu5ryQBhH%v$HcH(~LGx@@X`lWBxtH$1GmbwhaQ@qlp;U
z#Cl5z*#&Y8hKI3jM<fy{%gM>vGcq!AKe%0J{Rwo#53P+2J^^k!xJ6PX9=Bp?Y3a|w
zWoa)`BqECL6r)-+8vT75%E-vh&i(@y-N1a2_$=NjJ9zNmu#j@C$FLC8SuFhuF22_a
z6%-WU#MIsN-QXgO3B@b|V+AWEh*bi&cS}G)%*@P`z!*xho12@j2#>&LnfJoiq`4x{
z+uJ*%p`oEu^C*ONwvb|L-xWd)fp4RHdORNgKJb@UtXNT`NTB?4@NG+TWn{!+u?Mvi
zDHYCalPrp9f|bQsb&FsYIjfO{-bU#<!Sbth0erU#r`FZgRjbkYOcSk&CATtO)?6)-
zNSsE&Kd>r}B|BO0LE+)M1-`!njzQZjoUcrlR0&DgpJe5H!E!?|K7?>1eG0ytAzYv&
zOR$>Rs{nH9SyJHvz){WF-fUJEXwHU4gw@}re+Q+?t)B*TlY=G+H*MOKbLrBh%?K|Q
zF=(wYyWC=X)hPIeXpBnQr@;LXI1lBCva+&AlwRN}z<nLIoIsBo(DySY2_ZOpc{&h|
zn2|98UAdkT&g^pk{{17se<8xpE7~HUyi%iDpu`x35xppQLI;Jc$V+o%yeFd+V8ul^
zytJS6JQmQ64q#&xV`O-E_&(OKWQ{p&DxVMyXp*TP+ge&$lI(mCf$P9Ufa5S<9vB$-
zk>>IYf{y~Hpsiw@PnQvguFxtfDn{X1DIDWss?&y<GiO#-RaL!1CTsJikqbKkvf+uN
z?;&`!8J3Myp{7Ahev)afq<YH$>7UP#+IOMA@a5*_{sy#mor!1Ghy`WIIdkTm5!}?&
zbO~>o`iji!!pT788|QI_=A6kNfXfw(zF#n)D%qwvttvgB*8=`XnC22D<%w%}Wgnq2
zMh9WsAtHvw$hXH?@OI$qs5FP^9fV4YYy@Yb!hv`k+&1PeMVxXEV4XKu=T&!-JX!{&
z=>qN^W@k2m;Y}MQK8&uh{P3I-%ot}Vq`2Hcm%+mIve5I$o+l-?Sfjw7ATp{Ct|`3W
zb4`w>Qm;j7Yilb(jH#xIi((VW%F5~?C&ru<fa(W4CfTXUBU7hNz1rQ~T`W1xj~zSK
zXZckop)F()mC+9{jwm->vUEGD?o6R+O^jEaHa3_r68gpL@Gg+HAf+g!4|B@o0kurR
zq-3>p<=Hg)J#=~IFroaHVE9zaO}W+FHr9Tov9a+zJI8z9wB8dA!+(uo=7KTFEM}5*
zH%#VwgD29{)3d-TU`K_(#vpiN@OGeNwxu(62*#UR7<_}w&PB`5&o>oXusn(UEWx(n
zEmu4Jyh`EjV=TH}jD&PKgE?W0w+W{P{isHG=W0|Vd@&W~3l}cbLKjc6q@-kz>RFn@
zlp<#!^-*_?aY#Vdp!NPOAVlB=^dBMBSah*QErx+MxyOQ}*QIVe#TchPbz@K##+VZa
zE{dmblzh-sQqp%&8ewSgDO{$WAzKvihK)LM<cOYXrXgUwc=_^W=Me<Yi%8Ya0X9ib
z82+bQf)h0W&gBf@*h=2~n2?%+o7QTc1vdj{YtA9r$2u*7gJyC(<S7UV6q};Pn2FMC
zJod#vAT@2;w7&@kmmlB+$1F^;Kf@yL*tv8-{~9@Iif(}4VCi_hjZK+~E*y2RTH|=5
zw8$GGsBvOySVT!~>P~%q{g7b2qBN?pTXSO4Gjluq8Dkz}ZtgYV(XkQlW~ux@GahD?
zF$p%JyfyiTUR`A$K1DPM+F1)I1QupT`#e~+%}zr`3CTh|43APC9$+-5mb{C$wzhsr
zbT#Dbpx32m>0b=JL6Cp?429f?<L)Fv&WkV)v(Wo#(e%j!XQmh)<A~?-iJ<3ABi=nl
z)mKt)q}#eSFf=qIfnp<c?H|KG!6^7;&`HKxE6ZZXEzGDBW@-%hBrk#<Zu(+i=~_h*
zUIpy2n+M?^x#Z;~LqPwFY~G!84#P&$=F<|=2Awy2ErjX_bHzt}l!ScE(ovAhqEj_T
z`B3ma)0O0kW5BByeIq=(xw5($=Lh(V!oot`nO1)aZ#P;R*HdkTD`p<ZC0IHiC8ZD<
zB21GKa!ojTCyD(sH$aOci~}$_9|M$&i+mkybddRRJam|(pT*N=D}3fd)l<>L)8-JH
z==E^Mdl)+x{xx(($vzf*HaSW4up2vH;?`*a)_g*vs_2yKbyJRvsjZd?J3A=+d%ePM
zNs~XVbb4{%TDX=t&HzBUYV7aWboY3gQiAkZ2hX~3v=Izz;=H_sp-R6c7_|jHmqF4?
zAYLb1l)^eIy5Fl9*3%bh{t4Rvy7!{TJv@9ly*)XLdh(ep^l2XaEY4Q73OU;u>oJ;#
zE@$fnaIHQ*fOFWCy%8N*C6eebV$*W6Ys|IaIUdokGA79!8Cm5!O3WDFMdoRP)=|2q
zx6wn6LT(7&<2d9`y#Ah4hv#YVuh8EIJ_k<aJ9ILb%lQkb5ug7UN6D6(2x=(fB(Eq>
z+BoxLC_e~sJKa?v6h+xo4bFMfd!`CkMmBx{y5p5%Hg%CV&VitY*b7w0Ak^UNWRvDX
zUA=mBA)i+BP!+1WI3q!oewhuE*r!KB3UCs0)wD?)dzp#6-skQDmp;~&oPz8UhrKL-
zZzlLqvN(oGR#261Md<BuG&!S$R9;~5Y;GDCs~j~xwFlVT0b7Ig0zqdv29{XaVAOw8
z9q{#Qu5ST`F7(+4qtJ?YCIQ)s{7yE%o%(pa-hPJo5kG6!uGK$6cOq{d8kQA3^<?~C
znTJY>)&b{kH_JaE)ht0HcW#Q~*o}b_bi63j$8?G-@XVSuYjXSh`}J?k^}Z}*9hU>t
z4)+MDtgI}+$;;rY^m&2X;r}oCjM4g#XYGr#X3e@nly%L9HVMB1R*cNDzP`R&_?W+$
zk8s)A)z;Rg8_+cch(O+r4qXf`IgmY1fAQ$iqoc?x+p6I4=|!yH*wNA9^f{u_9tKoD
zVkmjbN3%$jK99F!3CCp#^qYJ-@Q9*Dk!<$y@Z~X|a0Jm6<J;Q3X#<%QUyo-vZcm}>
z5$dFBXb*itEeiDB&bRruC=cdF4|GJK-GRgB$mRg2VUQ#L0=kVO`1X>WBOYB@EL#;=
z*FyEhVZ%U#mtYZ#-3!`3?{PM95nKf{^N)tafa7e8glgWWxowKD-rQvA7I6N$`ec6v
z$LP_e;CyV;@k7sTY-s$`L+c+RQ|fi~WA`TJ3Z#938r|SJk?mvRJ6@UR_9sU1;n3d#
z>XP~}Ej77DOY!dL$1!jEbQYU}vUzmpC~$g<eNbFn{7;`(Fp<n7!pbV&Q8MT%cx9Cw
zr7x>$IYaL?=94yLu0YVI-UR1@>!K_q(6bgk{Y4dWloY}vCoiPyrnP;-dg8<3i{UYC
ziUmGu)PEotucN5N#}{WSifyS*ocf&jEz*wAWK5Nv+Y$c3yu3Vf1UW*wDC%%to#+&C
z%cfCTU>uDuZCH->>6+J9S69Ew2i1)b^wtX%f9O|{>!(j}a-e7iJTCacG5-{U`ON)9
z&XN$vYM96BVckZWk8ddL!-(hL)6EuY!GG4ey2m?OHKT)nzVt5AKWF7Qs$7nkq)m#1
zPfv(uWR6fHd&uB<%qKiLq4!Z2_j2QQK@WQwgc{kXi)=HzzF!tln`bvPY;C`m0Y-R|
zpD58UrjYu|^lh(54Nm5$Ku4ys21kTaoh*{v0CmAQ%dV&TM$s)892}g1?n2~B$iV50
zF&y5*X1dvU7aP~p!q1W@C!iFWkbTliAbPP+|4aD%BKb}K9+u*8ck_$L+M{yv{{flj
VNhZ)#_~!rs002ovPDHLkV1jNPBk%wK

literal 0
HcmV?d00001

diff --git a/package.json b/package.json
index 6f142ef..0943503 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-cashfree-pg-sdk",
-  "version": "2.1.12",
+  "version": "2.1.12-dev.3",
   "description": "Cashfree PG Plugin for React Native",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -152,6 +152,6 @@
     ]
   },
   "dependencies": {
-    "cashfree-pg-api-contract": "^2.0.6"
+    "cashfree-pg-api-contract": "^2.0.7"
   }
 }
diff --git a/src/Card/CFCardComponent.js b/src/Card/CFCardComponent.js
new file mode 100644
index 0000000..69cc935
--- /dev/null
+++ b/src/Card/CFCardComponent.js
@@ -0,0 +1,197 @@
+import { TextInput } from 'react-native';
+import React, { forwardRef } from 'react';
+import { CFCardPayment, CFEnvironment } from 'cashfree-pg-api-contract';
+import { CFPaymentGatewayService } from '../index';
+function luhnCheck(cardNumber) {
+    if (cardNumber.length === 0) {
+        return false;
+    }
+    cardNumber = cardNumber.replace(/\s/g, ''); // Remove spaces
+    let sum = 0;
+    let isAlternate = false;
+    for (let i = cardNumber.length - 1; i >= 0; i--) {
+        let digit = parseInt(cardNumber[i], 10);
+        if (isAlternate) {
+            digit *= 2;
+            if (digit > 9) {
+                digit -= 9;
+            }
+        }
+        sum += digit;
+        isAlternate = !isAlternate;
+    }
+    return sum % 10 === 0;
+}
+/**
+ * Fetching Tdr info with card bin data & cfSession object
+ * @param session :  for payment sessionId & env
+ * @param bin : for card number
+ */
+async function getTDR(session, bin) {
+    const route = `/pg/sdk/js/${session.payment_session_id}/v2/tdr`;
+    const body = JSON.stringify({ 'code': bin, 'code_type': 'bin' });
+    return await getInfo(session.environment, route, body);
+}
+/**
+ * Fetching CardBin info with card bin data & cfSession object
+ * @param session :  for payment sessionId & env
+ * @param bin : for card number
+ */
+async function getCardBin(session, bin) {
+    const route = `/pg/sdk/js/${session.payment_session_id}/cardBin`;
+    const body = JSON.stringify({ 'card_number': bin });
+    return await getInfo(session.environment, route, body);
+}
+async function getInfo(env, route, bodyData) {
+    let baseUrl = 'https://api.cashfree.com';
+    if (env === CFEnvironment.SANDBOX) {
+        baseUrl = 'https://sandbox.cashfree.com';
+    }
+    const url = baseUrl + route;
+    try {
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: bodyData,
+        });
+        if (!response.ok) {
+            return null;
+        }
+        return await response.json();
+    }
+    catch (error) {
+        return null;
+    }
+}
+const CardInput = forwardRef(({ cfSession, cardListener, style, ...props }, ref) => {
+    const [inputNumber, setInputNumber] = React.useState('');
+    React.useImperativeHandle(ref, () => ({ doPayment }));
+    let tdrJson = null;
+    let cardBinJson = null;
+    let firstEightDigits = '';
+    const handleChange = React.useCallback(async (cardNumber) => {
+        let completeResponse = {};
+        const textWithoutSpaces = cardNumber.replaceAll(' ', '');
+        if (textWithoutSpaces.length === 0)
+            setInputNumber('');
+        let formattedText = '';
+        /**
+         * Code to format card input number & set to input box
+         */
+        for (let i = 0; i < textWithoutSpaces.length; i += 4) {
+            let end = i + 4;
+            if (end > textWithoutSpaces.length) {
+                end = textWithoutSpaces.length;
+            }
+            formattedText += textWithoutSpaces.substring(i, end);
+            if (end !== textWithoutSpaces.length) {
+                formattedText += ' ';
+            }
+            setInputNumber(formattedText);
+        }
+        let tdrResponse = null;
+        let cardBinResponse = null;
+        /**
+         * Fetch Tdr & CardBin data & set to local variable
+         */
+        async function fetchDataAndSet() {
+            await getTDR(cfSession, textWithoutSpaces)
+                .then((response) => {
+                tdrResponse = response;
+            })
+                .catch(() => {
+                tdrResponse = null;
+            });
+            await getCardBin(cfSession, textWithoutSpaces)
+                .then((response) => {
+                cardBinResponse = response;
+            })
+                .catch(() => {
+                cardBinResponse = null;
+            });
+            if (tdrResponse) {
+                tdrJson = tdrResponse;
+                completeResponse['tdr_info'] = tdrJson;
+            }
+            if (cardBinResponse) {
+                cardBinJson = cardBinResponse;
+                completeResponse['card_bin_info'] = cardBinJson;
+            }
+        }
+        if (textWithoutSpaces.length === 8) {
+            firstEightDigits = textWithoutSpaces;
+            await fetchDataAndSet();
+        }
+        else if (textWithoutSpaces.length > 8) {
+            if (firstEightDigits === textWithoutSpaces.substring(0, 8)) {
+                completeResponse['tdr_info'] = tdrJson;
+                completeResponse['card_bin_info'] = cardBinJson;
+            }
+            else {
+                firstEightDigits = textWithoutSpaces.substring(0, 8);
+                tdrJson = null;
+                cardBinJson = null;
+                await fetchDataAndSet();
+            }
+        }
+        if (textWithoutSpaces.length < 8) {
+            cardBinJson = null;
+            tdrJson = null;
+            firstEightDigits = '';
+        }
+        if (cardBinJson !== null) {
+            completeResponse['card_network'] = cardBinJson['scheme'];
+        }
+        completeResponse['luhn_check_info'] = 'SUCCESS';
+        if (!luhnCheck(textWithoutSpaces)) {
+            completeResponse['luhn_check_info'] = 'FAIL';
+        }
+        completeResponse['card_length'] = textWithoutSpaces.length;
+        return cardListener(JSON.stringify(completeResponse));
+    }, [cardListener]);
+    const doPayment = (cardInfo) => {
+        try {
+            cardInfo.cardNumber = inputNumber.replaceAll(' ', '');
+            console.log('NonPciCard', JSON.stringify(cardInfo));
+            const cardPayment = new CFCardPayment(cfSession, cardInfo);
+            CFPaymentGatewayService.makePayment(cardPayment);
+        }
+        catch (e) {
+            console.log(e.message);
+        }
+    };
+    const handleSubmitEditingEvent = (event) => {
+        const newEvent = { ...event };
+        delete newEvent.nativeEvent.text;
+        if (onSubmitEditing) {
+            onSubmitEditing(newEvent);
+        }
+    };
+    const handleEndEditingEvent = (event) => {
+        const newEvent = { ...event };
+        delete newEvent.nativeEvent.text;
+        if (onEndEditing) {
+            onEndEditing(newEvent);
+        }
+    };
+    const handleFocusEvent = (event) => {
+        const newEvent = { ...event };
+        delete newEvent.nativeEvent.text;
+        if (onFocus) {
+            onFocus(newEvent);
+        }
+    };
+    const handleBlurEvent = (event) => {
+        const newEvent = { ...event };
+        delete newEvent.nativeEvent.text;
+        if (onBlur) {
+            onBlur(newEvent);
+        }
+    };
+    const InputComponent = TextInput;
+    const { onChangeText, onChange, onSubmitEditing, onEndEditing, onFocus, onBlur, ...otherProps } = props;
+    return (React.createElement(InputComponent, { keyboardType: 'numeric', inputMode: 'numeric', value: inputNumber, onChangeText: handleChange, onSubmitEditing: handleSubmitEditingEvent, onEndEditing: handleEndEditingEvent, onFocus: handleFocusEvent, onBlur: handleBlurEvent, style: style, ...otherProps }));
+});
+export default CardInput;
diff --git a/src/Card/CFCardComponent.tsx b/src/Card/CFCardComponent.tsx
new file mode 100644
index 0000000..b7e442d
--- /dev/null
+++ b/src/Card/CFCardComponent.tsx
@@ -0,0 +1,263 @@
+import { TextInput, TextInputProps } from 'react-native';
+import React, { forwardRef } from 'react';
+import { CFCardPayment, CFEnvironment, type CFSession, ElementCard } from 'cashfree-pg-api-contract';
+import { CFPaymentGatewayService } from '../index';
+
+function luhnCheck(cardNumber: string): boolean {
+  if (cardNumber.length === 0) {
+    return false;
+  }
+
+  cardNumber = cardNumber.replace(/\s/g, ''); // Remove spaces
+
+  let sum = 0;
+  let isAlternate = false;
+
+  for (let i = cardNumber.length - 1; i >= 0; i--) {
+    let digit = parseInt(cardNumber[i], 10);
+
+    if (isAlternate) {
+      digit *= 2;
+      if (digit > 9) {
+        digit -= 9;
+      }
+    }
+
+    sum += digit;
+    isAlternate = !isAlternate;
+  }
+
+  return sum % 10 === 0;
+}
+
+/**
+ * Fetching Tdr info with card bin data & cfSession object
+ * @param session :  for payment sessionId & env
+ * @param bin : for card number
+ */
+async function getTDR(session: CFSession, bin: string) {
+  const route: string = `/pg/sdk/js/${session.payment_session_id}/v2/tdr`;
+  const body: string = JSON.stringify({ 'code': bin, 'code_type': 'bin' });
+  return await getInfo(session.environment, route, body);
+}
+
+/**
+ * Fetching CardBin info with card bin data & cfSession object
+ * @param session :  for payment sessionId & env
+ * @param bin : for card number
+ */
+async function getCardBin(session: CFSession, bin: string) {
+  const route: string = `/pg/sdk/js/${session.payment_session_id}/cardBin`;
+  const body: string = JSON.stringify({ 'card_number': bin });
+  return await getInfo(session.environment, route, body);
+}
+
+async function getInfo(env: string, route: string, bodyData: string) {
+  let baseUrl = 'https://api.cashfree.com';
+  if (env === CFEnvironment.SANDBOX) {
+    baseUrl = 'https://sandbox.cashfree.com';
+  }
+  const url = baseUrl + route;
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: bodyData,
+    });
+
+    if (!response.ok) {
+      return null;
+    }
+    return await response.json();
+  } catch (error) {
+    return null;
+  }
+}
+
+export type CardPaymentHandle = {
+  doPayment: (cardInfo: ElementCard) => void;
+};
+
+export type CardInputProps = {
+  cfSession: CFSession;
+  cardListener: (response: string) => void;
+} & TextInputProps;
+
+const CardInput: any = forwardRef<CardPaymentHandle, CardInputProps>(({
+                                     cfSession,
+                                     cardListener,
+                                     style,
+                                     ...props
+                                   }: CardInputProps, ref) => {
+
+  const [inputNumber, setInputNumber] = React.useState('');
+  React.useImperativeHandle(ref, () => ({ doPayment }));
+  let tdrJson: any = null;
+  let cardBinJson: any = null;
+  let firstEightDigits: string = '';
+
+  const handleChange = React.useCallback(
+    async (cardNumber: string) => {
+      let completeResponse: any = {};
+      const textWithoutSpaces: string = cardNumber.replaceAll(' ', '');
+      if (textWithoutSpaces.length === 0) setInputNumber('');
+
+      let formattedText: string = '';
+      /**
+       * Code to format card input number & set to input box
+       */
+      for (let i: number = 0; i < textWithoutSpaces.length; i += 4) {
+        let end: number = i + 4;
+        if (end > textWithoutSpaces.length) {
+          end = textWithoutSpaces.length;
+        }
+        formattedText += textWithoutSpaces.substring(i, end);
+        if (end !== textWithoutSpaces.length) {
+          formattedText += ' ';
+        }
+        setInputNumber(formattedText);
+      }
+
+      let tdrResponse: any = null;
+      let cardBinResponse: any = null;
+
+      /**
+       * Fetch Tdr & CardBin data & set to local variable
+       */
+      async function fetchDataAndSet() {
+        await getTDR(cfSession, textWithoutSpaces)
+          .then((response: string) => {
+            tdrResponse = response;
+          })
+          .catch(() => {
+            tdrResponse = null;
+          });
+
+        await getCardBin(cfSession, textWithoutSpaces)
+          .then((response: string) => {
+            cardBinResponse = response;
+          })
+          .catch(() => {
+            cardBinResponse = null;
+          });
+
+        if (tdrResponse) {
+          tdrJson = tdrResponse;
+          completeResponse['tdr_info'] = tdrJson;
+        }
+
+        if (cardBinResponse) {
+          cardBinJson = cardBinResponse;
+          completeResponse['card_bin_info'] = cardBinJson;
+        }
+      }
+
+      if (textWithoutSpaces.length === 8) {
+        firstEightDigits = textWithoutSpaces;
+        await fetchDataAndSet();
+      } else if (textWithoutSpaces.length > 8) {
+        if (firstEightDigits === textWithoutSpaces.substring(0, 8)) {
+          completeResponse['tdr_info'] = tdrJson;
+          completeResponse['card_bin_info'] = cardBinJson;
+        } else {
+          firstEightDigits = textWithoutSpaces.substring(0, 8);
+          tdrJson = null;
+          cardBinJson = null;
+          await fetchDataAndSet();
+        }
+      }
+
+      if (textWithoutSpaces.length < 8) {
+        cardBinJson = null;
+        tdrJson = null;
+        firstEightDigits = '';
+      }
+
+      if (cardBinJson !== null) {
+        completeResponse['card_network'] = cardBinJson['scheme'];
+      }
+      completeResponse['luhn_check_info'] = 'SUCCESS';
+      if (!luhnCheck(textWithoutSpaces)) {
+        completeResponse['luhn_check_info'] = 'FAIL';
+      }
+      completeResponse['card_length'] = textWithoutSpaces.length;
+
+      return cardListener(JSON.stringify(completeResponse));
+    },
+    [cardListener],
+  );
+
+  const doPayment = (cardInfo: ElementCard) => {
+    try {
+      cardInfo.cardNumber = inputNumber.replaceAll(' ', '');
+      console.log('NonPciCard', JSON.stringify(cardInfo));
+      const cardPayment = new CFCardPayment(cfSession, cardInfo);
+      CFPaymentGatewayService.makePayment(cardPayment);
+    } catch (e: any) {
+      console.log(e.message);
+    }
+  };
+
+  const handleSubmitEditingEvent = (event: any) => {
+    const newEvent = { ...event };
+    delete newEvent.nativeEvent.text;
+    if (onSubmitEditing) {
+      onSubmitEditing(newEvent);
+    }
+  };
+
+  const handleEndEditingEvent = (event: any) => {
+    const newEvent = { ...event };
+    delete newEvent.nativeEvent.text;
+    if (onEndEditing) {
+      onEndEditing(newEvent);
+    }
+  };
+
+  const handleFocusEvent = (event: any) => {
+    const newEvent = { ...event };
+    delete newEvent.nativeEvent.text;
+    if (onFocus) {
+      onFocus(newEvent);
+    }
+  };
+
+  const handleBlurEvent = (event: any) => {
+    const newEvent = { ...event };
+    delete newEvent.nativeEvent.text;
+    if (onBlur) {
+      onBlur(newEvent);
+    }
+  };
+
+  const InputComponent: any = TextInput;
+  const {
+    onChangeText,
+    onChange,
+    onSubmitEditing,
+    onEndEditing,
+    onFocus,
+    onBlur,
+    ...otherProps
+  } = props;
+
+
+  return (
+    <InputComponent
+      keyboardType='numeric'
+      inputMode={'numeric'}
+      value={inputNumber}
+      onChangeText={handleChange}
+      onSubmitEditing={handleSubmitEditingEvent}
+      onEndEditing={handleEndEditingEvent}
+      onFocus={handleFocusEvent}
+      onBlur={handleBlurEvent}
+      style={style}
+      {...otherProps}
+    />
+  );
+});
+
+export default CardInput;
diff --git a/src/Card/index.js b/src/Card/index.js
new file mode 100644
index 0000000..db70eca
--- /dev/null
+++ b/src/Card/index.js
@@ -0,0 +1 @@
+export { default } from './CFCardComponent';
diff --git a/src/Card/index.ts b/src/Card/index.ts
new file mode 100644
index 0000000..db70eca
--- /dev/null
+++ b/src/Card/index.ts
@@ -0,0 +1 @@
+export { default } from './CFCardComponent';
diff --git a/src/index.js b/src/index.js
index 0766181..21f2b75 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import { NativeAppEventEmitter, NativeEventEmitter, NativeModules, Platform, } from 'react-native';
 import { version } from '../package.json';
 import { CFUPIPayment, CFCardPayment } from 'cashfree-pg-api-contract';
+import CFCardComponent from './Card/CFCardComponent';
 const LINKING_ERROR = `The package 'react-native-cashfree-pg-api' doesn't seem to be linked. Make sure: \n\n` +
     Platform.select({ ios: '- You have run \'pod install\'\n', default: '' }) +
     '- You rebuilt the app after installing the package\n' +
@@ -162,4 +163,5 @@ export class CFErrorResponse {
         return this.type;
     }
 }
+export const CFCard = CFCardComponent;
 export const CFPaymentGatewayService = new CFPaymentGateway();
diff --git a/src/index.ts b/src/index.ts
index 27d8998..fcbf545 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 import { version } from '../package.json';
 import { type CheckoutPayment, type CFSession, CFUPIPayment, CFCardPayment } from 'cashfree-pg-api-contract';
+import CFCardComponent from './Card/CFCardComponent';
 
 const LINKING_ERROR =
   `The package 'react-native-cashfree-pg-api' doesn't seem to be linked. Make sure: \n\n` +
@@ -214,4 +215,5 @@ export class CFErrorResponse {
   }
 }
 
+export const CFCard = CFCardComponent
 export const CFPaymentGatewayService = new CFPaymentGateway();