berfore pay error

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

@@ -1,6 +1,6 @@
 import {Stripe} from "stripe";
 
-const stripe = new Stripe(process.env.STRIPE_SERCET_KEY!);
+const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
 export async function POST(request:Request) {
     const body = await request.json();
     const { name, email, amount} = body;
@@ -21,11 +21,11 @@ export async function POST(request:Request) {
 
     const ephemeralKey = await stripe.ephemeralKeys.create(
         {customer: customer.id},
-        {apiVersion: '2025-03-31.basil'}
+        {apiVersion: "2023-03-16"}
       );
       const paymentIntent = await stripe.paymentIntents.create({
         amount: parseInt(amount) * 100,
-        currency: 'usd',
+        currency: "usd",
         customer: customer.id,
         automatic_payment_methods: {
           enabled: true,
@@ -34,7 +34,8 @@ export async function POST(request:Request) {
       });
     
       return new Response(JSON.stringify({
-        paymentIntent: paymentIntent.client_secret,
+        paymentIntent: { id:paymentIntent.id,
+          client_secret:paymentIntent.client_secret},
         ephemeralKey: ephemeralKey.secret,
         customer: customer.id,
       }),

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

@@ -18,7 +18,9 @@ export async function POST(request:Request) {
     return new Response (
         JSON.stringify({
             success:true,
-            message:"Payment confirmed successfully",result:result,
+            message:"Payment confirmed successfully",
+            client_secret:result.client_secret,
+            result,
         }),
     );
    } catch (error) {

components/Map.tsx

@@ -60,7 +60,7 @@ const Map = () => {
       {destinationLatitude && destinationLongitude && (
         <>
         <Marker key="destination" coordinate={{latitude:destinationLatitude,longitude:destinationLongitude}} title="Destination" image={icons.pin} />
-        <MapViewDirections origin={{latitude:userLatitude!,longitude:userLongitude!,}} destination={{latitude:destinationLatitude,longitude:destinationLongitude,}} apikey={process.env.EXPO_PUBLIC_GOOGLE_API_KEY} strokeColor="#0286ff" strokeWidth={2} />
+        <MapViewDirections origin={{latitude:userLatitude!,longitude:userLongitude!,}} destination={{latitude:destinationLatitude,longitude:destinationLongitude,}} apikey={process.env.EXPO_PUBLIC_GOOGLE_API_KEY!} strokeColor="#0286ff" strokeWidth={2} />
         </>
       )}
     </MapView>

components/Payment.tsx

@@ -39,7 +39,8 @@ const Payment = ({fullName,email,amount,driverId,rideTime}:PaymentProps) => {
                         }),
                     },
                 );
-                 if(paymentIntent.client_sercet){
+                console.log("create response", paymentIntent);
+                 if(paymentIntent?.client_secret){
                     const {result} = await fetchAPI ("/api/stripe/pay",{
                         method:"POST",
                         headers:{
@@ -51,7 +52,8 @@ const Payment = ({fullName,email,amount,driverId,rideTime}:PaymentProps) => {
                             customer_id:customer,
                         }),
                     });
-                    if (result.client_sercet) {
+                    console.log("confirm response", result);
+                    if (result?.client_secret) {
                         await fetchAPI("/api/ride/create",{
                             method: "POST",
                             headers:{
@@ -71,9 +73,12 @@ const Payment = ({fullName,email,amount,driverId,rideTime}:PaymentProps) => {
                                 user_id:userId,
                             }),
                         });
+                        console.log("Passing to intentCreationCallback:", result.client_secret);
                         intentCreationCallback({
-                            clientSercet:result.client_secert,
+                            clientSecret:result.client_secret,
                         })
+                    } else {
+                        console.log("❌ Missing client_secret in result:", result);
                     }
                  }
                    
@@ -104,7 +109,7 @@ return (
         <View style={tw`flex flex-col items-center justify-center bg-white p-7 rounded-2xl`} >
         <Image source={images.check} style={tw`w-28 h-28 mt-5`} />
         <Text style={tw`text-2xl text-center font-JakartaBold mt-5`}>Ride Booked!</Text>
-        <Text style={tw`text-md text-general-200 f0nt-JakartaMedium`} >Thank you for your booking. Your reservation has been placed. Please proceed with your trip! </Text>
+        <Text style={tw`text-md text-general-200 font-JakartaMedium`} >Thank you for your booking. Your reservation has been placed. Please proceed with your trip! </Text>
         <CustomButton title="Back Home" onPress={()=>{setSuccess(false)
              router.push("/(root)/(tabs)/home")}} style={tw`mt-5`}  />
         </View>