Add Google Pay and Apple Pay to Mobile App

aelassas · May 6, 2024 · 5aa2c22 · 5aa2c22
1 parent 4336def
commit 5aa2c22
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 13 deletions.
diff --git a/frontend/.env.example b/frontend/.env.example
@@ -15,3 +15,4 @@ REACT_APP_MI_PROPERTY_IMAGE_HEIGHT=200
 REACT_APP_MI_MINIMUM_AGE=21
 REACT_APP_MI_PAGINATION_MODE=classic
 REACT_APP_MI_STRIPE_PUBLISHABLE_KEY=STRIPE_PUBLISHABLE_KEY
+REACT_APP_BC_STRIPE_CURRENCY_CODE=USD
diff --git a/frontend/src/config/env.config.ts b/frontend/src/config/env.config.ts
@@ -41,16 +41,23 @@ const env = {
   RECAPTCHA_ENABLED: (process.env.REACT_APP_MI_RECAPTCHA_ENABLED && process.env.REACT_APP_MI_RECAPTCHA_ENABLED.toLowerCase()) === 'true',
   RECAPTCHA_SITE_KEY: String(process.env.REACT_APP_MI_RECAPTCHA_SITE_KEY),
   MINIMUM_AGE: Number.parseInt(String(process.env.REACT_APP_MI_MINIMUM_AGE), 10) || 21,
-  // PAGINATION_MODE: CLASSIC or INFINITE_SCROLL
-  // If you choose CLASSIC, you will get a classic pagination with next and previous buttons on desktop and infinite scroll on mobile.
-  // If you choose INFINITE_SCROLL, you will get infinite scroll on desktop and mobile.
-  // Defaults to CLASSIC
+  /**
+  * PAGINATION_MODE: CLASSIC or INFINITE_SCROLL
+  * If you choose CLASSIC, you will get a classic pagination with next and previous buttons on desktop and infinite scroll on mobile.
+  * If you choose INFINITE_SCROLL, you will get infinite scroll on desktop and mobile.
+  * Default is CLASSIC
+  */
   PAGINATION_MODE:
     (process.env.REACT_APP_MI_PAGINATION_MODE && process.env.REACT_APP_MI_PAGINATION_MODE.toUpperCase()) === Const.PAGINATION_MODE.INFINITE_SCROLL
       ? Const.PAGINATION_MODE.INFINITE_SCROLL
       : Const.PAGINATION_MODE.CLASSIC,
   SIZE_UNIT: 'm²',
   STRIPE_PUBLISHABLE_KEY: String(process.env.REACT_APP_MI_STRIPE_PUBLISHABLE_KEY),
+  /**
+   * The three-letter ISO 4217 alphabetic currency code, e.g. "USD" or "EUR". Required for Stripe payments. Default is "USD".
+   * Must be a supported currency: https://docs.stripe.com/currencies
+   * */
+  STRIPE_CURRENCY_CODE: String(process.env.REACT_APP_BC_STRIPE_CURRENCY_CODE || 'USD')
 }
 
 export default env
