react-native-payengine 2.0.17 → 2.0.18-alpha.1

package/README.md

@@ -1,14 +1,10 @@
-# react-native-payengine v2
-
-## React Native SDK Version 2
-
-### Overview
+# Overview
 
 The new version of the PayEngine React Native SDK is designed to provide developers with a more flexible and customizable payment experience. Its primary goal is to integrate with PayEngine native SDKs for both iOS and Android. By leveraging native SDKs (xcframework for iOS and AAR for Android), the SDK ensures a more seamless user experience without requiring codebase changes from multiple repositories.
 
-### Prerequisites
+# Prerequisites
 
-#### Add PayEngine Registry to your project
+## Add PayEngine Registry to your project
 
 ```
 allprojects {
@@ -29,32 +25,32 @@ allprojects {
 ```
 Please contact PayEngine support for username and password
 
-#### Install Package
+## Install Package
 
 ```bash
 yarn add react-native-payengine@2
 ```
 
-#### Android
+## Important Configuration When Developing on Android
 
 To use secure fields components, you need to install and configure the Material Components theme in your app.
 
 1. Add the following dependency to your `app/build.gradle` file with the specified version:
 
-```gradle
+```
 implementation 'com.google.android.material:material:<version>'
 ```
 
 2. Enable Jetifier in your app's `gradle.properties` if you encounter duplicate class issues like:
 
-```text
+```
 android.useAndroidX=true
 android.enableJetifier=true
 ```
 
 Example error:
 
-```text
+```
 FAILURE: Build failed with an exception.
 
 * What went wrong:
@@ -79,9 +75,8 @@ public class MainApplication extends RNPEFraudAnalyticsApplication implements Re
 }
 ```
 
-### Usage
 
-#### Wrap the Config in a Provider
+## Wrap the Config in a Provider
 
 ```jsx
 import { PEProvider } from 'react-native-payengine';
@@ -99,7 +94,17 @@ const App = () => {
 };
 ```
 
-#### Credit Card Form
+## Set the Fetch Access Token Callback
+
+This is a required callback that you need to set in the SDK for the other functionalities to work properly.
+
+Please check the documentation for `setFetchAccessTokenCallback` to understand the implementation details.
+
+# Examples
+
+The following examples demonstrate how to integrate and use the components provided by the PayEngine SDK within your application. Some features require additional configuration or platform-specific setup; these examples will also outline any prerequisites to ensure a smooth implementation.
+
+## Credit Card Form
 
 ```jsx
 import React from 'react';
@@ -144,7 +149,7 @@ const CreditCardForm = () => {
 };
 ```
 
-#### Bank Account Form
+## Bank Account Form
 
 ```jsx
 import React from 'react';
@@ -177,70 +182,77 @@ const BankAccountForm = () => {
 };
 ```
 
-#### Apple Pay
+## Google Pay
+
+Google Pay is available on **Android** devices that support Google’s payment platform. After enabling Google Pay on your account, you can use the `PEGooglePayButton` component to initiate the Google Pay in-app payment flow.
+
+Before implementing Google Pay through the PayEngine SDK, you must ensure that Google Pay is enabled for your PayEngine account. To do this, contact your PayEngine support representative to activate it.
+
+For step-by-step instructions and additional details, refer to the official PayEngine documentation:  
+👉 https://docs.payengine.co/developer-docs/processing-payments/google-pay-tm
+
+Once Google Pay is enabled for your account, you can proceed with the implementation example shown below.
+
+
+### Example Usage
 
 ```jsx
 import React from 'react';
 import { View, Text, ScrollView } from 'react-native';
 import {
-  PEApplePayButton,
+  PEGooglePayButton,
   PEPaymentRequest,
   PayEngineNative,
-  PayEngineUtils,
-  RNPEContactField,
   PayProvider
 } from 'react-native-payengine';
-import axios from 'axios';
 
