Add stripe payment gateway to mobile app

aelassas · Apr 26, 2024 · f004cd2 · f004cd2
1 parent 70e2d94
commit f004cd2
Show file tree

Hide file tree

Showing 13 changed files with 259 additions and 376 deletions.
diff --git a/api/tests/booking.test.ts b/api/tests/booking.test.ts
@@ -201,7 +201,7 @@ describe('POST /api/checkout', () => {
       currency: 'usd',
       receiptEmail,
       customerName: 'John Doe',
-      description: 'BookCars Booking Service',
+      description: 'BookCars Web Service',
     }
     res = await request(app)
       .post('/api/create-payment-intent')

diff --git a/frontend/src/pages/Checkout.tsx b/frontend/src/pages/Checkout.tsx
@@ -517,7 +517,7 @@ const Checkout = () => {
           // Must be a supported currency: https://docs.stripe.com/currencies
           currency: commonStrings.CURRENCY === '$' ? 'usd' : commonStrings.CURRENCY === '€' ? 'eur' : '',
           receiptEmail: (!authenticated ? driver?.email : user?.email) as string,
-          description: 'BookCars Booking Service',
+          description: 'BookCars Web Service',
           customerName: (!authenticated ? driver?.fullName : user?.fullName) as string,
         }
 

diff --git a/mobile/.env.example b/mobile/.env.example
@@ -10,3 +10,4 @@ BC_SUPPLIER_IMAGE_HEIGHT=30
 BC_CAR_IMAGE_WIDTH=300
 BC_CAR_IMAGE_HEIGHT=200
 BC_MINIMUM_AGE=21
+BC_STRIPE_PUBLISHABLE_KEY=STRIPE_PUBLISHABLE_KEY
diff --git a/mobile/App.tsx b/mobile/App.tsx
@@ -7,11 +7,13 @@ import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { Provider } from 'react-native-paper'
 import * as SplashScreen from 'expo-splash-screen'
 import * as Notifications from 'expo-notifications'
+import { StripeProvider } from '@stripe/stripe-react-native'
 import DrawerNavigator from './components/DrawerNavigator'
 import * as helper from './common/helper'
 import * as NotificationService from './services/NotificationService'
 import * as UserService from './services/UserService'
 import { GlobalProvider } from './context/GlobalContext'
+import * as env from './config/env.config'
 
 Notifications.setNotificationHandler({
   handleNotification: async () => ({
@@ -97,12 +99,14 @@ const App = () => {
     <GlobalProvider>
       <SafeAreaProvider>
         <Provider>
-          <RootSiblingParent>
-            <NavigationContainer ref={navigationRef} onReady={onReady}>
-              <ExpoStatusBar style="light" backgroundColor="rgba(0, 0, 0, .9)" />
-              <DrawerNavigator />
-            </NavigationContainer>
-          </RootSiblingParent>
+          <StripeProvider publishableKey={env.STRIPE_PUBLISHABLE_KEY}>
+            <RootSiblingParent>
+              <NavigationContainer ref={navigationRef} onReady={onReady}>
+                <ExpoStatusBar style="light" backgroundColor="rgba(0, 0, 0, .9)" />
+                <DrawerNavigator />
+              </NavigationContainer>
+            </RootSiblingParent>
+          </StripeProvider>
         </Provider>
       </SafeAreaProvider>
     </GlobalProvider>

diff --git a/mobile/app.json b/mobile/app.json
@@ -5,7 +5,9 @@
     "version": "3.5.0",
     "slug": "bookcars",
     "icon": "./assets/icon.png",
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "splash": {
       "backgroundColor": "#f37022",
       "image": "./assets/splash.png"
@@ -34,7 +36,17 @@
       },
       "bundleIdentifier": "com.bookcars"
     },
-    "plugins": ["expo-localization", "./plugins/usesCleartextTraffic"],
+    "plugins": [
+      "expo-localization",
+      "./plugins/usesCleartextTraffic",
+      [
+        "@stripe/stripe-react-native",
+        {
+          "merchantIdentifier": "MERCHANT_IDENTIFIER",
+          "enableGooglePay": false
+        }
+      ]
+    ],
     "owner": "aelassas",
     "extra": {
       "eas": {
@@ -46,6 +58,6 @@
     },
     "experiments": {
       "tsconfigPaths": true
-     }
+    }
   }
 }
diff --git a/mobile/config/env.config.ts b/mobile/config/env.config.ts
@@ -11,6 +11,7 @@ import {
   BC_CAR_IMAGE_WIDTH,
   BC_CAR_IMAGE_HEIGHT,
   BC_MINIMUM_AGE,
+  BC_STRIPE_PUBLISHABLE_KEY
 } from '@env'
 
 /**
@@ -148,3 +149,10 @@ export const CAR_IMAGE_HEIGHT: number = Number.parseInt(BC_CAR_IMAGE_HEIGHT, 10)
  * @type {number}
  */
 export const MINIMUM_AGE: number = Number.parseInt(BC_MINIMUM_AGE, 10) || 21
+
+/**
+ * Stripe Publishable Key.
+ *
+ * @type {string}
+ */
+export const STRIPE_PUBLISHABLE_KEY: string = BC_STRIPE_PUBLISHABLE_KEY
diff --git a/mobile/lang/en.ts b/mobile/lang/en.ts
@@ -159,7 +159,7 @@ export const en = {
   BOOK_NOW: 'Book now',
   SECURE_PAYMENT_INFO: 'Your data is protected by SSL secure payment.',
   CARD_DATE_ERROR: 'Invalid card date.',
-  BOOKING_SUCCESS: 'Your booking and payment were successfully done. We have sent you a confirmation email.',
+  BOOKING_SUCCESS: 'Your booking and payment were successfully done. We sent you a confirmation email.',
   BOOKING_EMAIL_ALREADY_REGISTERED: 'This email address is already registered. Please sign in.',
   EMPTY_BOOKING_LIST: 'No bookings.',
   OPTIONS: 'Options',
@@ -193,4 +193,5 @@ export const en = {
   FROM_TIME_EMPTY: 'Please enter a pickup time.',
   TO_DATE_EMPTY: 'Please enter a drop-off date.',
   TO_TIME_EMPTY: 'Please enter a drop-off time.',
+  PAYMENT_FAILED: 'Payment failed.',
 }
diff --git a/mobile/lang/fr.ts b/mobile/lang/fr.ts
@@ -193,6 +193,5 @@ export const fr = {
   FROM_TIME_EMPTY: "Veuillez saisir l'heure de prise en charge.",
   TO_DATE_EMPTY: 'Veuillez saisir la date de restitution.',
   TO_TIME_EMPTY: "Veuillez saisir l'heure de restitution.",
+  PAYMENT_FAILED: 'Paiement échoué.',
 }
-
-export default fr