react-native-payengine 1.0.5 → 2.0.2

package/README.md

@@ -1,152 +1,234 @@
-# react-native-payengine
+# react-native-payengine v2
 
-React Native SDK for PayEngine
+## React Native SDK Version 2
 
-## Installation
+### Overview
 
-```sh
-npm install react-native-payengine
-```
-
-#### Expo managed project
-
-To be updated
+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.
 
-#### Install dependencies into a bare React Native project
+### Prerequisites
 
-In your project directory, run:
+#### Install Package
 
-```sh
-npm install react-native-webview
+```bash
+yarn add react-native-payengine@2
 ```
 
-Visit https://github.com/react-native-webview/react-native-webview to view additional installation step if you're using manually linking.
+#### Android
 
-From React Native 0.6.0 and higher, linking is automatic. So you don't need to run `react-native link`
+To use secure fields components, you need to install and configure the Material Components theme in your app.
 
-If you're on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.
+1. Add the following dependency to your `app/build.gradle` file with the specified version:
 
+```gradle
+implementation 'com.google.android.material:material:<version>'
 ```
-npx pod-install ios
+
+2. Enable Jetifier in your app's `gradle.properties` if you encounter duplicate class issues like:
+
+```text
+android.useAndroidX=true
+android.enableJetifier=true
 ```
 
-## Usage
+Example error:
 
-#### Configuration
+```text
+FAILURE: Build failed with an exception.
 
+* What went wrong:
+Execution failed for task ':app:checkDebugDuplicateClasses'.
+> A failure occurred while executing com.android.build.gradle.internal.tasks.CheckDuplicatesRunnable
+   > Duplicate class android.support.v4.app.INotificationSideChannel found in modules core-1.9.0.aar -> core-1.9.0-runtime
 ```
-const configuration = {
-  publicKey: "pk_dev_lQm6u1h9yaSPO6qGJaAt4lTf5GBlehCI",
-  scriptURL: "http://localhost:3000/js/1.0.0/embed.js",
-  logLevel: 1
+
+3. Set the appropriate style in your `styles.xml` file:
+
+```xml
+<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+    <!-- ... -->
+</style>
+```
+
+4. To use the Fraud Monitoring feature, change your main application class to extend `PEApplication` as shown:
+
+```java
+public class MainApplication extends RNPEFraudAnalyticsApplication implements ReactApplication {
+    // ...
 }
 ```
 
-#### Embedded UI
+### Usage
 
-```js
-import { PayEngine } from 'react-native-payengine';
+#### Wrap the Config in a Provider
 
-<PayEngine
-  type="boarding"
-  merchant-id="07f6ee61-1548-4ffa-a1dc-f671c837ceb9"
-  events={{
-    stepChange: (eventData: any) => {
-      console.log({ eventData });
-    },
-  }}
-  config={configuration}
-/>;
-```
+```jsx
+import { PEProvider } from 'react-native-payengine';
 
-#### Secure Fields
+const App = () => {
+  return (
+    <PEProvider config={PE_CONFIG}>
+      <NavigationContainer>
+        <CreditCardForm />
+        <BankAccountForm />
+        <ApplePayScreen />
+      </NavigationContainer>
+    </PEProvider>
+  );
+};
+```
 
-```js
-import * as React from 'react';
-import { View, Text, StyleSheet, Button, ScrollView } from 'react-native';
-import { SecureFields } from 'react-native-payengine';
+#### Credit Card Form
+
+```jsx
+import React from 'react';
+import { PECreditCardView, PEKeyboardType } from 'react-native-payengine';
+import { Button, View } from 'react-native';
+
+const additionalFields = [
+  {
+    name: 'address_zip',
+    type: 'text',
+    placeholder: 'Zip code',
+    keyboardType: PEKeyboardType.alphabet,
+    isRequired: true,
+    pattern:
+      '^(?:\\d{5}(?:-\\d{4})?|[ABCEGHJKLMNPRSTVXY]\\d[A-Z] ?\\d[A-Z]\\d)$',
+  },
+];
 
-export function Payment() {
-  const secureFieldRef = React.createRef<any>()
-  const [secureFieldsResult, setSecureFieldsResult] = React.useState('')
-  const [submitting, setSubmitting] = React.useState(false)
+const CreditCardForm = () => {
+  const formRef = React.createRef();
 
   const createCard = async () => {
     try {
-      setSubmitting(true)
-      const result = await secureFieldRef.current?.createCard()
-      setSecureFieldsResult(result)
-    } catch (err: any) {
-      setSecureFieldsResult(err.message)
-    } finally {
-      setSubmitting(false)
+      const result = await formRef.current?.submit(MERCHANT_ID, {});
+      console.log({ result });
+    } catch (err) {
+      console.log({ err });
     }
-  }
-
+  };
 
   return (
-    <View style={styles.container}>
-      <Text>Welcome to PayEngine React Native SDK example</Text>
-      <Text>Click the hamburger menu above to browse our examples</Text>
-
-      <View style={{ height: 30 }} />
-      <Text style={{ fontSize: 18, fontWeight: '600' }}>Secure Fields</Text>
-      <SecureFields.CollectManager ref={secureFieldRef} config={configuration}>
-        <SecureFields.CardHolderNameField style={styles.field} />
-        <SecureFields.CardNumberField placeholder="Card number" style={styles.field} />
-        <View style={{ display: 'flex', flexDirection: "row", width: '100%', height: 50, margin: 8 }}>
-          <SecureFields.ExpDateTextField style={[styles.field, { flex: 1, margin: 0, marginRight: 10 }]} />
-          <SecureFields.CVCField style={[styles.field, { flex: 1, margin: 0 }]} />
-        </View>
-        <SecureFields.ZipCodeField placeholder="Zip code" style={styles.field} />
-
-        <Button disabled={submitting} onPress={() => createCard()} title="Create Card" />
-
-      </SecureFields.CollectManager>
-      <ScrollView scrollEnabled={true} style={{ flex: 1, width: '100%', backgroundColor: 'lightyellow', padding: 10, marginVertical: 20 }}>
-        <Text>{JSON.stringify(secureFieldsResult, null, 4)}</Text>
-      </ScrollView>
+    <View>
+      <PECreditCardView ref={formRef} additionalFields={additionalFields} />
+      <Button onPress={createCard} title="Create Card" />
     </View>
   );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    display: 'flex',
-    padding: 20,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  field: {
-    width: '100%',
-    height: 50,
-    margin: 8,
-    padding: 5
-  }
-})
-
+};
 ```
 
