skipcash-reactnative 0.0.2

package/LICENSE

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

package/README.md

@@ -0,0 +1,334 @@
+# skipcash-reactnative
+
+integrate skipcash in react native app.
+
+## Installation
+
+```sh
+npm install skipcash-reactnative
+```
+
+## Usage
+
+
+
+# Breif
+
+SkipCash React Native Package; This package facilitates SkipCash integration within your ReacNative app.
+
+
+# Example
+
+```jsx
+import { useEffect, useState } from 'react';
+
+import { StyleSheet, View, NativeEventEmitter, NativeModules, Platform, Alert } from 'react-native';
+import { initiateApplePay, PaymentData, PaymentResponse,
+  isWalletHasCards, setupNewCard, initiatePaymentModel
+} from 'skipcash-reactnative';
+
+import { TextInput, Button, Title } from 'react-native-paper';
+
+
+export default function App() {
+
+  const paymentData = new PaymentData();
+
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName]   = useState('');
+  const [phone, setPhone]         = useState('');
+  const [email, setEmail]         = useState('');
+  const [amount, setAmount]       = useState('');
+
+  /**********************************
+  - THIS PACKAGE PROVIDES TWO PAYMENT OPTIONS FOR YOUR CUSTOMER -
+    1. IN-APP APPLE PAY using 'initiateApplePay()' function.
+    2. IN-APP WEB VIEW (INCLUDES ALL PAYMENT OPTIONS THAT SKIPCASH OFFERS).
+  - THIS EXAMPLE APP, DEMONESTRATES HOW TO USE THE DIFFERENT OPTIONS MENTIONED ABOVE
+  ***********************************/
+
+  /*
+    Here In case if you want to implement IN-APP Apple Pay
+    you have to  pass the name of the merchant identifier
+    (you need to create a new one from apple developer account of your app ). 
+    please reachout to https://dev.skipcash.app/ mobile apple pay section to
+    know how to generate your merchant identifier and setup Xcode.
+  */
+
+  paymentData.setMerchantIdentifier("");
+  /* 
+    Add your payment endpoint; You need to create an endpoint for your merchant account.
+    For more information on how to request a new payment, Please refer to https://dev.skipcash.app/doc/api-integration/.
+    
+    You will need to implement this functionality on your backend server to create an endpoint that requests a new payment and returns the details you receive from the SkipCash server to this package. Of course your endpoint will receive the customer's details from this package request, Upon receiving the details response from your server this package will use that details to process your customer's payment via Apple Pay.
+
+    Once you have completed setting up and testing your endpoint, please provide the link to the setPaymentLinkEndPoint below.
+  */
+  paymentData.setPaymentLinkEndPoint("")
+  paymentData.setAuthorizationHeader("");
+  /* add authorizartion header; used to protect your endpoint from unathorized access */
+
+  useEffect(() => {
+    // subscriptions list: Holds the events subscriptions to receive data from native side.
+    const subscriptions: any = [];
+
+    if(Platform.OS === 'android'){
+      // for payment page response
+      subscriptions.push(new NativeEventEmitter().addListener(
+        'responseScPaymentData',
+        (paymentResponse: any) => {
+          console.log(paymentResponse); // json
+          /*
+            Handle payment response here...
+          */
+        }
+      ));
+    }else if(Platform.OS === 'ios'){
+      // for payment page response
+      subscriptions.push(new NativeEventEmitter(NativeModules.SkipcashReactnative).addListener(
+        'responseScPaymentData',
+        (paymentResponse: any) => {
+          console.log(paymentResponse); // json
+        }
+      ));
+
+      // For In-App Apple Pay
+      subscriptions.push(new NativeEventEmitter(NativeModules.SkipcashReactnative).addListener(
+        'applepay_response',
+         (paymentResponse: any) => {
+          console.log(paymentResponse); // json
+  
+          let response: PaymentResponse = PaymentResponse.fromJson(paymentResponse);
+  
+  
+          Alert.alert(`isSuccess: ${response.isSuccess} | transactionId: ${response.transactionId} | PaymentID: ${response.paymentId} 
+            | returnCode: ${response.returnCode} | errorMessage: ${response.errorMessage}`);
+  
+          /* 
+            Handle payment response here...
+            you can get the payment details using the payment id after successful payment request.
+            send a GET request to SkipCash server `/api/v1/payments/${response.paymentId}`
+            and include your merchant - client id in the authorization header request to get 
+            the payment details. 
+            for more details please refer to https://dev.skipcash.app/doc/api-integration/ 
+          */
+        }
+      ));
+    }
+
+    return () => {
+      // cleaning up after leaving the current app view
+      new NativeEventEmitter().removeAllListeners("responseScPaymentData");
+      if(Platform.OS === 'ios'){
+        new NativeEventEmitter().removeAllListeners("applepay_response");
+      }
+      subscriptions.forEach((subscription: any) => subscription.remove());
+    };
+
+  }, []);
+
+  const initiateApplePayPayment = () => {
+    paymentData.setSummaryItem('Tax', '0.0'); // set summary item
+    paymentData.setSummaryItem('Total', amount); // set summary item
+
+    paymentData.setFirstName(firstName); // required
+    paymentData.setLastName(lastName); // required
+    paymentData.setPhone(phone); // required
+    paymentData.setEmail(email); // required
+    paymentData.setAmount(amount); // required
+    paymentData.setTransactionId(""); // your internal order id, (Optional) - but very much recommended
+    paymentData.setWebhookUrl(""); // very much recommended
+    paymentData.setMerchantName(""); /* 
+      Required - (if using in-app apple-pay set your official merchant/business name for apple payment sheet) 
+      this is required by apple, it must match your official name in appstore
+    */
+
+    /*
+      For more information about webhooks & transactionId (your internal order id) please
+      refer to https://dev.skipcash.app/doc/api-integration/
+    */
+    
+    const paymentDataJson = JSON.stringify(paymentData); // convert paymentData to json string
+
+    if(firstName && lastName && phone && email) {
+      initiateApplePay(paymentDataJson);
+    }else{
+      Alert.alert("please fill firstname, lastname, phone, email & amount");
+    }
+  }
+
+  const startPaymentModel = () => {
+    paymentData.setFirstName(firstName); // required
+    paymentData.setLastName(lastName); // required
+    paymentData.setPhone(phone); // required
+    paymentData.setEmail(email); // required
+    paymentData.setAmount(amount); // required
+    paymentData.setTransactionId(""); /* Optional - but very much recommended 
+      (it should be uniquely generated each time the function called). 
+    */
+    paymentData.setPaymentModalTitle("Checkout") // WEB VIEW SCREEN TITLE
+    paymentData.setWebhookUrl("https://paymentsimulation-4f296ff7747c.herokuapp.com/api/webhookPost/"); // very much recommended
+    paymentData.setReturnUrl("https://paymentsimulation-4f296ff7747c.herokuapp.com/api/returnURLGoogle/") // required
+
+    // below are some options used to adjust the WEBVIEW SCREEN header
+    /* 
+      For the colours please use the full hexadecimal representation 
+      not the shorthand representation; cause it can make some issues.
+
+      example:
+      (full hex)    #FFFFFF - white (CORRECT ✅)
+      (short hex)   #FFF    - white (INCORRECT ❌)
+
+    */
+    paymentData.setCancelBtnColour("#FFFFFF");
+    paymentData.setHeaderBackgroundColour("#017DFB");
+    paymentData.setPaymentModalTitle("TEST PAYMENT");
+    paymentData.setHeaderTitleColour("#FFFFFF");
+
+    if(firstName && lastName && phone && email && paymentData.getReturnUrl()) {
+      initiatePaymentModel(paymentData); // pass paymentData as object
+    }else{
+      Alert.alert("fill first&last name, phone, email, amount & return url ");
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      <Title style={styles.title}>Payment Details</Title>
+      
+      <TextInput
+        mode="outlined"
+        label="First Name"
+        outlineColor='#017DFB'
+        selectionColor='#017DFB'
+        cursorColor='#017DFB'
+        placeholderTextColor={'#017DFB'}
+        activeOutlineColor='#017DFB'
+        underlineColor='#017DFB'
+        underlineColorAndroid={"#017DFB"}
+        value={firstName}
+        onChangeText={text => setFirstName(text)}
+        style={styles.input}
+      />
+      <TextInput
+        mode="outlined"
+        label="Last Name"
+        outlineColor='#017DFB'
+        selectionColor='#017DFB'
+        cursorColor='#017DFB'
+        placeholderTextColor={'#017DFB'}
+        activeOutlineColor='#017DFB'
+        underlineColor='#017DFB'
+        underlineColorAndroid={"#017DFB"}
+        value={lastName}
+        onChangeText={text => setLastName(text)}
+        style={styles.input}
+      />
+      <TextInput
+        mode="outlined"
+        label="Phone"
+        outlineColor='#017DFB'
+        selectionColor='#017DFB'
+        cursorColor='#017DFB'
+        placeholderTextColor={'#017DFB'}
+        activeOutlineColor='#017DFB'
+        underlineColor='#017DFB'
+        underlineColorAndroid={"#017DFB"}
+        value={phone}
+        onChangeText={text => setPhone(text)}
+        style={styles.input}
+        keyboardType="phone-pad"
+      />
+      <TextInput
+        mode="outlined"
+        label="Email"
+        outlineColor='#017DFB'
+        selectionColor='#017DFB'
+        cursorColor='#017DFB'
+        placeholderTextColor={'#017DFB'}
+        activeOutlineColor='#017DFB'
+        underlineColor='#017DFB'
+        underlineColorAndroid={"#017DFB"}
+        value={email}
+        onChangeText={text => setEmail(text)}
+        style={styles.input}
+        keyboardType="email-address"
+      />
+      <TextInput
+        mode="outlined"
+        label="Amount"
+        outlineColor='#017DFB'
+        selectionColor='#017DFB'
+        cursorColor='#017DFB'
+        placeholderTextColor={'#017DFB'}
+        activeOutlineColor='#017DFB'
+        underlineColor='#017DFB'
+        underlineColorAndroid={"#017DFB"}
+        value={amount}
+        onChangeText={text => setAmount(text)}
+        style={styles.input}
+        keyboardType="numeric"
+      />
+      
+      <Button 
+        mode="contained" 
+        buttonColor='#017DFB'
+        rippleColor={"#017DFB"}
+        onPress={() => startPaymentModel()} 
+        style={styles.button}
+      >
+        Pay via WebView
+      </Button>
+
+      <Button 
+        mode="contained" 
+        buttonColor='#017DFB'
+        rippleColor={"#017DFB"}
+        onPress={async () => {
+          const response = await isWalletHasCards();
+          response ? initiateApplePayPayment() : setupNewCard();
+        }} 
+        style={styles.button}
+      >
+        Pay with Apple Pay
+      </Button>
+
+      <Button 
+        mode="outlined" 
+        textColor='#017DFB'
+        onPress={() => setupNewCard()} 
+        style={styles.button}
+      >
+        Setup A Card
+      </Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    justifyContent: 'center',
+    backgroundColor: '#f5f5f5',
+  },
+  title: {
+    fontSize: 24,
+    marginBottom: 20,
+    textAlign: 'center',
+  },
+  input: {
+    marginBottom: 10,
+  },
+  button: {
+    marginVertical: 10,
+  },
+});
+```
+
+
+## License
+
+MIT
+
+---

