stripe payment integrated

app/(api)/(stripe)/create+api.ts

@@ -32,7 +32,7 @@ export async function POST(req: Request) {
 
     const paymentIntent = await stripe.paymentIntents.create({
       amount: parseInt(amount) * 100,
-      currency: "usd",
+      currency: "USD",
       customer: customer.id,
       automatic_payment_methods: {
         enabled: true,

app/(root)/book-ride.tsx

@@ -1,11 +1,15 @@
+import { useUser } from "@clerk/clerk-expo";
+import { StripeProvider } from "@stripe/stripe-react-native";
 import { Image, Text, View } from "react-native";
 
+import { Payment } from "@/components/payment";
 import { RideLayout } from "@/components/ride-layout";
 import { icons } from "@/constants";
 import { formatTime } from "@/lib/utils";
 import { useDriverStore, useLocationStore } from "@/store";
 
 const BookRide = () => {
+  const { user } = useUser();
   const { userAddress, destinationAddress } = useLocationStore();
   const { drivers, selectedDriver } = useDriverStore();
 
@@ -14,84 +18,98 @@ const BookRide = () => {
   )[0];
 
   return (
-    <RideLayout title="Book Ride">
+    <StripeProvider
-      <>
+      publishableKey={process.env.EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY!}
-        <Text className="text-xl font-JakartaSemiBold mb-3">
+      merchantIdentifier="merchant.ryde.com"
-          Ride Information
+      urlScheme="ryde" // match it with app.json scheme
-        </Text>
+    >
+      <RideLayout title="Book Ride">
+        <>
+          <Text className="text-xl font-JakartaSemiBold mb-3">
+            Ride Information
+          </Text>
 
-        <View className="flex flex-col w-full items-center justify-center mt-10">
+          <View className="flex flex-col w-full items-center justify-center mt-10">
-          <Image
+            <Image
-            source={{ uri: driverDetails?.profile_image_url }}
+              source={{ uri: driverDetails?.profile_image_url }}
-            alt="Driver Avatar"
+              alt="Driver Avatar"
-            className="w-28 h-28 rounded-full"
+              className="w-28 h-28 rounded-full"
-          />
+            />
 
-          <View className="flex flex-row items-center justify-center mt-5 space-x-2">
+            <View className="flex flex-row items-center justify-center mt-5 space-x-2">
-            <Text className="text-lg font-JakartaSemiBold">
+              <Text className="text-lg font-JakartaSemiBold">
-              {driverDetails?.title}
+                {driverDetails?.title}
-            </Text>
+              </Text>
 
-            <View className="flex flex-row items-center space-x-0.5">
+              <View className="flex flex-row items-center space-x-0.5">
-              <Image
+                <Image
-                source={icons.star}
+                  source={icons.star}
-                alt="Star"
+                  alt="Star"
-                className="w-5 h-5"
+                  className="w-5 h-5"
-                resizeMode="contain"
+                  resizeMode="contain"
-              />
+                />
+
+                <Text className="text-lg font-JakartaRegular">
+                  {driverDetails?.rating}
+                </Text>
+              </View>
+            </View>
+          </View>
+
+          <View className="flex flex-col w-full items-start justify-center py-3 px-5 rounded-3xl bg-general-600 mt-5">
+            <View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
+              <Text className="text-lg font-JakartaRegular">Ride Price</Text>
+
+              <Text className="text-lg font-JakartaRegular text-[#0CC25F]">
+                ${driverDetails?.price}
+              </Text>
+            </View>
+
+            <View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
+              <Text className="text-lg font-JakartaRegular">Pickup Time</Text>
 
               <Text className="text-lg font-JakartaRegular">
-                {driverDetails?.rating}
+                {formatTime(driverDetails?.time!)}
+              </Text>
+            </View>
+
+            <View className="flex flex-row items-center justify-between w-full py-3">
+              <Text className="text-lg font-JakartaRegular">Car Seats</Text>
+
+              <Text className="text-lg font-JakartaRegular">
+                {driverDetails?.car_seats}
               </Text>
             </View>
           </View>
-        </View>
 
-        <View className="flex flex-col w-full items-start justify-center py-3 px-5 rounded-3xl bg-general-600 mt-5">
+          <View className="flex flex-col w-full items-start justify-center mt-5">
-          <View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
+            <View className="flex flex-row items-center justify-start mt-3 border-t border-b border-general-700 w-full py-3">
-            <Text className="text-lg font-JakartaRegular">Ride Price</Text>
+              <Image source={icons.to} className="w-6 h-6" />
 
-            <Text className="text-lg font-JakartaRegular text-[#0CC25F]">
+              <Text className="text-lg font-JakartaRegular ml-2">
-              ${driverDetails?.price}
+                {userAddress}
-            </Text>
+              </Text>
+            </View>
+
+            <View className="flex flex-row items-center justify-start border-b border-general-700 w-full py-3">
+              <Image source={icons.point} className="w-6 h-6" />
+
+              <Text className="text-lg font-JakartaRegular ml-2">
+                {destinationAddress}
+              </Text>
+            </View>
           </View>
 
-          <View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
+          <Payment
-            <Text className="text-lg font-JakartaRegular">Pickup Time</Text>
+            fullName={user?.fullName ?? ""}
-
+            email={user?.emailAddresses[0].emailAddress ?? ""}
-            <Text className="text-lg font-JakartaRegular">
+            amount={driverDetails?.price ?? "0"}
-              {formatTime(driverDetails?.time!)}
+            driverId={driverDetails?.id}
-            </Text>
+            rideTime={driverDetails?.time ?? 0}
-          </View>
+          />
-
+        </>
-          <View className="flex flex-row items-center justify-between w-full py-3">
+      </RideLayout>
-            <Text className="text-lg font-JakartaRegular">Car Seats</Text>
+    </StripeProvider>
-
-            <Text className="text-lg font-JakartaRegular">
-              {driverDetails?.car_seats}
-            </Text>
-          </View>
-        </View>
-
-        <View className="flex flex-col w-full items-start justify-center mt-5">
-          <View className="flex flex-row items-center justify-start mt-3 border-t border-b border-general-700 w-full py-3">
-            <Image source={icons.to} className="w-6 h-6" />
-
-            <Text className="text-lg font-JakartaRegular ml-2">
-              {userAddress}
-            </Text>
-          </View>
-
-          <View className="flex flex-row items-center justify-start border-b border-general-700 w-full py-3">
-            <Image source={icons.point} className="w-6 h-6" />
-
-            <Text className="text-lg font-JakartaRegular ml-2">
-              {destinationAddress}
-            </Text>
-          </View>
-        </View>
-      </>
-    </RideLayout>
   );
 };
 

components/payment.tsx

@@ -0,0 +1,170 @@
+import { useAuth } from "@clerk/clerk-expo";
+import { PaymentSheetError, useStripe } from "@stripe/stripe-react-native";
+import type { Result } from "@stripe/stripe-react-native/lib/typescript/src/types/PaymentMethod";
+import type { IntentCreationCallbackParams } from "@stripe/stripe-react-native/lib/typescript/src/types/PaymentSheet";
+import { router } from "expo-router";
+import { useState } from "react";
+import { Alert, Image, Text, View } from "react-native";
+import ReactNativeModal from "react-native-modal";
+
+import { images } from "@/constants";
+import { fetchAPI } from "@/lib/fetch";
+import { useLocationStore } from "@/store";
+import type { PaymentProps } from "@/types/type";
+
+import { CustomButton } from "./custom-button";
+
+export const Payment = ({
+  fullName,
+  email,
+  amount,
+  driverId,
+  rideTime,
+}: PaymentProps) => {
+  const {
+    userAddress,
+    userLongitude,
+    userLatitude,
+    destinationLatitude,
+    destinationAddress,
+    destinationLongitude,
+  } = useLocationStore();
+  const { userId } = useAuth();
+  const { initPaymentSheet, presentPaymentSheet } = useStripe();
+  const [success, setSuccess] = useState(false);
+
+  const confirmHandler = async (
+    paymentMethod: Result,
+    _shouldSavePaymentMethod: boolean,
+    intentCreationCallback: (result: IntentCreationCallbackParams) => void,
+  ) => {
+    const { paymentIntent, customer } = await fetchAPI(
+      "/(api)/(stripe)/create",
+      {
+        method: "POST",
+        headers: {
+          "Content-type": "application/json",
+        },
+        body: JSON.stringify({
+          name: fullName || email,
+          email,
+          amount,
+          paymentMethodId: 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) {
+        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, // in cents
+            payment_status: "paid",
+            driver_id: driverId,
+            user_id: userId,
+          }),
+        });
+
+        intentCreationCallback({
+          clientSecret: result.client_secret,
+        });
+      }
+    }
+  };
+
+  const initializePaymentSheet = async () => {
+    const { error } = await initPaymentSheet({
+      merchantDisplayName: "Ryde, Inc.",
+      intentConfiguration: {
+        mode: {
+          amount: parseInt(amount) * 100,
+          currencyCode: "USD",
+        },
+        confirmHandler,
+      },
+      style: "alwaysLight",
+      returnURL: "ryde://book-ride", // make sure protocol matches scheme in app.json
+    });
+
+    if (error) {
+      Alert.alert(
+        "Error",
+        "Something went wrong while initializing your payment. Please try again.",
+      );
+    }
+  };
+
+  const openPaymentSheet = async () => {
+    await initializePaymentSheet();
+
+    const { error } = await presentPaymentSheet();
+
+    if (error) {
+      if (error.code !== PaymentSheetError.Canceled)
+        Alert.alert(`Error code: ${error.code}`, error.message);
+    } else {
+      setSuccess(true);
+    }
+  };
+
+  return (
+    <>
+      <CustomButton
+        title="Confirm ride"
+        className="my-2"
+        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} alt="Check" className="w-28 h-28 mt-5" />
+
+          <Text className="text-2xl text-center font-JakartaBold mt-5">
+            Ride Booked!
+          </Text>
+
+          <Text className="text-base text-general-200 text-JakartaMedium text-center mt-3">
+            Thank you for your booking.{"\n"} Your reservation has been placed.
+            {"\n"}
+            Please proceed with your trip.
+          </Text>
+
+          <CustomButton
+            title="Back Home"
+            onPress={() => {
+              setSuccess(false);
+              router.push("/(root)/(tabs)/home");
+            }}
+            className="mt-5"
+          />
+        </View>
+      </ReactNativeModal>
+    </>
+  );
+};