@jimrising/easymerchantsdk-react-native 2.0.9 → 2.1.0

package/README.md

@@ -1,6 +1,6 @@
 # EasyMerchantSdk React Native Implementation
 
-This guide provides step-by-step instructions to integrate the EasyMerchantSdk into your React Native application for both Android and iOS platforms.
+This guide provides step-by-step instructions to integrate the EasyMerchantSdk into your React Native application for both Android and iOS platforms. The SDK supports identical parameters for both platforms, with differences only in the method calls for initiating payments and handling responses.
 
 ## Prerequisites
 
@@ -18,7 +18,7 @@ Add the EasyMerchantSdk to your project by including it in your `package.json` f
 
 ```json
 "dependencies": {
-  "@jimrising/easymerchantsdk-react-native": "^2.0.9"
+  "@jimrising/easymerchantsdk-react-native": "^2.1.0"
 }
 ```
 
@@ -40,12 +40,12 @@ allprojects {
         mavenCentral()
         maven { url 'https://jitpack.io' }
         maven {
-               url = uri(properties.getProperty('GITHUB_URL'))
-               credentials {
-                   username = properties.getProperty('GITHUB_USERNAME')
-                   password = properties.getProperty('GITHUB_PASSWORD')
-               }
-           }
+            url = uri(properties.getProperty('GITHUB_URL'))
+            credentials {
+                username = properties.getProperty('GITHUB_USERNAME')
+                password = properties.getProperty('GITHUB_PASSWORD')
+            }
+        }
     }
 }
 ```
@@ -131,10 +131,11 @@ pod install
 
 ## Usage in Your React Native App
 
-To integrate the EasyMerchantSdk into your React Native application, you can use the provided `App.js` as a reference. Below is a summary of how to call the SDK in your `App.js`:
+To integrate the EasyMerchantSdk into your React Native application, you can use the provided `App.js` as a reference. The parameters for Android and iOS are identical, but the method calls differ slightly.
+
+### 1. Import Necessary Modules
 
-1. **Import Necessary Modules**  
-   Ensure you import the required React Native components and the EasyMerchantSdk NativeModules:
+Ensure you import the required React Native components and the EasyMerchantSdk NativeModules:
 
 ```javascript
 import React, { useState, useEffect } from 'react';
