diff --git a/.env.local b/.env.local index 76801cc..6620dd2 100644 --- a/.env.local +++ b/.env.local @@ -2,4 +2,6 @@ EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_cHJvbXB0LW1hZ2dvdC02MC5jbGVyay5hY2NvdW DATABASE_URL=postgresql://ryde_owner:0OwLX1QrRPqT@ep-rapid-water-a2owt30g.eu-central-1.aws.neon.tech/ryde?sslmode=require EXPO_PUBLIC_SERVER_URL=https://uber.dev/ EXPO_PUBLIC_GEOAPIFY_API_KEY=3cee4c13411d467c8357a8eca4aa99d7 -EXPO_PUBLIC_GOOGLE_API_KEY=AIzaSyAtzhYhtLxlG6mUS7yU4a_Rc6bhH3LbRfQ \ No newline at end of file +EXPO_PUBLIC_GOOGLE_API_KEY=AIzaSyAtzhYhtLxlG6mUS7yU4a_Rc6bhH3LbRfQ +EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51OzgORE0pUkkvtE2gKOA7ptlY81BrFBH4h78FZZxPb7S4JGPZ7L0VTEkxe7GK12CBCZRRu6ttnzbtgPF0UWMVyd100IVMuhp7E +STRIPE_SECRET_KEY=sk_test_51OzgORE0pUkkvtE23S2IlkRFY8hpAK7DO7jy26pN4dlvvUpG3YgA7CTFkcBUomOF55JCDcFJ0WhdRGhf4radWcr300AF0SNfsi \ No newline at end of file diff --git a/app/(root)/book-ride.tsx b/app/(root)/book-ride.tsx index 053868e..3ea470b 100644 --- a/app/(root)/book-ride.tsx +++ b/app/(root)/book-ride.tsx @@ -1,95 +1,100 @@ -import {useUser} from "@clerk/clerk-expo"; -import {Image, Text, View} from "react-native"; +import { useUser } from "@clerk/clerk-expo"; +import { StripeProvider } from "@stripe/stripe-react-native"; +import { Image, Text, View } from "react-native"; -import {icons} from "@/constants"; -import {formatTime} from "@/lib/utils"; -import {useDriverStore, useLocationStore} from "@/store"; +import Payment from "@/components/Payment"; import RideLayout from "@/components/RideLayout"; +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(); + const { user } = useUser(); + const { userAddress, destinationAddress } = useLocationStore(); + const { drivers, selectedDriver } = useDriverStore(); const driverDetails = drivers?.filter( (driver) => +driver.id === selectedDriver, )[0]; - console.log({drivers})// -console.log({selectedDriver}) return ( - - <> - - Ride Information - + + + <> + + Ride Information + - - + + - - - {driverDetails?.title} - - - - - - {driverDetails?.rating} + + + {driverDetails?.title} + + + + + {driverDetails?.rating} + + - - - - Ride Price - - ${driverDetails?.price} - - + + + Ride Price + + ${driverDetails?.price} + + - - Pickup Time - - {formatTime(driverDetails?.time!)} - - + + Pickup Time + + {formatTime(driverDetails?.time!)} + + - - Car Seats - - {driverDetails?.car_seats} - + + Car Seats + + {driverDetails?.car_seats} + + - - - - - - {userAddress} - - + + + + + {userAddress} + + - - - - {destinationAddress} - + + + + {destinationAddress} + + - - - + + + + ); }; diff --git a/components/Payment.tsx b/components/Payment.tsx new file mode 100644 index 0000000..a6123cd --- /dev/null +++ b/components/Payment.tsx @@ -0,0 +1,57 @@ +import { useAuth } from "@clerk/clerk-expo"; +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"; +import { ReactNativeModal } from "react-native-modal"; + +import CustomButton from "@/components/CustomButton"; +import { images } from "@/constants"; +import { fetchAPI } from "@/lib/fetch"; +import { useLocationStore } from "@/store"; +import { PaymentProps } from "@/types/type"; + +const Payment = () => { + const { initPaymentSheet, presentPaymentSheet } = useStripe() + const [success, setSuccess] = useState(false) + + const initializePaymentSheet = async () => { + const { error } = await initPaymentSheet({ + merchantDisplayName: "Example,Inc.", + intentConfiguration: { + mode: { + amount: 1990, + currencyCode: "USD" + }, + confirmHandler: confirmHandler + } + }) + + } + const confirmHandler = async () => { + + } + const openPaymentSheet = async () => { + await initializePaymentSheet(); + + const { error } = await presentPaymentSheet(); + + if (error) { + Alert.alert(`Error code: ${error.code}`, error.message); + } else { + setSuccess(true); + } + }; + + return ( + <> + + + ) +} + +export default Payment \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 937609e..794c7db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@gorhom/bottom-sheet": "^5.0.4", "@neondatabase/serverless": "^0.9.5", "@react-navigation/native": "^6.0.2", + "@stripe/stripe-react-native": "^0.39.0", "expo": "~51.0.28", "expo-constants": "~16.0.2", "expo-font": "~12.0.9", @@ -40,6 +41,7 @@ "react-native-screens": "3.31.1", "react-native-swiper": "^1.6.0", "react-native-web": "~0.19.10", + "stripe": "^17.2.1", "uuid": "^10.0.0", "zustand": "^5.0.0-rc.2" }, @@ -7268,6 +7270,21 @@ "@sinonjs/commons": "^3.0.0" } }, + "node_modules/@stripe/stripe-react-native": { + "version": "0.39.0", + "resolved": "https://registry.npmjs.org/@stripe/stripe-react-native/-/stripe-react-native-0.39.0.tgz", + "integrity": "sha512-KcsEQYsc3w2aGVVZ+jUKyuJiAkrWljEnomjcWaApVmthChXX46ComiSYM+n5uSPtkVnt7z2H4LfHVgdEzs627A==", + "peerDependencies": { + "expo": ">=46.0.9", + "react": "*", + "react-native": "*" + }, + "peerDependenciesMeta": { + "expo": { + "optional": true + } + } + }, "node_modules/@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -19862,6 +19879,32 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/stripe": { + "version": "17.2.1", + "resolved": "https://registry.npmjs.org/stripe/-/stripe-17.2.1.tgz", + "integrity": "sha512-Mwb0SitV/UjxTLSUiTlUQ0VDE/gfyQ7OHDGdvDdvKIH4CNNqobPKlzlWhoZHFFU0OA/YsZyBtPULK4JG86BAAg==", + "dependencies": { + "@types/node": ">=8.1.0", + "qs": "^6.11.0" + }, + "engines": { + "node": ">=12.*" + } + }, + "node_modules/stripe/node_modules/qs": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", + "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", + "dependencies": { + "side-channel": "^1.0.6" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/strnum": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz", diff --git a/package.json b/package.json index b95dbe9..5ef65f4 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@gorhom/bottom-sheet": "^5.0.4", "@neondatabase/serverless": "^0.9.5", "@react-navigation/native": "^6.0.2", + "@stripe/stripe-react-native": "^0.39.0", "expo": "~51.0.28", "expo-constants": "~16.0.2", "expo-font": "~12.0.9", @@ -47,6 +48,7 @@ "react-native-screens": "3.31.1", "react-native-swiper": "^1.6.0", "react-native-web": "~0.19.10", + "stripe": "^17.2.1", "uuid": "^10.0.0", "zustand": "^5.0.0-rc.2" },