package/android/build.gradle

@@ -0,0 +1,183 @@
+// buildscript {
+//   repositories {
+//     google()
+//     mavenCentral()
+//   }
+
+//   dependencies {
+//     classpath "com.android.tools.build:gradle:7.2.1"
+//     // Remove the Kotlin Gradle plugin dependency
+//   }
+// }
+
+// def reactNativeArchitectures() {
+//   def value = rootProject.getProperties().get("reactNativeArchitectures")
+//   return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+// }
+
+// def isNewArchitectureEnabled() {
+//   return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+// }
+
+// apply plugin: "com.android.library"
+
+// if (isNewArchitectureEnabled()) {
+//   apply plugin: "com.facebook.react"
+// }
+
+// def supportsNamespace() {
+//   def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+//   def major = parsed[0].toInteger()
+//   def minor = parsed[1].toInteger()
+
+//   // Namespace support was added in 7.3.0
+//   return (major == 7 && minor >= 3) || major >= 8
+// }
+
+// android {
+//   if (supportsNamespace()) {
+//     namespace "com.skipcashreactnative"
+
+//     sourceSets {
+//       main {
+//         manifest.srcFile "src/main/AndroidManifestNew.xml"
+//       }
+//     }
+//   }
+
+//   compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+//   defaultConfig {
+//     minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+//     targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+//   }
+
+//   buildTypes {
+//     release {
+//       minifyEnabled false
+//     }
+//   }
+
+//   lintOptions {
+//     disable "GradleCompatible"
+//   }
+
+//   compileOptions {
+//     sourceCompatibility JavaVersion.VERSION_1_8
+//     targetCompatibility JavaVersion.VERSION_1_8
+//   }
+// }
+
+// repositories {
+//   mavenCentral()
+//   google()
+// }
+
+// dependencies {
+//   // For < 0.71, this will be from the local maven repo
+//   // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
+//   api "com.squareup.okhttp3:okhttp:4.12.0"
+//   implementation "com.facebook.react:react-native:+"
+//   // Remove the Kotlin standard library dependency
+// }
+
+
+buildscript {
+  // Buildscript is evaluated before everything else so we can't use getExtOrDefault
+  def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["SkipcashReactnative_kotlinVersion"]
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.3.1"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+  }
+}
+
+def reactNativeArchitectures() {
+  def value = rootProject.getProperties().get("reactNativeArchitectures")
+  return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+}
+
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["SkipcashReactnative_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["SkipcashReactnative_" + name]).toInteger()
+}
+
+def supportsNamespace() {
+  def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+  def major = parsed[0].toInteger()
+  def minor = parsed[1].toInteger()
+
+  // Namespace support was added in 7.3.0
+  return (major == 7 && minor >= 3) || major >= 8
+}
+
+android {
+  if (supportsNamespace()) {
+    namespace "com.skipcashreactnative"
+
+    sourceSets {
+      main {
+        manifest.srcFile "src/main/AndroidManifestNew.xml"
+      }
+    }
+  }
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+dependencies {
+  // For < 0.71, this will be from the local maven repo
+  // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
+  //noinspection GradleDynamicVersion
+  api "com.squareup.okhttp3:okhttp:4.12.0"
+  implementation "com.facebook.react:react-native:+"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+SkipcashReactnative_kotlinVersion=1.7.0
+SkipcashReactnative_minSdkVersion=21
+SkipcashReactnative_targetSdkVersion=31
+SkipcashReactnative_compileSdkVersion=31
+SkipcashReactnative_ndkversion=21.4.7075529

package/android/src/main/AndroidManifest.xml

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

package/android/src/main/AndroidManifestNew.xml

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

package/android/src/main/java/com/skipcashreactnative/ModalActivity.java

@@ -0,0 +1,128 @@
+package com.skipcashreactnative;
+
+import android.content.Intent;
+import android.os.Bundle;
+import android.app.Activity;
+import android.webkit.WebSettings;
+import android.webkit.WebView;
+import android.webkit.WebViewClient;
+import android.view.View;
+import android.graphics.Color;
+import android.webkit.WebResourceRequest;
+
+import android.net.Uri;
+import android.util.Log;
+
+import android.view.View;
+import android.webkit.WebView;
+
+import android.widget.ProgressBar;
+import android.graphics.Bitmap;
+import android.widget.RelativeLayout;
+import android.widget.TextView;
+
+
+public class ModalActivity extends Activity  {
+
+    @Override
+    public void onBackPressed() {
+        //used to fire an event the response listener on framework side that payment was canceled.
+        String transactionId = getIntent().getStringExtra("transactionId");
+        SkipcashReactnativeModule.handleOnWebViewClose(transactionId);
+
+        super.onBackPressed();
+        overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out);
+    }
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_modal);
+
+        RelativeLayout header       = findViewById(R.id.header); // color
+        TextView header_title       = findViewById(R.id.header_title); //color and text
+        TextView cancel_payment_btn = findViewById(R.id.cancel_payment_btn); // color
+        WebView webView = findViewById(R.id.webView);
+        ProgressBar loadingWebview = findViewById(R.id.loadingWebview);
+
+        String headerBackgroundColour = getIntent().getStringExtra("headerBackgroundColour");
+        String headerTitle = getIntent().getStringExtra("headerTitle");
+        String headerTitleColour = getIntent().getStringExtra("headerTitleColour");
+        String cancelColour = getIntent().getStringExtra("cancelColour");
+
+        header.setBackgroundColor(Color.parseColor(headerBackgroundColour));
+        header_title.setTextColor(Color.parseColor(headerTitleColour));
+        header_title.setText(headerTitle);
+        cancel_payment_btn.setTextColor(Color.parseColor(cancelColour));
+
+
+
+        cancel_payment_btn.setOnClickListener(new View.OnClickListener() {
+            @Override
+            public void onClick(View v) {
+                onBackPressed();
+            }
+        });
+
+        // Configure the WebView
+        WebSettings webSettings = webView.getSettings();
+        webSettings.setJavaScriptEnabled(true);
+        webSettings.setLoadWithOverviewMode(true);
+        webSettings.setUseWideViewPort(true);
+
+        webSettings.setJavaScriptEnabled(true);
+        webSettings.setLoadWithOverviewMode(true);
+        webSettings.setUseWideViewPort(false);
+        webSettings.setSupportZoom(true);
+        webSettings.setBuiltInZoomControls(false);
+        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);
+        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
+        webSettings.setDomStorageEnabled(true);
+        webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
+
+        webView.setFocusable(true);
+        webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
+
+        String url          = getIntent().getStringExtra("url");
+        String returnURL    = getIntent().getStringExtra("returnURL");
+
+        webView.setWebViewClient(new WebViewClient() {
+            @Override
+            public void onPageStarted(WebView view, String url, Bitmap favicon) {
+                super.onPageStarted(view, url, favicon);
+                loadingWebview.setVisibility(View.VISIBLE); // Show progress bar
+            }
+
+            @Override
+            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
+                String url = request.getUrl().toString();
+                if (url.contains(returnURL)) {
+                    Uri uri = Uri.parse(url);
+                    String id           = uri.getQueryParameter("id");
+                    String statusId     = uri.getQueryParameter("statusId");
+                    String status       = uri.getQueryParameter("status");
+                    String transId      = uri.getQueryParameter("transId");
+                    String custom1      = uri.getQueryParameter("custom1");
+
+                    SkipcashReactnativeModule.handleNativeWebViewData(id, statusId, status, transId, custom1);
+
+                    finish();
+                }
+
+                return true;
+            }
+
+            @Override
+            public void onPageFinished(WebView view, String url) {
+                super.onPageFinished(view, url);
+                loadingWebview.setVisibility(View.GONE);
+                webView.scrollTo(0, webView.getContentHeight());
+            }
+        });
+
+
+        if (url != null) {
+            webView.loadUrl(url);
+        }
+    }
+}