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,6 +18,11 @@ const BookRide = () => {
   )[0];
 
   return (
+    <StripeProvider
+      publishableKey={process.env.EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY!}
+      merchantIdentifier="merchant.ryde.com"
+      urlScheme="ryde" // match it with app.json scheme
+    >
       <RideLayout title="Book Ride">
         <>
           <Text className="text-xl font-JakartaSemiBold mb-3">
@@ -90,8 +99,17 @@ const BookRide = () => {
               </Text>
             </View>
           </View>
+
+          <Payment
+            fullName={user?.fullName ?? ""}
+            email={user?.emailAddresses[0].emailAddress ?? ""}
+            amount={driverDetails?.price ?? "0"}
+            driverId={driverDetails?.id}
+            rideTime={driverDetails?.time ?? 0}
+          />
         </>
       </RideLayout>
+    </StripeProvider>
   );
 };
 

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>
+    </>
+  );
+};