-const ApplePayScreen = () => {
+const GooglePayScreen = () => {
+  const MERCHANT_ID = 'Your merchant\'s id in the PayEngine system'
   const [canMakePayment, setCanMakePayment] = React.useState(false);
   const [paymentResult, setPaymentResult] = React.useState(null);
 
+// Checking if the device supports Google Pay
   React.useEffect(() => {
     const checkSupport = async () => {
       try {
-        const isSupported = await PayEngineNative.userCanPay(PayProvider.applePay,
+        const isSupported = await PayEngineNative.userCanPay(PayProvider.googlePay,
           MERCHANT_ID
         );
         console.log('isSupported', isSupported);
         setCanMakePayment(isSupported);
       } catch (e) {
-        console.error('Apple Pay not supported', e);
+        console.error('Google Pay not supported', e);
       }
     };
     checkSupport();
   }, []);
 
-  const paymentRequest: PEPaymentRequest = {
+  const paymentRequest = {
+    paymentAmount: amount,
     merchantId: MERCHANT_ID,
-    paymentAmount: 10.15,
-    currencyCode: 'USD',
-    paymentItems: [
-      {
-        amount: 10.15,
-        label: 'Total Amount',
-      },
-    ],
     platformOptions: {
-      requiredBillingContactFields: [RNPEContactField.postalAddress],
-      requiredShippingContactFields: []
+      billingAddressRequired: true,
+      billingAddressParameters: {
+        format: 'FULL'
+      },
+      shippingAddressRequired: false
     }
-  }
+  };
 
   const purchaseWithToken = async (token) => {
-    // send the token to your server to make a purchase
-    // ...
+    // Send the token to your server.
+    // Your server then forwards the token PayEngine APIs to perform a transaction.
   };
 
   return (
     <View style={styles.container}>
-      <Text>Apple Pay Demo</Text>
+      <Text>Google Pay Demo</Text>
       {canMakePayment && (
         <>
-          <PEApplePayButton
+          <PEGooglePayButton
             paymentRequest={paymentRequest}
             onTokenDidReturn={(token) => {
-              console.log('Apple Pay token', token);
+              console.log('google Pay token', token);
               // Send token to server
               purchaseWithToken(token);
             }}
@@ -272,26 +284,44 @@ const ApplePayScreen = () => {
 ```
 
 
-#### Google Pay
+## Apple Pay
+
+Apple Pay is available only on **iOS** devices, in accordance with Apple’s platform requirements. After completing the required configuration and confirming support, you can use the `PEApplePayButton` component to launch the Apple Pay payment sheet.
+
+Before implementing Apple Pay through the PayEngine SDK, you must complete the necessary native iOS setup. This includes configuring merchant identifier, enabling Apple Pay capability in XCode, creating and uploading the required certificate.
+
+For step-by-step instructions, refer to the official PayEngine documentation:  
+👉 https://docs.payengine.co/developer-docs/processing-payments/apple-pay/apple-pay-in-your-native-app
+
+When the guide refers to **“Integrate with Xcode”**, it means opening the iOS project located in your React Native application’s `./ios` directory. Once opened in Xcode, follow the steps outlined in the documentation to enable Apple Pay support for your app.
+
+After completing the native setup, you can proceed with the implementation example shown below.
+
+### Example Usage
 
 ```jsx
 import React from 'react';
 import { View, Text, ScrollView } from 'react-native';
 import {
-  PEGooglePayButton,
+  PEApplePayButton,
   PEPaymentRequest,
   PayEngineNative,
+  PayEngineUtils,
+  RNPEContactField,
   PayProvider
 } from 'react-native-payengine';
+import axios from 'axios';
 
-const GooglePayScreen = () => {
+const ApplePayScreen = () => {
+  const MERCHANT_ID = 'Your merchant\'s id in the PayEngine system'
   const [canMakePayment, setCanMakePayment] = React.useState(false);
   const [paymentResult, setPaymentResult] = React.useState(null);
 
+  // Checking if the device supports Apple Pay
   React.useEffect(() => {
     const checkSupport = async () => {
       try {
-        const isSupported = await PayEngineNative.userCanPay(PayProvider.googlePay,
+        const isSupported = await PayEngineNative.userCanPay(PayProvider.applePay,
           MERCHANT_ID
         );
         console.log('isSupported', isSupported);
@@ -303,32 +333,36 @@ const GooglePayScreen = () => {
     checkSupport();
   }, []);
 
-  const paymentRequest = {
-    paymentAmount: amount,
+  const paymentRequest: PEPaymentRequest = {
     merchantId: MERCHANT_ID,
-    platformOptions: {
-      billingAddressRequired: true,
-      billingAddressParameters: {
-        format: 'FULL'
+    paymentAmount: 10.15,
+    currencyCode: 'USD',
+    paymentItems: [
+      {
+        amount: 10.15,
+        label: 'Total Amount',
       },
-      shippingAddressRequired: false
+    ],
+    platformOptions: {
+      requiredBillingContactFields: [RNPEContactField.postalAddress],
+      requiredShippingContactFields: []
     }
-  };
+  }
 
   const purchaseWithToken = async (token) => {
-    // send the token to your server to make a purchase
-    // ...
+    // Send the token to your server.
+    // Your server then forwards the token PayEngine APIs to perform a transaction.
   };
 
   return (
     <View style={styles.container}>
-      <Text>Google Pay Demo</Text>
+      <Text>Apple Pay Demo</Text>
       {canMakePayment && (
         <>
-          <PEGooglePayButton
+          <PEApplePayButton
             paymentRequest={paymentRequest}
             onTokenDidReturn={(token) => {
-              console.log('google Pay token', token);
+              console.log('Apple Pay token', token);
               // Send token to server
               purchaseWithToken(token);
             }}
@@ -359,7 +393,7 @@ const GooglePayScreen = () => {
 };
 ```
 
-#### Dynamic Pricing
+## Dynamic Pricing
 
 **Note**: Android doesn't support Dynamic pricing yet although it's supported on Web. Track the issue here https://issuetracker.google.com/issues/331369810?pli=1
 
@@ -394,11 +428,9 @@ const paymentRequest = {
 }
 ```
 
-Implement the callbacks:
-
-```javascript
+```jsx
 <PEApplePayButton
-  ...buttonOptions
+  paymentRequest={paymentRequest}
   ref={buttonRef}
   onPaymentMethodSelected={(event) => {
     console.log('onPaymentMethodSelected', event.nativeEvent)
@@ -472,5 +504,4 @@ Implement the callbacks:
 
 **Important**:
 
-If either of `onPaymentMethodSelected`, `onShippingContactSelected` or `onShippingMethodSelected` callbacks are registered, you must update the Apple Pay sheet in your callback using `buttonRef.current?.updatePaymentSheet(...)` function, otherwise the Apple Pay shset will hang and the payment flow will automatically cancel.
-
+If either of `onPaymentMethodSelected`, `onShippingContactSelected` or `onShippingMethodSelected` callbacks are registered, you must update the Apple Pay sheet in your callback using `buttonRef.current?.updatePaymentSheet(...)` function, otherwise the Apple Pay shset will hang and the payment flow will automatically cancel.

package/android/build.gradle

@@ -171,8 +171,8 @@ dependencies {
 //  implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.9'
 //  implementation "com.google.android.gms:play-services-wallet:19.2.1"
 
-  debugApi("com.payengine.sdk:payment-sdk-release:1.0.10")
-  releaseApi("com.payengine.sdk:payment-sdk-release:1.0.10")
+  debugApi("com.payengine.sdk:payment-sdk-debug:1.1.1-alpha.0")
+  releaseApi("com.payengine.sdk:payment-sdk-release:1.1.1-alpha.0")
   implementation("com.google.android.gms:play-services-wallet:19.2.1")
 
   // From node_modules

package/android/src/main/java/com/reactnativepayengine/v2/RNPayEngineNative.kt

@@ -1,22 +1,32 @@
 package com.reactnativepayengine.v2
 
-import android.app.Activity
 import android.util.Log
+import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReactContextBaseJavaModule
 import com.facebook.react.bridge.ReactMethod
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.UiThreadUtil.runOnUiThread
+import com.facebook.react.modules.core.DeviceEventManagerModule
 import com.payengine.paymentsdk.PayEngine
 import com.payengine.paymentsdk.features.googlepay.PEGooglePayInterface
 import com.payengine.paymentsdk.features.googlepay.PEGooglePayStatus
 import com.payengine.paymentsdk.models.PEConfig
-import kotlin.concurrent.thread
+import com.payengine.paymentsdk.utils.PEAccessToken
+import com.reactnativepayengine.v2.securefields.RNPEEvents
+import java.util.concurrent.CountDownLatch
+import java.util.concurrent.TimeUnit
 
 class RNPayEngineNative: ReactContextBaseJavaModule {
+  private var context: ReactApplicationContext
 
-  constructor(context: ReactApplicationContext): super(context) {
+  private var accessTokenProvider: (() -> PEAccessToken)? = null
+  private var latch: CountDownLatch? = null
+  private var resultFromJS: ReadableMap? = null
 
+  constructor(context: ReactApplicationContext): super(context) {
+    this.context = context
   }
 
   override fun getName(): String {
@@ -87,8 +97,60 @@ class RNPayEngineNative: ReactContextBaseJavaModule {
     }
   }
 
+  @ReactMethod
+  fun configureFetchAccessTokenCallback(promise: Promise) {
+    accessTokenProvider = { fetchAccessTokenFromReact() }
+    PayEngine.setFetchAccessTokenCallback(accessTokenProvider!!)
+    promise.resolve(null)
+  }
+
+  // Blocking function to fetch access token synchronously
+  private fun fetchAccessTokenFromReact(): PEAccessToken {
+    latch = CountDownLatch(1)
+    resultFromJS = null
+
+    // Send event to JS
+    val params = Arguments.createMap()
+    context
+      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+      .emit(RNPEEvents.ON_FETCH_ACCESS_TOKEN, params)
+
+    // Wait (max 5 seconds)
+    try {
+      latch?.await(5, TimeUnit.SECONDS)
+    } catch (e: Exception) {
+      e.printStackTrace()
+    }
+
+    val accessToken = resultFromJS?.getString("accessToken")
+    val expiresIn = resultFromJS?.getInt("expiresIn")?.toLong()
+
+    if (accessToken != null && expiresIn != null) {
+      return object : PEAccessToken {
+        override val accessToken: String = accessToken
+        override val expiresIn: Long = expiresIn
+      }
+    }
+
+    throw Exception("No token received from Flutter")
+  }
+
+  @ReactMethod
+  fun provideFetchAccessTokenResult(value: ReadableMap?, promise: Promise) {
+    resultFromJS = value
+    latch?.countDown()
+    promise.resolve(null)
+  }
+
   companion object {
     var instance: PayEngine? = null
     var googlePay: PEGooglePayInterface? = null
   }
+
+
+  @ReactMethod
+  fun logout(merchantId: String, promise: Promise) {
+    PayEngine.logout(merchantId)
+    promise.resolve(null)
+  }
 }

package/android/src/main/java/com/reactnativepayengine/v2/securefields/RNPEEvents.kt

@@ -8,4 +8,5 @@ object RNPEEvents {
   val ON_GOOGLE_PAY_RESPOND = "onGooglePayRespond"
   val ON_GOOGLE_PAY_ERROR = "onGooglePayError"
   val ON_GOOGLE_PAY_DISMISS = "onGooglePayDismiss"
+  const val ON_FETCH_ACCESS_TOKEN = "fetchAccessToken"
 }

package/android/src/main/java/com/reactnativepayengine/v2/securefields/bankaccount/RNBankAccountViewManager.kt

@@ -58,12 +58,25 @@ class RNPEBankAccountViewManager: SimpleViewManager<RNPEBankAccountView> {
     "hideKeyboard" to COMMAND_HIDE_KEYBOARD
   )
 
+  // Legacy receiveCommand for old architecture compatibility
   override fun receiveCommand(root: RNPEBankAccountView, commandId: String?, args: ReadableArray?) {
     super.receiveCommand(root, commandId, args)
-    when (commandId?.toInt()) {
+    executeCommand(root, commandId?.toIntOrNull() ?: -1, args)
+  }
+
+  // New Architecture (Fabric) receiveCommand override with Int commandId
+  @Suppress("DEPRECATION")
+  override fun receiveCommand(root: RNPEBankAccountView, commandId: Int, args: ReadableArray?) {
+    executeCommand(root, commandId, args)
+  }
+
+  private fun executeCommand(root: RNPEBankAccountView, commandId: Int, args: ReadableArray?) {
+    when (commandId) {
       COMMAND_SUBMIT -> {
-        val merchantId = if (args?.isNull(0) == true) null else args!!.getString(0)
-        val additionalData = if (args?.isNull(1) == true) java.util.HashMap() else args.getMap(1).toHashMap()
+        val merchantId = if (args?.isNull(0) == true) null else args?.getString(0)
+        @Suppress("UNCHECKED_CAST")
+        val additionalData: Map<String, Any> = if (args?.isNull(1) == true) emptyMap() else (args?.getMap(1)?.toHashMap()?.filterValues { it != null } as? Map<String, Any>) ?: emptyMap()
+
         root.submit(merchantId, additionalData) { bankAccount ->
           Log.d("PE", Gson().toJson(bankAccount))
           if (bankAccount.STATUS == "FAILED") {

package/android/src/main/java/com/reactnativepayengine/v2/securefields/creditcard/RNPECreditCardViewManager.kt

@@ -59,14 +59,25 @@ class RNPECreditCardViewManager: SimpleViewManager<RNPECreditCardView> {
     "hideKeyboard" to COMMAND_HIDE_KEYBOARD
   )
 
+  // Legacy receiveCommand for old architecture compatibility
   override fun receiveCommand(root: RNPECreditCardView, commandId: String?, args: ReadableArray?) {
     super.receiveCommand(root, commandId, args)
-    Log.d("PE", "Received command $commandId")
-    when (commandId?.toInt()) {
+    executeCommand(root, commandId?.toIntOrNull() ?: -1, args)
+  }
+
+  // New Architecture (Fabric) receiveCommand override with Int commandId
+  @Suppress("DEPRECATION")
+  override fun receiveCommand(root: RNPECreditCardView, commandId: Int, args: ReadableArray?) {
+    executeCommand(root, commandId, args)
+  }
+
+  private fun executeCommand(root: RNPECreditCardView, commandId: Int, args: ReadableArray?) {
+    when (commandId) {
       COMMAND_SUBMIT -> {
+        val merchantId = if (args?.isNull(0) == true) null else args?.getString(0)
+        @Suppress("UNCHECKED_CAST")
+        val additionalData: Map<String, Any> = if (args?.isNull(1) == true) emptyMap() else (args?.getMap(1)?.toHashMap()?.filterValues { it != null } as? Map<String, Any>) ?: emptyMap()
 
-        val merchantId = if (args?.isNull(0) == true) null else args!!.getString(0)
-        val additionalData = if (args?.isNull(1) == true) java.util.HashMap() else args.getMap(1).toHashMap()
         root.submit(merchantId, additionalData) { card ->
           if (card.STATUS == "FAILED") {
             val params = Arguments.createMap().apply {

package/ios/PayEngineSDK.xcframework/Info.plist

@@ -8,32 +8,32 @@
 			<key>BinaryPath</key>
 			<string>PayEngineSDK.framework/PayEngineSDK</string>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64</string>
+			<string>ios-arm64_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>PayEngineSDK.framework</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>BinaryPath</key>
 			<string>PayEngineSDK.framework/PayEngineSDK</string>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_x86_64-simulator</string>
+			<string>ios-arm64</string>
 			<key>LibraryPath</key>
 			<string>PayEngineSDK.framework</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/ios/PayEngineSDK.xcframework/ios-arm64/PayEngineSDK.framework/Headers/KDataCollector.h

@@ -7,33 +7,9 @@
 
 #import <Foundation/Foundation.h>
 
-// Error Codes
-typedef NS_ENUM(NSInteger, KDataCollectorErrorCode) {
-    
-    KDataCollectorErrorCodeUnknown = 0,
-    
-    // A system error occurred
-    KDataCollectorErrorCodeNSError,
-    
-    // A required collector timed out
-    KDataCollectorErrorCodeTimeout,
-    
-    // A bad parameter was passed into the data collector
-    KDataCollectorErrorCodeBadParameter,
-    
-    // A network connection isn't available
-    KDataCollectorErrorCodeNoNetwork,
-    
-    // An error occurred while validating a response from the server
-    KDataCollectorErrorCodeResponseValidation,
-};
-
 NS_ASSUME_NONNULL_BEGIN
 
-extern NSString *const KDataCollectorErrorDomain;
 
-// Version of the Kount Data Collector SDK
-extern NSString *const KDataCollectorVersion;
 
 // Configuration settings for location collection
 typedef NS_ENUM(NSInteger, KLocationCollectorConfig) {
@@ -49,11 +25,12 @@ typedef NS_ENUM(NSInteger, KLocationCollectorConfig) {
     KLocationCollectorConfigSkip,          
 };
 
+
 // Configuration settings Kount collection environment
 typedef NS_ENUM(NSInteger, KEnvironment) {
     
     // Unknown Environment
-    KEnvironmentUnknown = 0, 
+    KEnvironmentUnknown = 0,
     
     // Test Environment
     KEnvironmentTest,
@@ -62,6 +39,8 @@ typedef NS_ENUM(NSInteger, KEnvironment) {
     KEnvironmentProduction,
 };
 
+
+
 // KDataCollector enables you to collect device information for the given session
 //
 // First, configure the collector during the initialization of your application

package/ios/PayEngineSDK.xcframework/ios-arm64/PayEngineSDK.framework/Headers/KountAnalyticsViewController.h

@@ -12,26 +12,6 @@
 #import "KDataCollector.h"
 
 NS_ASSUME_NONNULL_BEGIN
-// DMD-352: Device Collection Status
-typedef NS_ENUM(NSInteger, KDataCollectorStatus) {
-    
-    // A device data collection not started
-    KDataCollectorStatusNotStarted = 0,
-    
-    // A device data collection started
-    KDataCollectorStatusStarted,
-    
-    // A device data collection completed successfully
-    KDataCollectorStatusCompleted,
-    
-    // A device data collection failed with error
-    KDataCollectorStatusFailedWithError,
-    
-    // A device data collection failed without error
-    KDataCollectorStatusFailedWithOutError,
-    
-};
-
 
 @interface KountAnalyticsViewController : UIViewController <UITextFieldDelegate, UITextViewDelegate, UISearchBarDelegate> {