diff --git a/frontend/src/pages/Checkout.tsx b/frontend/src/pages/Checkout.tsx
@@ -282,9 +282,7 @@ const Checkout = () => {
       if (!payLater) {
         const payload: movininTypes.CreatePaymentPayload = {
           amount: price,
-          // Supported currencies for the moment: usd, eur
-          // Must be a supported currency: https://docs.stripe.com/currencies
-          currency: commonStrings.CURRENCY === '$' ? 'usd' : commonStrings.CURRENCY === '€' ? 'eur' : '',
+          currency: env.STRIPE_CURRENCY_CODE,
           locale: language,
           receiptEmail: (!authenticated ? renter?.email : user?.email) as string,
           name: `${property.name} 

diff --git a/mobile/.env.example b/mobile/.env.example
@@ -11,3 +11,6 @@ MI_PROPERTY_IMAGE_WIDTH=300
 MI_PROPERTY_IMAGE_HEIGHT=200
 MI_MINIMUM_AGE=21
 MI_STRIPE_PUBLISHABLE_KEY=STRIPE_PUBLISHABLE_KEY
+MI_STRIPE_MERCHANT_IDENTIFIER=MERCHANT_IDENTIFIER
+MI_STRIPE_COUNTRY_CODE=US
+MI_STRIPE_CURRENCY_CODE=USD
diff --git a/mobile/App.tsx b/mobile/App.tsx
@@ -106,7 +106,7 @@ const App = () => {
     <GlobalProvider>
       <SafeAreaProvider>
         <Provider>
-          <StripeProvider publishableKey={env.STRIPE_PUBLISHABLE_KEY}>
+          <StripeProvider publishableKey={env.STRIPE_PUBLISHABLE_KEY} merchantIdentifier={env.STRIPE_MERCHANT_IDENTIFIER}>
             <RootSiblingParent>
               <NavigationContainer ref={navigationRef} onReady={onReady}>
                 <ExpoStatusBar style="light" backgroundColor="rgba(0, 0, 0, .9)" />

diff --git a/mobile/config/env.config.ts b/mobile/config/env.config.ts
@@ -11,7 +11,10 @@ import {
   MI_PROPERTY_IMAGE_WIDTH,
   MI_PROPERTY_IMAGE_HEIGHT,
   MI_MINIMUM_AGE,
-  MI_STRIPE_PUBLISHABLE_KEY
+  MI_STRIPE_PUBLISHABLE_KEY,
+  MI_STRIPE_MERCHANT_IDENTIFIER,
+  MI_STRIPE_COUNTRY_CODE,
+  MI_STRIPE_CURRENCY_CODE
 } from '@env'
 
 /**
@@ -162,3 +165,25 @@ export const SIZE_UNIT = 'm²'
  * @type {string}
  */
 export const STRIPE_PUBLISHABLE_KEY: string = MI_STRIPE_PUBLISHABLE_KEY
+
+/**
+ * The merchant identifier you registered with Apple for use with Apple Pay.
+ *
+ * @type {string}
+ */
+export const STRIPE_MERCHANT_IDENTIFIER: string = MI_STRIPE_MERCHANT_IDENTIFIER
+
+/**
+ * The two-letter ISO 3166 code of the country of your business, e.g. "US". Required for Stripe payments.
+ *
+ * @type {string}
+ */
+export const STRIPE_COUNTRY_CODE: string = MI_STRIPE_COUNTRY_CODE.toUpperCase()
+
+/**
+ * The three-letter ISO 4217 alphabetic currency code, e.g. "USD" or "EUR". Required for Stripe payments.
+ * Must be a supported currency: https://docs.stripe.com/currencies
+ *
+ * @type {string}
+ */
+export const STRIPE_CURRENCY_CODE: string = MI_STRIPE_CURRENCY_CODE.toUpperCase()
diff --git a/mobile/screens/Checkout.tsx b/mobile/screens/Checkout.tsx
@@ -416,12 +416,9 @@ const CheckoutScreen = ({ navigation, route }: NativeStackScreenProps<StackParam
       let customerId: string | undefined
       try {
         if (!payLater) {
-          const currency = i18n.t('CURRENCY')
           const createPaymentIntentPayload: movininTypes.CreatePaymentPayload = {
             amount: price,
-            // Supported currencies for the moment: usd, eur
-            // Must be a supported currency: https://docs.stripe.com/currencies
-            currency: currency === '$' ? 'usd' : currency === '€' ? 'eur' : '',
+            currency: env.STRIPE_CURRENCY_CODE,
             locale: language,
             receiptEmail: (!authenticated ? renter?.email : user?.email) as string,
             name: '',

diff --git a/mobile/types/env.d.ts b/mobile/types/env.d.ts
@@ -12,4 +12,7 @@ declare module '@env' {
   export const MI_PROPERTY_IMAGE_HEIGHT: string
   export const MI_MINIMUM_AGE: string
   export const MI_STRIPE_PUBLISHABLE_KEY: string
+  export const MI_STRIPE_MERCHANT_IDENTIFIER: string
+  export const MI_STRIPE_COUNTRY_CODE: string
+  export const MI_STRIPE_CURRENCY_CODE: string
 }