Payment Added

Routes/OnlinePaymentRoute.js

@@ -0,0 +1,26 @@
+const express = require("express");
+const route = express.Router();
+
+const stripe = require("stripe")(
+  "sk_test_51OHNVKSIijB4dZ7nKK4yvDBMBrAfT0BXzCQxRJzGTVnxU3ooA4lz3cd89uvFA52xpk2nq7bXwDdkWYuVm6wiPLjP00ErldxvkT"
+);
+
+route.post("/intent", async (req, res) => {
+  try {
+    const paymentIntent = await stripe.paymentIntents.create({
+      amount: req.body.amount,
+      currency: "usd",
+      automatic_payment_methods: {
+        enabled: true,
+      },
+    });
+
+    res.json({ paymentIntent: paymentIntent.client_secret });
+  } catch (e) {
+    res.status(400).json({
+      error: e.message,
+    });
+  }
+});
+
+module.exports = route;

client-app/App.js

@@ -9,6 +9,7 @@ import { NavigationContainer } from "@react-navigation/native";
 import Main from "./screens/General/Main";
 import { PermissionsAndroid } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import { StripeProvider } from "@stripe/stripe-react-native";
 LogBox.ignoreLogs([
   'Key "cancelled" in the image picker result is deprecated and will be removed in SDK 48, use "canceled" instead',
   "ViewPropTypes will be removed from React Native, along with all other PropTypes. We recommend that you migrate away from PropTypes and switch to a type system like TypeScript. If you need to continue using ViewPropTypes, migrate to the 'deprecated-react-native-prop-types' package.",
@@ -28,12 +29,17 @@ const Network1 = ({ navigation }) => {
   return <Main />;
 };
 
+const STRIPE_KEY =
+  "pk_test_51OHNVKSIijB4dZ7nuHBY1SWlQ8Jk0s0vVK5MMqy2fA81z0SfazlNSqilcLW4Do6bBpiKaM1PTDZ8sTdyGDUURdG400nSDgpU2Q";
+
 export default function App() {
   return (
     <Provider store={store}>
-      <NavigationContainer>
-        <Network1 />
-      </NavigationContainer>
+      <StripeProvider publishableKey={STRIPE_KEY}>
+        <NavigationContainer>
+          <Network1 />
+        </NavigationContainer>
+      </StripeProvider>
     </Provider>
   );
 }

client-app/ipconfig.js

@@ -1 +1 @@
-export default { ip: "192.168.137.205" };
+export default { ip: "192.168.0.85" };

client-app/package.json

@@ -50,7 +50,8 @@
     "react-native-vector-icons": "^10.0.1",
     "react-native-view-shot": "3.7.0",
     "react-native-webview": "^13.2.2",
-    "react-redux": "^8.1.3"
+    "react-redux": "^8.1.3",
+    "@stripe/stripe-react-native": "0.28.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

client-app/screens/General/BookSlotDetails.js

@@ -19,6 +19,10 @@ import * as ImagePicker from "expo-image-picker";
 import mime from "mime";
 import ipconfig from "../../ipconfig";
 import Icon from "react-native-vector-icons/FontAwesome";
+import {
+  initPaymentSheet,
+  presentPaymentSheet,
+} from "@stripe/stripe-react-native";
 
 const Bookslotdetails = ({ navigation, route }) => {
   const ip = ipconfig.ip;
@@ -158,6 +162,54 @@ const Bookslotdetails = ({ navigation, route }) => {
   //   }
   // };
 
+  const paymentHandler = async () => {
+    var myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/json");
+
+    var raw = JSON.stringify({
+      amount: 10,
+    });
+
+    var requestOptions = {
+      method: "POST",
+      headers: myHeaders,
+      body: raw,
+      redirect: "follow",
+    };
+
+    const data = await fetch(
+      `http://${ip}:9999/onlinepayment/intent`,
+      requestOptions
+    );
+    const response = await data.json();
+    if (response.error) {
+      Alert.alert("Something went wrong", response.error);
+      return;
+    }
+    console.log(response);
+
+    const { error: paymentSheetError } = await initPaymentSheet({
+      merchantDisplayName: "Example, Inc.",
+      paymentIntentClientSecret: response.paymentIntent,
+      defaultBillingDetails: {
+        name: "Devam Doshi",
+      },
+    });
+    if (paymentSheetError) {
+      Alert.alert("Something went wrong", paymentSheetError.message);
+      return;
+    }
+
+    const { error: paymentError } = await presentPaymentSheet();
+
+    if (paymentError) {
+      Alert.alert(`Error code: ${paymentError.code}`, paymentError.message);
+      return;
+    }
+
+    handleSignUp();
+  };
+
   return (
     <SafeAreaProvider>
       <ScrollView contentContainerStyle={styles.scrollContainer}>
@@ -218,7 +270,7 @@ const Bookslotdetails = ({ navigation, route }) => {
             />
 
             {errormsg && <Text style={styles.errorText}>{errormsg}</Text>}
-            <TouchableOpacity style={styles.button} onPress={handleSignUp}>
+            <TouchableOpacity style={styles.button} onPress={paymentHandler}>
               <Text style={styles.buttonText}>Confirm Your Slot</Text>
             </TouchableOpacity>
           </View>

package.json

@@ -21,6 +21,7 @@
     "multer": "^1.4.5-lts.1",
     "node-cron": "^3.0.3",
     "nodemailer": "^6.9.7",
+    "stripe": "^14.5.0",
     "validator": "^13.11.0"
   }
 }

server.js

@@ -30,6 +30,7 @@ const UpdatesController = require("./Controller/UpdatesController");
 const UpdatesImageController = require("./Controller/UpdatesImageController");
 const UtilizationController = require("./Controller/UtilizationController");
 const GuestController = require("./Controller/GuestController");
+const OnlinePaymentRouter = require("./Routes/OnlinePaymentRoute");
 
 const {
   filtersportsforcomplex,
@@ -439,5 +440,6 @@ app.get("/getGuest", GuestController.getAllUsers);
 app.get("/gettimeslotforguest", GuestController.gettimeslotfrominstructor);
 app.get("/getPaymentTimeslotCount", PaymentController.getPaymentTimeslotCount);
 
+app.use("/onlinepayment", OnlinePaymentRouter);
 app.listen(9999);
 console.log("server started at 9999");