ordering-ui-react-native 0.18.50 → 0.18.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.18.50",
+  "version": "0.18.52",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/StripeMethodForm/index.tsx

@@ -1,10 +1,8 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { useLanguage, useConfig } from 'ordering-components/native'
-import { useGooglePay, ApplePayButton, useApplePay } from '@stripe/stripe-react-native'
-import { OButton, OText } from '../shared';
-import { Platform, View } from 'react-native';
+import { useGooglePay, useApplePay } from '@stripe/stripe-react-native'
+import { Platform } from 'react-native';
 import { StripeMethodFormParams } from '../../types';
-import Spinner from 'react-native-loading-spinner-overlay';
 import { android_app_id } from '../../config.json'
 
 export const StripeMethodForm = (props: StripeMethodFormParams) => {
@@ -14,23 +12,35 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
     onCancel,
     setErrors,
     paymethod,
-    devMode
+    devMode,
+    setMethodPaySupported,
+    placeByMethodPay,
+    methodPaySupported,
+    setPlaceByMethodPay,
+    cartTotal
   } = props
   const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
   const { presentApplePay, isApplePaySupported } = useApplePay();
-  const [initialized, setInitialized] = useState(false);
-  const [loadingGooglePayment, setLoadingGooglePayment] = useState(false)
   const [, t] = useLanguage()
-  const [{configs}] = useConfig()
-
+  const [{ configs }] = useConfig()
+  const applePay = ['global_apple_pay', 'apple_pay']
+  const googlePay = ['global_google_pay', 'google_pay']
   useEffect(() => {
-    if (paymethod !== 'google_pay' || !initGooglePay) return
     if (Platform.OS === 'ios') {
       setErrors(t('GOOGLE_PAY_NOT_SUPPORTED', 'Google pay not supported'))
+      setMethodPaySupported({
+        enabled: false,
+        loading: false
+      })
+      setPlaceByMethodPay(false)
       return
     }
     const initialize = async () => {
       try {
+        setMethodPaySupported({
+          ...methodPaySupported,
+          loading: true
+        })
         const { error } = await initGooglePay({
           testEnv: devMode,
           merchantName: android_app_id,
@@ -46,36 +56,68 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
 
         if (error) {
           setErrors(error.code + ' - ' + error.message);
+          setMethodPaySupported({
+            enabled: false,
+            loading: false
+          })
+          setPlaceByMethodPay(false)
           return;
         }
-        setInitialized(true);
+        setMethodPaySupported({
+          enabled: true,
+          loading: false
+        })
+        setPlaceByMethodPay(false)
+        setErrors('')
       } catch (err: any) {
         setErrors('Catch ' + err?.message)
+        setMethodPaySupported({
+          enabled: false,
+          loading: false
+        })
+        setPlaceByMethodPay(false)
       }
     }
-    initialize();
-  }, [initGooglePay]);
+    if (googlePay.includes(paymethod)) {
+      initialize();
+    }
+  }, [initGooglePay, paymethod]);
 
   useEffect(() => {
-    if (paymethod !== 'apple_pay') return
+    if (applePay.includes(paymethod) && !paymethod) return
     if (Platform.OS === 'android') {
+      setPlaceByMethodPay(false)
       setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      setMethodPaySupported({
+        enabled: false,
+        loading: false
+      })
       return
     }
-  }, [])
+  }, [paymethod])
 
   const createPaymentMethod = async () => {
-    setLoadingGooglePayment(true)
+    setMethodPaySupported({
+      ...methodPaySupported,
+      loading: true
+    })
     const { error, paymentMethod } = await createGooglePayPaymentMethod({
-      amount: cart?.balance ?? cart?.total,
+      amount: cartTotal ?? cart?.balance ?? cart?.total,
       currencyCode: configs?.stripe_currency?.value ?? 'USD',
     });
     if (error) {
       setErrors(error.code + ' - ' + error.message);
-      setLoadingGooglePayment(false)
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
       return;
     } else if (paymentMethod) {
-      handleSource({
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
+      const source = {
         ...paymentMethod?.Card,
         id: paymentMethod.id,
         type: paymentMethod.type,
@@ -84,30 +126,48 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
           brand: paymentMethod.Card.brand,
           last4: paymentMethod.Card.last4
         }
-      })
+      }
+      handleSource(cartTotal ? JSON.stringify(source) : source)
       onCancel()
-      setLoadingGooglePayment(false)
     }
