Skip to content

Commit

Permalink
working payment
Browse files Browse the repository at this point in the history
  • Loading branch information
Satora1 committed Oct 25, 2024
1 parent 91e650b commit 4a62d85
Show file tree
Hide file tree
Showing 5 changed files with 180 additions and 71 deletions.
4 changes: 3 additions & 1 deletion .env.local
Original file line number Diff line number Diff line change
Expand Up @@ -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
EXPO_PUBLIC_GOOGLE_API_KEY=AIzaSyAtzhYhtLxlG6mUS7yU4a_Rc6bhH3LbRfQ
EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51OzgORE0pUkkvtE2gKOA7ptlY81BrFBH4h78FZZxPb7S4JGPZ7L0VTEkxe7GK12CBCZRRu6ttnzbtgPF0UWMVyd100IVMuhp7E
STRIPE_SECRET_KEY=sk_test_51OzgORE0pUkkvtE23S2IlkRFY8hpAK7DO7jy26pN4dlvvUpG3YgA7CTFkcBUomOF55JCDcFJ0WhdRGhf4radWcr300AF0SNfsi
145 changes: 75 additions & 70 deletions app/(root)/book-ride.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<RideLayout title="Book Ride">
<>
<Text className="text-xl font-JakartaSemiBold mb-3">
Ride Information
</Text>
<StripeProvider
publishableKey={process.env.EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY!}
merchantIdentifier="merchant.com.uber"
urlScheme="myapp"
>
<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">
<Image
source={{uri: driverDetails?.profile_image_url}}
className="w-28 h-28 rounded-full"
/>
<View className="flex flex-col w-full items-center justify-center mt-10">
<Image
source={{ uri: driverDetails?.profile_image_url }}
className="w-28 h-28 rounded-full"
/>

<View className="flex flex-row items-center justify-center mt-5 space-x-2">
<Text className="text-lg font-JakartaSemiBold">
{driverDetails?.title}
</Text>

<View className="flex flex-row items-center space-x-0.5">
<Image
source={icons.star}
className="w-5 h-5"
resizeMode="contain"
/>
<Text className="text-lg font-JakartaRegular">
{driverDetails?.rating}
<View className="flex flex-row items-center justify-center mt-5 space-x-2">
<Text className="text-lg font-JakartaSemiBold">
{driverDetails?.title}
</Text>

<View className="flex flex-row items-center space-x-0.5">
<Image
source={icons.star}
className="w-5 h-5"
resizeMode="contain"
/>
<Text className="text-lg font-JakartaRegular">
{driverDetails?.rating}
</Text>
</View>
</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-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">
{formatTime(driverDetails?.time!)}
</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">
{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 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 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-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 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>
</>
</RideLayout>
<Payment />
</>
</RideLayout>
</StripeProvider>
);
};

Expand Down
57 changes: 57 additions & 0 deletions components/Payment.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<>
<CustomButton
title="Confirm Ride"
className="my-10"
onPress={openPaymentSheet}
/>
</>
)
}

export default Payment
43 changes: 43 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
},
Expand Down

0 comments on commit 4a62d85

Please sign in to comment.