@@ -143,8 +144,9 @@ import { StyleSheet, Text, View, TextInput, Button, Alert, ScrollView, Platform,
 const { RNEasymerchantsdk, EasyMerchantSdk } = NativeModules;
 ```
 
-2. **Set Up Configuration**  
-   Define the configuration object for the SDK, including payment details, theme settings, and other parameters. The provided `App.js` includes a comprehensive `externalConfig` object that you can customize:
+### 2. Set Up Configuration
+
+Define the configuration object for the SDK, which is shared between Android and iOS. The provided `App.js` includes a comprehensive `externalConfig` object that you can customize:
 
 ```javascript
 const externalConfig = {
@@ -211,10 +213,10 @@ const externalConfig = {
   recurringData: {
     allowCycles: 2,
     intervals: ['daily', 'weekly', 'monthly'],
-    recurringStartType:  'custom',
+    recurringStartType: Platform.OS === 'android' ? 'Custom' : 'custom',
     recurringStartDate: new Date().toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }),
   },
-  androidConfig: {
+  configur: {
     currency: 'usd',
     saveCard: true,
     saveAccount: true,
@@ -261,8 +263,122 @@ const externalConfig = {
 };
 ```
 
-3. **Handle Payments**  
-   Use the `handlePayment` function to initiate payments. This function validates inputs and calls platform-specific billing functions (`handleAndroidBilling` for Android and `handleIosBilling` for iOS). Example:
+### 3. Handle Payments
+
+The `handlePayment` function validates inputs and calls platform-specific billing functions. The parameters are identical for both platforms, but the method calls differ.
+
+#### Android: `handleAndroidBilling`
+
+```javascript
+const handleAndroidBilling = async () => {
+  const { apiKey, secretKey } = apiKeys[environment];
+  const selectedPaymentMethods = [...configur.paymentMethod];
+
+  const config = {
+    amount,
+    apiKey,
+    secretKey,
+    jsonConfig: {
+      environment,
+      amount,
+      tokenOnly: false,
+      currency: configur.currency,
+      saveCard: configur.saveCard,
+      saveAccount: configur.saveAccount,
+      authenticatedACH: isAuthenticatedACH,
+      secureAuthentication: isSecureAuthentication,
+      showReceipt: configur.showReceipt,
+      showDonate: configur.showDonate,
+      showTotal: configur.showTotal,
+      showSubmitButton: configur.showSubmitButton,
+      paymentMethod: selectedPaymentMethods,
+      emailEditable,
+      email,
+      name,
+      fields: {
+        ...configur.fields,
+        visibility: {
+          billing: isBillingVisible,
+          additional: isAdditionalVisible,
+        },
+      },
+      metadata,
+      ...(isRecurring && {
+        recurring: {
+          enableRecurring: true,
+          recurringData,
+        },
+      }),
+      grailPayParams,
+      appearanceSettings: configur.appearanceSettings,
+    },
+  };
+
+  try {
+    const response = await RNEasymerchantsdk.makePayment(config);
+    const parsedResponse = {
+      ...JSON.parse(response?.response || '{}'),
+      billingInfo: safeParseMaybeJSON(response?.billingInfo),
+      additional_info: safeParseMaybeJSON(response?.additional_info),
+    };
+    setResult(JSON.stringify(parsedResponse, null, 2));
+  } catch (error) {
+    setResult(`Error: ${error.message ?? JSON.stringify(error)}`);
+    Alert.alert('Payment Error', error.message ?? 'Unknown error');
+  } finally {
+    setLoading(false);
+  }
+};
+```
+
+#### iOS: `handleIosBilling`
+
+```javascript
+const handleIosBilling = async () => {
+  const selectedPaymentMethodsIOS = [...configur.paymentMethod].map(method => 
+    method === 'card' ? 'Card' : method === 'ach' ? 'Bank' : method
+  );
+
+  try {
+    const result = await EasyMerchantSdk.billing(
+      amount,
+      'usd', // Default currency
+      billingInfo,
+      selectedPaymentMethodsIOS,
+      themeConfiguration,
+      false, // tokenOnly
+      true, // saveCard
+      true, // saveAccount
+      isAuthenticatedACH,
+      grailPayParams,
+      'Submit',
+      isRecurring,
+      isRecurring ? recurringData.allowCycles : 0,
+      isRecurring ? recurringData.intervals : [],
+      isRecurring ? recurringData.recurringStartType : '',
+      isRecurring ? recurringData.recurringStartDate : '',
+      isSecureAuthentication,
+      true, // showReceipt
+      true, // showTotal
+      true, // showSubmitButton
+      isEmail,
+      email,
+      name,
+      metadata
+    );
+
+    const refToken = result?.additionalInfo?.threeDSecureStatus?.data?.ref_token;
+    if (refToken) setReferenceToken(refToken);
+    setResult(JSON.stringify(result, null, 2));
+  } catch (error) {
+    setResult(`Billing Error: ${error.message || JSON.stringify(error)}`);
+  } finally {
+    setLoading(false);
+  }
+};
+```
+
+#### Main Payment Handler
 
 ```javascript
 const handlePayment = async () => {
@@ -275,6 +391,7 @@ const handlePayment = async () => {
   }
 
   setLoading(true);
+  const timeoutId = setTimeout(() => setLoading(false), 3000);
 
   try {
     if (Platform.OS === 'android') {
@@ -283,13 +400,15 @@ const handlePayment = async () => {
       await handleIosBilling();
     }
   } finally {
+    clearTimeout(timeoutId);
     setLoading(false);
   }
 };
 ```
 
-4. **Event Listeners for Android**  
-   Set up event listeners for payment success, status, and errors using `NativeEventEmitter`:
+### 4. Event Listeners for Android
+
+Set up event listeners for payment success, status, and errors using `NativeEventEmitter` (Android only):
 
 ```javascript
 useEffect(() => {
@@ -319,19 +438,24 @@ useEffect(() => {
 }, []);
 ```
 
-5. **UI Components**  
-   The provided `App.js` includes custom components like `Dropdown` and `FilledButton` for a user-friendly interface. Customize the styles in the `StyleSheet` to match your app's design.
+### 5. UI Components
+
+The provided `App.js` includes custom components like `Dropdown` and `FilledButton` for a user-friendly interface. Customize the styles in the `StyleSheet` to match your app's design.
 
 ## Notes
 
-- **Billing Info**: You can send `null` for billing info if it is not available.
+- **Billing Info**: You can send `null` for `billingInfo` if it is not available.
 - **Environment Configuration**: The SDK supports `sandbox` and `staging` environments. Ensure you configure the correct API keys for each environment.
-- **Payment Methods**: The SDK supports `card` and `ach` payment methods, with options to toggle them in the UI.
+- **Payment Methods**: The SDK supports `card` and `ach` payment methods (mapped to `Card` and `Bank` on iOS). Toggle them in the UI as needed.
 - **Recurring Payments**: Ensure at least one interval (`daily`, `weekly`, `monthly`) is selected when enabling recurring payments.
-- **Theming**: Customize the appearance using `themeConfiguration` (iOS) or `androidConfig.appearanceSettings` (Android) to match your app's branding.
+- **Theming**: Customize the appearance using `themeConfiguration` for iOS or `configur.appearanceSettings` for Android to match your app's branding. The parameters are identical for both platforms.
+- **Method Differences**:
+    - **Android**: Use `RNEasymerchantsdk.makePayment(config)` with a JSON configuration object.
+    - **iOS**: Use `EasyMerchantSdk.billing(...)` with parameters passed directly.
+    - iOS supports an additional `paymentReference` method for checking payment status using a reference token.
 
 ## Troubleshooting
 
 - **iOS Bridge Initialization**: If you see "Failed to retrieve EasyMerchantSdkPlugin instance" in the console, ensure the `easymerchantsdk` pod is correctly installed and linked.
-- **Android Payment Issues**: Verify that `paymentMethod` is correctly formatted (`['card', 'ach']`) and that API keys are valid.
+- **Android Payment Issues**: Verify that `paymentMethod` is correctly formatted (`['card', 'ach']`) and that API keys are valid. Ensure `GITHUB_URL`, `GITHUB_USERNAME`, and `GITHUB_PASSWORD` are correctly set in your Gradle properties.
 - **Pod Installation**: If `pod install` fails, ensure Ruby 3.2.8 is installed and run `pod install --repo-update`.

package/ios/Classes/EasyMerchantSdk.m

@@ -2,8 +2,8 @@
 #import <React/RCTLog.h>
 #import <React/RCTBridgeModule.h>
 
-//#import <easymerchantsdk-Swift.h>
-#import <easymerchantsdk/easymerchantsdk-Swift.h>
+#import <easymerchantsdk-Swift.h>
+//#import <easymerchantsdk/easymerchantsdk-Swift.h>
 
 
 @interface EasyMerchantSdk ()

package/ios/easymerchantsdk.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'easymerchantsdk'
-  s.version          = '2.0.9'
+  s.version          = '2.1.0'
   s.summary          = 'A React Native SDK for Easy Merchant.'
   s.description      = <<-DESC
     A React Native SDK to enable Easy Merchant functionality in mobile applications.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jimrising/easymerchantsdk-react-native",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "description": "",
   "main": "index.js",
   "scripts": {