+    setPlaceByMethodPay(false)
   };
 
   const pay = async () => {
+    setMethodPaySupported({
+      ...methodPaySupported,
+      loading: true
+    })
     if (!isApplePaySupported) {
       setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      setMethodPaySupported({
+        enabled: false,
+        loading: false
+      })
+      setPlaceByMethodPay(false)
       return
     }
 
     const { error, paymentMethod } = await presentApplePay({
       cartItems: [{
         label: t('CART', 'Cart'),
-        amount: cart?.balance?.toString() ?? cart?.total?.toString?.()
+        amount: cartTotal?.toString?.() ?? cart?.balance?.toString() ?? cart?.total?.toString?.()
       }],
       country: 'US',
       currency: configs?.stripe_currency?.value ?? 'USD',
     });
     if (error) {
       setErrors(error.code + ' - ' + error.message);
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
     } else if (paymentMethod) {
-      handleSource({
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
+      const source = {
         ...paymentMethod?.Card,
         id: paymentMethod.id,
         type: paymentMethod.type,
@@ -116,50 +176,29 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
           brand: paymentMethod.Card.brand,
           last4: paymentMethod.Card.last4
         }
-      })
+      }
+      handleSource(cartTotal ? JSON.stringify(source) : source)
     }
+    setPlaceByMethodPay(false)
   }
 
+  useEffect(() => {
+    if (isApplePaySupported && applePay.includes(paymethod)) {
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
+      setErrors('')
+    }
+  }, [isApplePaySupported, paymethod])
+
+  useEffect(() => {
+    if (placeByMethodPay) {
+      applePay.includes(paymethod) ? pay() : createPaymentMethod()
+    }
+  }, [placeByMethodPay])
+
   return (
-    <>
-      {paymethod === 'google_pay' ? (
-        <View>
-          <OButton
-            textStyle={{
-              color: '#fff'
-            }}
-            imgRightSrc={null}
-            onClick={createPaymentMethod}
-            isDisabled={loading || !initialized}
-            text={t('PAY_WITH_GOOGLE_PAY', 'Pay with Google Pay')}
-            isLoading={loading || !initialized}
-            style={{ marginTop: 20 }}
-          />
-        </View>
-      ) : (
-        <View>
-          {isApplePaySupported ? (
-            <>
-              <OText>{t('APPLE_PAY_PAYMENT', 'Apple pay payment')}</OText>
-              <ApplePayButton
-                onPress={pay}
-                type="plain"
-                buttonStyle="black"
-                borderRadius={4}
-                style={{
-                  width: '100%',
-                  height: 50,
-                }}
-              />
-            </>
-          ) : (
-            <OText>{t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported')}</OText>
-          )}
-        </View>
-      )}
-      <Spinner
-        visible={loadingGooglePayment}
-      />
-    </>
+    <></>
   )
 }

package/src/types/index.tsx

@@ -490,4 +490,9 @@ export interface StripeMethodFormParams {
   setErrors: (error: string) => void;
   paymethod: string;
   devMode?: boolean;
+  setMethodPaySupported?: any
+  placeByMethodPay?: any
+  methodPaySupported?: any,
+  setPlaceByMethodPay?: any,
+  cartTotal?: number
 }

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -618,7 +618,9 @@ export const OrderContentComponent = (props: OrderContent) => {
                     )}
                   </View>
                   <OText>
-                    -{parsePrice(event.amount, { currency: order?.currency })}
+                    {(event?.paymethod?.gateway === 'cash' && order?.cash)
+                      ? parsePrice(order?.cash, { currency: order?.currency })
+                      : `-${parsePrice(event?.amount, { currency: order?.currency })}`}
                   </OText>
                 </View>
               ))}

package/themes/original/src/components/Checkout/index.tsx

