payment working

Satora1 · Oct 28, 2024 · 84acbe5 · 84acbe5
1 parent 3687a38
commit 84acbe5
Showing 1 changed file with 118 additions and 62 deletions.
diff --git a/components/Payment.tsx b/components/Payment.tsx
@@ -1,5 +1,5 @@
 import { useAuth } from "@clerk/clerk-expo";
-import { PaymentMethod, useStripe } from "@stripe/stripe-react-native";
+import { useStripe } from "@stripe/stripe-react-native";
 import { router } from "expo-router";
 import React, { useState } from "react";
 import { Alert, Image, Text, View } from "react-native";
@@ -10,58 +10,36 @@ import { images } from "@/constants";
 import { fetchAPI } from "@/lib/fetch";
 import { useLocationStore } from "@/store";
 import { PaymentProps } from "@/types/type";
-import { shouldUseActivityState } from "react-native-screens";
 
 const Payment = ({
   fullName,
   email,
   amount,
   driverId,
-  rideTime
+  rideTime,
 }: PaymentProps) => {
   const { initPaymentSheet, presentPaymentSheet } = useStripe();
-  const [success, setSuccess] = useState(false);
-
-  const confirmHandler = async (paymentMethod, _, intentCreationCallback) => {
-    const { paymentIntent, customer } = await fetchAPI(
-      "/(api)/(stripe)/create",
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          name: fullName || email.split("@")[0],
-          email: email,
-          amount: amount,
-          PaymentMethod: paymentMethod.id,
-        }),
-      }
-    );
-
-    if (paymentIntent?.client_secret) {
-      const result = await fetchAPI("/(api)/(stripe)/pay", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          payment_method_id: paymentMethod.id,
-          payment_intent_id: paymentIntent.id,
-          customer_id: customer,
-        }),
-      });
-
-if(result.client_secret){
-
-}
-
-      const { clientSecret, error } = await result.json();
-      if (clientSecret) {
-        intentCreationCallback({ clientSecret });
-      } else {
-        intentCreationCallback({ error });
-      }
+  const {
+    userAddress,
+    userLongitude,
+    userLatitude,
+    destinationLatitude,
+    destinationAddress,
+    destinationLongitude,
+  } = useLocationStore();
+
+  const { userId } = useAuth();
+  const [success, setSuccess] = useState<boolean>(false);
+
+  const openPaymentSheet = async () => {
+    await initializePaymentSheet();
+
+    const { error } = await presentPaymentSheet();
+
+    if (error) {
+      Alert.alert(`Error code: ${error.code}`, error.message);
+    } else {
+      setSuccess(true);
     }
   };
 
@@ -70,26 +48,77 @@ if(result.client_secret){
       merchantDisplayName: "Example, Inc.",
       intentConfiguration: {
         mode: {
-          amount: 1990,
-          currencyCode: "USD",
+          amount: parseInt(amount) * 100,
+          currencyCode: "usd",
         },
-        confirmHandler: confirmHandler,
-      },
-    });
+        confirmHandler: async (
+          paymentMethod,
+          shouldSavePaymentMethod,
+          intentCreationCallback,
+        ) => {
+          const { paymentIntent, customer } = await fetchAPI(
+            "/(api)/(stripe)/create",
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                name: fullName || email.split("@")[0],
+                email: email,
+                amount: amount,
+                paymentMethodId: paymentMethod.id,
+              }),
+            },
+          );
 
-    if (error) {
-      Alert.alert("Payment initialization error", error.message);
-    }
-  };
+          if (paymentIntent.client_secret) {
+            const { result } = await fetchAPI("/(api)/(stripe)/pay", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                payment_method_id: paymentMethod.id,
+                payment_intent_id: paymentIntent.id,
+                customer_id: customer,
+                client_secret: paymentIntent.client_secret,
+              }),
+            });
 
-  const openPaymentSheet = async () => {
-    await initializePaymentSheet();
+            if (result.client_secret) {
+              await fetchAPI("/(api)/ride/create", {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                  origin_address: userAddress,
+                  destination_address: destinationAddress,
+                  origin_latitude: userLatitude,
+                  origin_longitude: userLongitude,
+                  destination_latitude: destinationLatitude,
+                  destination_longitude: destinationLongitude,
+                  ride_time: rideTime.toFixed(0),
+                  fare_price: parseInt(amount) * 100,
+                  payment_status: "paid",
+                  driver_id: driverId,
+                  user_id: userId,
+                }),
+              });
 
-    const { error } = await presentPaymentSheet();
-    if (error) {
-      Alert.alert(`Error code: ${error.code}`, error.message);
-    } else {
-      setSuccess(true);
+              intentCreationCallback({
+                clientSecret: result.client_secret,
+              });
+            }
+          }
+        },
+      },
+      returnURL: "myapp://book-ride",
+    });
+
+    if (!error) {
+      // setLoading(true);
     }
   };
 
@@ -100,8 +129,35 @@ if(result.client_secret){
         className="my-10"
         onPress={openPaymentSheet}
       />
+
+      <ReactNativeModal
+        isVisible={success}
+        onBackdropPress={() => setSuccess(false)}
+      >
+        <View className="flex flex-col items-center justify-center bg-white p-7 rounded-2xl">
+          <Image source={images.check} className="w-28 h-28 mt-5" />
+
+          <Text className="text-2xl text-center font-JakartaBold mt-5">
+            Booking placed successfully
+          </Text>
+
+          <Text className="text-md text-general-200 font-JakartaRegular text-center mt-3">
+            Thank you for your booking. Your reservation has been successfully
+            placed. Please proceed with your trip.
+          </Text>
+
+          <CustomButton
+            title="Back Home"
+            onPress={() => {
+              setSuccess(false);
+              router.push("/(root)/(tabs)/home");
+            }}
+            className="mt-5"
+          />
+        </View>
+      </ReactNativeModal>
     </>
   );
 };
 
-export default Payment;
+export default Payment;