+#### Bank Account Form
 
-## Troubleshooting
+```jsx
+import React from 'react';
+import { PEBankAccountView } from 'react-native-payengine';
+import { Button, View } from 'react-native';
 
-If your android Emulator can't connect to metro bundler
+const BankAccountForm = () => {
+  const formRef = React.createRef();
 
-*android/src/debug/res/xml/network.xml*
-```
-<?xml version="1.0" encoding="utf-8"?>
-<network-security-config>
-  <domain-config cleartextTrafficPermitted="true">
-   <domain includeSubdomains="true">localhost</domain>
-   <domain includeSubdomains="true">10.0.2.2</domain>
-  </domain-config>
-</network-security-config>
-```
+  const createBankAccount = async () => {
+    try {
+      const result = await formRef.current?.submit(MERCHANT_ID, {});
+      console.log({ result });
+    } catch (err) {
+      console.log({ err });
+    }
+  };
 
-*android/src/debug/AndroidManifest.xml*
+  return (
+    <View>
+      <PEBankAccountView ref={formRef} />
+      <Button onPress={createBankAccount} title="Create Bank Account" />
+    </View>
+  );
+};
 ```
-...
-android:networkSecurityConfig="@xml/network"
-...
+
+#### Apple Pay
+
+```jsx
+import React from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import {
+  PEApplePayButton,
+  PEPaymentRequest,
+  PayEngineNative,
+  PayEngineUtils,
+} from 'react-native-payengine';
+import axios from 'axios';
+
+const ApplePayScreen = () => {
+  const [canMakePayment, setCanMakePayment] = React.useState(false);
+  const [paymentResult, setPaymentResult] = React.useState(null);
+
+  React.useEffect(() => {
+    const checkSupport = async () => {
+      try {
+        const isSupported = await PayEngineNative.isPlatformPaySupported(
+          MERCHANT_ID
+        );
+        console.log('isSupported', isSupported);
+        setCanMakePayment(isSupported);
+      } catch (e) {
+        console.error('Apple Pay not supported', e);
+      }
+    };
+    checkSupport();
+  }, []);
+
+  const paymentRequest = new PEPaymentRequest(120.5, 'USD', [
+    {
+      amount: 100.0,
+      label: 'Full Back Lounge Chair',
+    },
+    {
+      amount: 20.5,
+      label: 'Glass Top Oval Center Table',
+    },
+  ]);
+
+  const purchaseWithToken = async (token) => {
+    // send the token to your server to make a purchase
+    // ...
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text>Apple Pay Demo</Text>
+      {canMakePayment && (
+        <>
+          <PEApplePayButton
+            paymentRequest={paymentRequest}
+            onTokenDidReturn={(token) => {
+              console.log('Apple Pay token', token);
+              // Send token to server
+              purchaseWithToken(token);
+            }}
+            onPaymentSheetDismissed={() => {
+              console.log('Payment sheet dismissed');
+            }}
+            onPaymentFailed={(error) => {
+              console.log('Payment failed', error);
+            }}
+            style={{ height: 40, margin: 20 }}
+          />
+          <ScrollView
+            scrollEnabled
+            style={{
+              flex: 1,
+              width: '100%',
+              backgroundColor: 'lightyellow',
+              padding: 10,
+              marginVertical: 20,
+            }}
+          >
+            <Text>{JSON.stringify(paymentResult, null, 4)}</Text>
+          </ScrollView>
+        </>
+      )}
+    </View>
+  );
+};
 ```

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -1,2 +1,2 @@
-#Tue Sep 20 13:44:22 ICT 2022
-gradle.version=5.6.4
+#Mon Sep 09 23:15:47 ICT 2024
+gradle.version=6.1.1

package/android/.gradle/config.properties

@@ -0,0 +1,2 @@
+#Mon Sep 09 17:19:45 ICT 2024
+java.home=/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home