@@ -152,8 +152,9 @@ const CheckoutUI = (props: any) => {
 	const [isOpen, setIsOpen] = useState(false)
 	const [requiredFields, setRequiredFields] = useState<any>([])
 	const [openModal, setOpenModal] = useState({ login: false, signup: false })
-  	const [allowedGuest, setAllowedGuest] = useState(false)
-
+	const [allowedGuest, setAllowedGuest] = useState(false)
+	const [placeByMethodPay, setPlaceByMethodPay] = useState(false)
+	const [methodPaySupported, setMethodPaySupported] = useState({ enabled: false, message: null, loading: true })
 	const placeSpotTypes = [3, 4, 5]
 	const placeSpotsEnabled = placeSpotTypes.includes(options?.type)
 	const isGiftCardCart = !cart?.business_id
@@ -170,6 +171,7 @@ const CheckoutUI = (props: any) => {
 
 	const creditPointPlan = loyaltyPlansState?.result?.find((loyal: any) => loyal.type === 'credit_point')
 	const creditPointPlanOnBusiness = creditPointPlan?.businesses?.find((b: any) => b.business_id === cart?.business_id && b.accumulates)
+	const methodsPay = ['google_pay', 'apple_pay']
 
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
@@ -187,6 +189,7 @@ const CheckoutUI = (props: any) => {
 			validationFields?.fields?.checkout?.driver_tip?.required &&
 			(Number(cart?.driver_tip) <= 0)) ||
 		(validateCommentsCartField)
+		|| (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading))
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -209,16 +212,16 @@ const CheckoutUI = (props: any) => {
 	}
 
 	const handleSuccessSignup = (user: any) => {
-    login({
-      user,
-      token: user?.session?.access_token
-    })
-    setOpenModal({ ...openModal, signup: false })
-  }
+		login({
+			user,
+			token: user?.session?.access_token
+		})
+		setOpenModal({ ...openModal, signup: false })
+	}
 
 	const handleSuccessLogin = (user: any) => {
-    if (user) setOpenModal({ ...openModal, login: false })
-  }
+		if (user) setOpenModal({ ...openModal, login: false })
+	}
 
 	const handlePlaceOrder = (confirmPayment: any, forcePlace: boolean = false) => {
 		if (!userErrors.length && (!requiredFields?.length || allowedGuest) || forcePlace) {
@@ -239,9 +242,9 @@ const CheckoutUI = (props: any) => {
 	}
 
 	const handlePlaceOrderAsGuest = () => {
-    setIsOpen(false)
-    handlerClickPlaceOrder && handlerClickPlaceOrder()
-  }
+		setIsOpen(false)
+		handlerClickPlaceOrder && handlerClickPlaceOrder()
+	}
 
 	const handlePaymentMethodClick = (paymethod: any) => {
 		setShowGateway({ closedByUser: false, open: true })
@@ -261,7 +264,7 @@ const CheckoutUI = (props: any) => {
 	const checkValidationFields = () => {
 		setUserErrors([])
 		const errors = []
-		const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
+		const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
 		const _requiredFields: any = []
 
 		Object.values(validationFields?.fields?.checkout).map((field: any) => {
@@ -662,6 +665,10 @@ const CheckoutUI = (props: any) => {
 									handlePaymentMethodClickCustom={handlePaymentMethodClick}
 									handlePlaceOrder={handlePlaceOrder}
 									merchantId={merchantId}
+									setMethodPaySupported={setMethodPaySupported}
+									methodPaySupported={methodPaySupported}
+									placeByMethodPay={placeByMethodPay}
+									setPlaceByMethodPay={setPlaceByMethodPay}
 								/>
 							</ChPaymethods>
 						</ChSection>
@@ -745,7 +752,7 @@ const CheckoutUI = (props: any) => {
 											maxDate={maxDate}
 											loyaltyRewardRate={
 												creditPointPlanOnBusiness?.accumulation_rate ??
-													(!!creditPointPlanOnBusiness && creditPointPlan?.accumulation_rate) ?? 0
+												(!!creditPointPlanOnBusiness && creditPointPlan?.accumulation_rate) ?? 0
 											}
 										/>
 									</>
@@ -856,7 +863,7 @@ const CheckoutUI = (props: any) => {
 						open={openModal.signup}
 						onClose={() => setOpenModal({ ...openModal, signup: false })}
 					>
-						<ScrollView style={{ paddingHorizontal: 20, width: '100%'}}>
+						<ScrollView style={{ paddingHorizontal: 20, width: '100%' }}>
 							<SignupForm
 								handleSuccessSignup={handleSuccessSignup}
 								isGuest
@@ -870,7 +877,7 @@ const CheckoutUI = (props: any) => {
 						open={openModal.login}
 						onClose={() => setOpenModal({ ...openModal, login: false })}
 					>
-						<ScrollView style={{ paddingHorizontal: 20, width: '100%'}}>
+						<ScrollView style={{ paddingHorizontal: 20, width: '100%' }}>
 							<LoginForm
 								handleSuccessLogin={handleSuccessLogin}
 								isGuest
@@ -883,7 +890,12 @@ const CheckoutUI = (props: any) => {
 			</Container>
 			{!cartState.loading && cart && cart?.status !== 2 && (
 				<FloatingButton
-					handleClick={isDisabledButtonPlace ? () => vibrateApp() : () => handlePlaceOrder(null)}
+					handleClick={
+						isDisabledButtonPlace
+							? () => vibrateApp()
+							: methodsPay.includes(paymethodSelected?.gateway)
+								? () => setPlaceByMethodPay(true)
+								: () => handlePlaceOrder(null)}
 					isSecondaryBtn={isDisabledButtonPlace}
 					disabled={isDisabledButtonPlace}
 					btnText={subtotalWithTaxes >= cart?.minimum

package/themes/original/src/components/LottieAnimation/index.tsx

@@ -70,11 +70,17 @@ export const LottieAnimation = (props: Props) => {
       style={style}
     >
       {type === 'favorite' ? (
-        <Lottie
-          ref={favRef}
-          progress={initialValue}
-          style={{ width: 20, height: 20 }}
-          source={animationGif}
+        // <Lottie
+        //   ref={favRef}
+        //   progress={initialValue}
+        //   style={{ width: 20, height: 20 }}
+        //   source={animationGif}
+        // />
+        <IconAntDesign
+          name={isActive ? icon[0] : icon[1]}
+          color={iconProps?.color || theme.colors.danger5}
+          size={iconProps?.size || 16}
+          style={iconProps?.style}
         />
       ) : (
         <>

package/themes/original/src/components/MultiCartsPaymethodsAndWallets/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import {
   useLanguage,
   useConfig,
@@ -29,7 +29,15 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
     paymethodSelected,
     handleSelectPaymethod,
     handleSelectWallet,
-    handlePaymethodDataChange
+    handlePaymethodDataChange,
+    setMethodPaySupported,
+    placeByMethodPay,
+    methodPaySupported,
+    setPlaceByMethodPay,
+    openCarts,
+    cartTotal,
+    handlePlaceOrder,
+    merchantId
   } = props
 
   const theme = useTheme()
@@ -54,6 +62,8 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
   }
 
   const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate, { isTruncable: true })}`
+  const filterMethodsPay = (gateway: string) => Platform.OS === 'ios' ? gateway !== 'global_google_pay' : gateway !== 'global_apple_pay'
+  const methodsPay = ['global_google_pay', 'global_apple_pay']
 
   const getPayIcon = (method: string) => {
     switch (method) {
@@ -71,35 +81,61 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
         return theme.images.general.stripes
       case 'stripe_redirect':
         return theme.images.general.stripesb
+      case 'global_apple_pay':
+        return theme.images.general.applePayMark
       default:
         return theme.images.general.creditCard
     }
   }
 
+  useEffect(() => {
+		if (methodsPay.includes(paymethodSelected?.gateway)) {
+      if (typeof paymethodSelected?.paymethod_data === 'string'){
+        const sourceId =  JSON.parse(paymethodSelected?.paymethod_data)?.source_id
+        sourceId && handlePlaceOrder()
+      }
+		}
+	}, [JSON.stringify(paymethodSelected)])
+
   const renderPaymethods = ({ item }: any) => {
     return (
-      <TouchableOpacity
-        onPress={() => handleSelectPaymethod({ ...item, paymethod: { gateway: item.gateway }, paymethod_id: item?.id })}
-      >
-        <PMItem
-          key={item.id}
-          isActive={paymethodSelected?.id === item.id}
-        >
-          <OIcon
-            src={getPayIcon(item?.gateway ?? item.paymethod?.gateway)}
-            width={20}
-            height={20}
-            color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
-          />
-          <OText
-            size={10}
-            style={{ margin: 0, marginTop: 4 }}
-            color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+      <>
+        {item?.gateway === 'apple_pay' ? (
+          <TouchableOpacity
+            onPress={() => handleSelectPaymethod({ ...item, paymethod: { gateway: item.gateway }, paymethod_id: item?.id })}
           >
-            {t(item?.gateway.toUpperCase(), item?.name)}
-          </OText>
-        </PMItem>
-      </TouchableOpacity>
+            <OIcon
+              src={getPayIcon(item.gateway)}
+              width={70}
+              height={70}
+              style={{ marginRight: 10 }}
+            />
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            onPress={() => handleSelectPaymethod({ ...item, paymethod: { gateway: item.gateway }, paymethod_id: item?.id })}
+          >
+            <PMItem
+              key={item.id}
+              isActive={paymethodSelected?.id === item.id}
+            >
+              <OIcon
+                src={getPayIcon(item?.gateway ?? item.paymethod?.gateway)}
+                width={20}
+                height={20}
+                color={item?.gateway === 'apple_pay' ? '' : paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
+              />
+              <OText
+                size={10}
+                style={{ margin: 0, marginTop: 4 }}
+                color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+              >
+                {t(item?.gateway.toUpperCase(), item?.name)}
+              </OText>
+            </PMItem>
+          </TouchableOpacity>
+        )}
+      </>
     )
   }
 
@@ -126,7 +162,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
         <FlatList
           horizontal
           showsHorizontalScrollIndicator={false}
-          data={paymethodsAndWallets.paymethods}
+          data={paymethodsAndWallets.paymethods.filter((p: any) => filterMethodsPay(p.gateway))}
           renderItem={renderPaymethods}
           keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
         />
@@ -159,6 +195,27 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
         </View>
       )}
 
+      {/* Google pay, Apple pay */}
+      {methodsPay.includes(paymethodSelected?.paymethod?.gateway) && (
+        <StripeElementsForm
+          toSave
+          businessId={businessIds[0]}
+          businessIds={businessIds}
+          publicKey={paymethodSelected?.data?.publishable}
+          requirements={props.clientSecret}
+          handleSource={handlePaymethodDataChange}
+          onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+          setMethodPaySupported={setMethodPaySupported}
+					methodPaySupported={methodPaySupported}
+					placeByMethodPay={placeByMethodPay}
+					setPlaceByMethodPay={setPlaceByMethodPay}
+          methodsPay={methodsPay}
+          paymethod={paymethodSelected?.paymethod?.gateway}
+          cartTotal={cartTotal}
+          merchantId={merchantId}
+        />
+      )}
+
       {(paymethodsAndWallets.loading || walletsState.loading) ? (
         <>
           {[...Array(2).keys()].map(i => (
@@ -174,46 +231,46 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
         <>
           {walletsState?.result?.filter((wallet: any) =>
             paymethodsAndWallets.wallets.find((item: any) => item.type === wallet.type))
-              .map((wallet: any, idx: any) => walletName[wallet.type]?.isActive &&
-          (
-            <WalletItem
-              key={wallet.type}
-              isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
-              onPress={() => handleSelectWallet(!!!walletsPaymethod?.find((walletPay: any) => walletPay.wallet_id === wallet.id)?.id, wallet)}
-            >
-              {!!walletsPaymethod?.find((walletPay: any) => walletPay.wallet_id === wallet.id)?.id ? (
-                <MaterialCommunityIcons
-                  name="checkbox-marked"
-                  size={25}
-                  color={theme.colors.primary}
-                />
-              ) : (
-                <MaterialCommunityIcons
-                  name="checkbox-blank-outline"
-                  size={25}
-                  color={theme.colors.disabled}
-                />
-              )}
-              <OText size={12} style={{ flex: 1, marginLeft: 15 }}>{walletName[wallet.type]?.name}</OText>
-              {wallet.type === 'cash' && (
-                <OText>
-                  {parsePrice(wallet?.balance, { isTruncable: true })}
-                </OText>
-              )}
-              {wallet.type === 'credit_point' && (
-                <OText>
-                  <OText color={theme.colors.primary} weight='bold'>
-                    {`${wallet?.balance} ${t('POINTS', 'Points')}`}
-                  </OText>
-                  <OText>
-                    {wallet?.balance > 0
-                      ? creditBalance(wallet)
-                      : null}
-                  </OText>
-                </OText>
-              )}
-            </WalletItem>
-          ))}
+            .map((wallet: any, idx: any) => walletName[wallet.type]?.isActive &&
+              (
+                <WalletItem
+                  key={wallet.type}
+                  isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
+                  onPress={() => handleSelectWallet(!!!walletsPaymethod?.find((walletPay: any) => walletPay.wallet_id === wallet.id)?.id, wallet)}
+                >
+                  {!!walletsPaymethod?.find((walletPay: any) => walletPay.wallet_id === wallet.id)?.id ? (
+                    <MaterialCommunityIcons
+                      name="checkbox-marked"
+                      size={25}
+                      color={theme.colors.primary}
+                    />
+                  ) : (
+                    <MaterialCommunityIcons
+                      name="checkbox-blank-outline"
+                      size={25}
+                      color={theme.colors.disabled}
+                    />
+                  )}
+                  <OText size={12} style={{ flex: 1, marginLeft: 15 }}>{walletName[wallet.type]?.name}</OText>
+                  {wallet.type === 'cash' && (
+                    <OText>
+                      {parsePrice(wallet?.balance, { isTruncable: true })}
+                    </OText>
+                  )}
+                  {wallet.type === 'credit_point' && (
+                    <OText>
+                      <OText color={theme.colors.primary} weight='bold'>
+                        {`${wallet?.balance} ${t('POINTS', 'Points')}`}
+                      </OText>
+                      <OText>
+                        {wallet?.balance > 0
+                          ? creditBalance(wallet)
+                          : null}
+                      </OText>
+                    </OText>
+                  )}
+                </WalletItem>
+              ))}
         </>
       )}
 
@@ -230,6 +287,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
           enabled={Platform.OS === 'ios' ? true : false}
         >
           <StripeElementsForm
+            openCarts={openCarts}
             toSave
             businessId={businessIds[0]}
             businessIds={businessIds}

package/themes/original/src/components/MultiCheckout/index.tsx

@@ -64,7 +64,8 @@ const MultiCheckoutUI = (props: any) => {
     totalCartsFee,
     cartGroup,
     walletState,
-    onNavigationRedirectReplace
+    onNavigationRedirectReplace,
+    merchantId
   } = props
 
   const theme = useTheme();
@@ -88,9 +89,6 @@ const MultiCheckoutUI = (props: any) => {
   const isPreOrder = configs?.preorder_status_enabled?.value === '1'
   const isMultiDriverTips = configs?.checkout_multi_business_enabled?.value === '1'
   const walletCarts = (Object.values(carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && cart?.wallets) || null) || []
-  const isDisablePlaceOrderButton = cartGroup?.loading || (!(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) && cartGroup?.result?.balance > 0) ||
-    (paymethodSelected?.paymethod?.gateway === 'stripe' && !paymethodSelected?.paymethod_data) ||
-    walletCarts.length > 0
 
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
     ? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -121,6 +119,13 @@ const MultiCheckoutUI = (props: any) => {
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
   const [phoneUpdate, setPhoneUpdate] = useState(false);
   const [userErrors, setUserErrors] = useState<any>([]);
+  const [placeByMethodPay, setPlaceByMethodPay] = useState(false)
+  const [methodPaySupported, setMethodPaySupported] = useState({ enabled: false, message: null, loading: true })
+  const methodsPay = ['global_google_pay', 'global_apple_pay']
+  const isDisablePlaceOrderButton = cartGroup?.loading || (!(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) && cartGroup?.result?.balance > 0) ||
+    (paymethodSelected?.paymethod?.gateway === 'stripe' && !paymethodSelected?.paymethod_data) ||
+    walletCarts.length > 0
+    || (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading))
 
   const handleMomentClick = () => {
     if (isPreOrder) {
@@ -284,6 +289,13 @@ const MultiCheckoutUI = (props: any) => {
               handleSelectWallet={handleSelectWallet}
               handlePaymethodDataChange={handlePaymethodDataChange}
               cartUuid={cartUuid}
+              merchantId={merchantId}
+              setMethodPaySupported={setMethodPaySupported}
+              methodPaySupported={methodPaySupported}
+              placeByMethodPay={placeByMethodPay}
+              setPlaceByMethodPay={setPlaceByMethodPay}
+              cartTotal={totalCartsPrice}
+              handlePlaceOrder={handlePlaceOrder}
             />
             <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
           </ChSection>
@@ -294,51 +306,51 @@ const MultiCheckoutUI = (props: any) => {
             validationFields?.fields?.checkout?.driver_tip?.enabled &&
             openCarts.every((cart: any) => cart.business_id && cart.status !== 2) &&
             driverTipsOptions && driverTipsOptions?.length > 0 &&
-          (
-            <ChSection>
-              <DriverTipsContainer>
-                <OText size={14} lineHeight={20} color={theme.colors.textNormal}>
-                  {t('DRIVER_TIPS', 'Driver Tips')}
-                </OText>
-                <DriverTips
-                  isMulti
-                  carts={openCarts}
-                  businessIds={openCarts.map((cart: any) => cart.business_id)}
-                  driverTipsOptions={driverTipsOptions}
-                  isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
-                  isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-                  driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
-                    ? openCarts[0]?.driver_tip
-                    : openCarts[0]?.driver_tip_rate}
-                  useOrderContext
-                />
-              </DriverTipsContainer>
-              <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
-            </ChSection>
-          )}
+            (
+              <ChSection>
+                <DriverTipsContainer>
+                  <OText size={14} lineHeight={20} color={theme.colors.textNormal}>
+                    {t('DRIVER_TIPS', 'Driver Tips')}
+                  </OText>
+                  <DriverTips
+                    isMulti
+                    carts={openCarts}
+                    businessIds={openCarts.map((cart: any) => cart.business_id)}
+                    driverTipsOptions={driverTipsOptions}
+                    isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
+                    isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                    driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
+                      ? openCarts[0]?.driver_tip
+                      : openCarts[0]?.driver_tip_rate}
+                    useOrderContext
+                  />
+                </DriverTipsContainer>
+                <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
+              </ChSection>
+            )}
 
           {
             validationFields?.fields?.checkout?.coupon?.enabled &&
             openCarts.every((cart: any) => cart.business_id && cart.status !== 2) &&
             configs?.multi_business_checkout_coupon_input_style?.value === 'group' &&
-          (
-            <ChSection>
-              <OText size={14} lineHeight={20} color={theme.colors.textNormal}>
-                {t('DISCOUNT_COUPON', 'Discount coupon')}
-              </OText>
-              <OSTable>
-                <OSCoupon>
-                  <CouponControl
-                    isMulti
-                    carts={openCarts}
-                    businessIds={openCarts.map((cart: any) => cart.business_id)}
-                    price={openCarts.reduce((total: any, cart: any) => total + cart.total, 0)}
-                  />
-                </OSCoupon>
-              </OSTable>
-              <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
-            </ChSection>
-          )}
+            (
+              <ChSection>
+                <OText size={14} lineHeight={20} color={theme.colors.textNormal}>
+                  {t('DISCOUNT_COUPON', 'Discount coupon')}
+                </OText>
+                <OSTable>
+                  <OSCoupon>
+                    <CouponControl
+                      isMulti
+                      carts={openCarts}
+                      businessIds={openCarts.map((cart: any) => cart.business_id)}
+                      price={openCarts.reduce((total: any, cart: any) => total + cart.total, 0)}
+                    />
+                  </OSCoupon>
+                </OSTable>
+                <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
+              </ChSection>
+            )}
 
           <ChSection>
             <ChCarts>
@@ -390,15 +402,15 @@ const MultiCheckoutUI = (props: any) => {
                   )}
                   {openCarts.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
                     configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
-                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-                        {t('DRIVER_TIP', 'Driver tip')}
-                      </OText>
-                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-                        {parsePrice(openCarts.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
-                      </OText>
-                    </View>
-                  )}
+                      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                        <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+                          {t('DRIVER_TIP', 'Driver tip')}
+                        </OText>
+                        <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+                          {parsePrice(openCarts.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
+                        </OText>
+                      </View>
+                    )}
                   <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                     <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
                       {t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
@@ -423,7 +435,9 @@ const MultiCheckoutUI = (props: any) => {
       </Container>
 
       <FloatingButton
-        handleClick={() => handlePlaceOrder()}
+        handleClick={methodsPay.includes(paymethodSelected?.gateway)
+          ? () => setPlaceByMethodPay(true)
+          : () => handlePlaceOrder()}
         isSecondaryBtn={isDisablePlaceOrderButton}
         disabled={isDisablePlaceOrderButton}
         btnText={placing ? t('PLACING', 'Placing') : t('PLACE_ORDER', 'Place Order')}

package/themes/original/src/components/PaymentOptions/index.tsx

@@ -34,7 +34,7 @@ import { useApplePay } from '@stripe/stripe-react-native';
 
 const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
 const methodsPay = ['google_pay', 'apple_pay']
-const stripeDirectMethods = ['stripe_direct', ...methodsPay]
+const stripeDirectMethods = ['stripe_direct']
 // const stripeRedirectOptions = [
 //   { name: 'Bancontact', value: 'bancontact' },
 //   { name: 'Alipay', value: 'alipay' },
@@ -43,6 +43,7 @@ const stripeDirectMethods = ['stripe_direct', ...methodsPay]
 // ]
 
 const webViewPaymentGateway: any = ['paypal', 'square']
+const multiCheckoutMethods = ['global_google_pay', 'global_apple_pay']
 
 const PaymentOptionsUI = (props: any) => {
 	const {
@@ -59,7 +60,11 @@ const PaymentOptionsUI = (props: any) => {
 		isOpenMethod,
 		handlePaymentMethodClickCustom,
 		handlePlaceOrder,
-		merchantId
+		merchantId,
+		setMethodPaySupported,
+		placeByMethodPay,
+		methodPaySupported,
+		setPlaceByMethodPay
 	} = props
 
 	const theme = useTheme();
@@ -187,6 +192,7 @@ const PaymentOptionsUI = (props: any) => {
 	}
 
 	const excludeIds: any = [32]; //exclude paypal & connect & redirect
+	const filterMethodsPay = (gateway : string) => Platform.OS === 'ios' ? gateway !== 'google_pay' : gateway !== 'apple_pay' 
 
 	return (
 		<PMContainer>
@@ -195,7 +201,11 @@ const PaymentOptionsUI = (props: any) => {
 					horizontal
 					showsHorizontalScrollIndicator={false}
 					// data={paymethodsList.paymethods.sort((a: any, b: any) => a.id - b.id)}
-					data={paymethodsList.paymethods.sort((a: any, b: any) => a.id - b.id).filter((p: any) => !excludeIds.includes(p.id))}
+					data={paymethodsList.paymethods.sort((a: any, b: any) => a.id - b.id)
+						.filter((p: any) => 
+							!multiCheckoutMethods.includes(p.gateway) && 
+							filterMethodsPay(p.gateway) && 
+							!excludeIds.includes(p.id))}
 					renderItem={renderPaymethods}
 					keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
 				/>
@@ -296,6 +306,23 @@ const PaymentOptionsUI = (props: any) => {
 					/>
 				</View>
 			)}
+			{/* Google pay, Apple pay */}
+			{methodsPay.includes(isOpenMethod?.paymethod?.gateway) && (
+				<StripeElementsForm
+					cart={cart}
+					paymethod={isOpenMethod?.paymethod?.gateway}
+					methodsPay={methodsPay}
+					businessId={props.businessId}
+					publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
+					handleSource={handlePaymethodDataChange}
+					onCancel={() => handlePaymethodClick(null)}
+					merchantId={merchantId}
+					setMethodPaySupported={setMethodPaySupported}
+					methodPaySupported={methodPaySupported}
+					placeByMethodPay={placeByMethodPay}
+					setPlaceByMethodPay={setPlaceByMethodPay}
+				/>
+			)}
 
 			<OModal
 				entireModal
@@ -320,7 +347,7 @@ const PaymentOptionsUI = (props: any) => {
 				</KeyboardAvoidingView>
 			</OModal>
 
-			{/* Stripe direct, Google pay, Apple pay */}
+			{/* Stripe direct */}
 			<OModal
 				entireModal
 				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}

package/themes/original/src/components/StripeElementsForm/index.tsx

@@ -28,7 +28,12 @@ const StripeElementsFormUI = (props: any) => {
 		onCancel,
 		cart,
 		merchantId,
-		businessIds
+		businessIds,
+		setMethodPaySupported,
+		placeByMethodPay,
+		methodPaySupported,
+		setPlaceByMethodPay,
+		cartTotal
 	} = props;
 
 	const theme = useTheme();
@@ -78,24 +83,24 @@ const StripeElementsFormUI = (props: any) => {
 
 	if (user?.address) {
 		billingDetails.address = {
-      line1: user?.address
-    }
+			line1: user?.address
+		}
 	}
 
 	const createPayMethod = async () => {
 		const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
 		if (Object.keys(billingDetails).length > 0) {
-			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
+			params.paymentMethodData.billingDetails = { ...billingDetails, token: card?.last4 }
 		}
 		try {
 			setCreatePmLoading(true)
 			const { paymentMethod, error } = await createPaymentMethod(params);
 
-      if (error) {
-        setErrors(error?.message);
-        setCreatePmLoading(false)
-        return
-      }
+			if (error) {
+				setErrors(error?.message);
+				setCreatePmLoading(false)
+				return
+			}
 
 			setCreatePmLoading(false)
 			handleSource && handleSource({
@@ -118,7 +123,7 @@ const StripeElementsFormUI = (props: any) => {
 			setErrors(error?.message || error?.toString());
 		}
 	}
-	
+
 	const handleSaveCard = async () => {
 		setErrors('');
 		if (!requirements) {
@@ -127,7 +132,7 @@ const StripeElementsFormUI = (props: any) => {
 		}
 		const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
 		if (Object.keys(billingDetails).length > 0) {
-			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
+			params.paymentMethodData.billingDetails = { ...billingDetails, token: card?.last4 }
 		}
 		try {
 			const { setupIntent, error } = await confirmSetupIntent(requirements, params);
@@ -135,8 +140,8 @@ const StripeElementsFormUI = (props: any) => {
 			if (setupIntent?.status === 'Succeeded') {
 				if (businessIds) {
 					businessIds.forEach((_businessId: any, index: any) => {
-					  const _isNewCard = index === 0
-					  stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId, _isNewCard);
+						const _isNewCard = index === 0
+						stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId, _isNewCard);
 					})
 				} else {
 					stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);
@@ -188,7 +193,7 @@ const StripeElementsFormUI = (props: any) => {
 	}, []);
 
 	return (
-		<View style={{ ...styles.container, height: height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
+		<View style={{ ...styles.container, height: methodsPay?.includes(paymethod) ? 'auto' : height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
 			{publicKey ? (
 				<View style={{ flex: 1 }}>
 					<StripeProvider
@@ -201,9 +206,14 @@ const StripeElementsFormUI = (props: any) => {
 								handleSource={handleSource}
 								onCancel={onCancel}
 								cart={cart}
+								cartTotal={cartTotal}
 								setErrors={setErrors}
 								paymethod={paymethod}
 								devMode={publicKey?.includes('test')}
+								setMethodPaySupported={setMethodPaySupported}
+								placeByMethodPay={placeByMethodPay}
+								methodPaySupported={methodPaySupported}
+								setPlaceByMethodPay={setPlaceByMethodPay}
 							/>
 						) : (
 							<CardField