ordering-ui-react-native 0.14.69 → 0.14.70

package/package.json

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

package/src/components/Checkout/index.tsx

@@ -529,6 +529,7 @@ const CheckoutUI = (props: any) => {
                   paySelected={paymethodSelected}
                   handlePaymentMethodClickCustom={handlePaymentMethodClick}
                   setCardData={setCardData}
+                  handlePlaceOrder={handlePlaceOrder}
                 />
               </ChPaymethods>
             </ChSection>

package/src/components/PaymentOptions/index.tsx

@@ -61,11 +61,14 @@ const PaymentOptionsUI = (props: any) => {
     handlePaymethodDataChange,
     handlePaymentMethodClickCustom,
     isOpenMethod,
-    setCardData
+    setCardData,
+    handlePlaceOrder
   } = props
 
   const theme = useTheme();
   const [, t] = useLanguage();
+  const methodsPay = ['google_pay', 'apple_pay']
+  const stripeDirectMethods = ['stripe_direct', ...methodsPay]
 
   const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
   let paymethodSelected = props.paySelected || props.paymethodSelected || isOpenMethod?.paymethod
@@ -119,8 +122,11 @@ const PaymentOptionsUI = (props: any) => {
   }, [props.paySelected])
 
   useEffect(() => {
-    setCardData(paymethodData)
-  }, [paymethodData])
+    setCardData && setCardData(paymethodData)
+    if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
+      handlePlaceOrder()
+    }
+  }, [paymethodData, paymethodSelected])
 
   const renderPaymethods = ({ item }: any) => {
     return (
@@ -283,7 +289,7 @@ const PaymentOptionsUI = (props: any) => {
       <OModal
         entireModal
         title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-        open={isOpenMethod?.paymethod?.gateway === 'stripe_direct' && !paymethodData?.id}
+        open={stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && !paymethodData.id}
         onClose={() => handlePaymethodClick(null)}
       >
         <KeyboardAvoidingView
@@ -292,10 +298,13 @@ const PaymentOptionsUI = (props: any) => {
           enabled={Platform.OS === 'ios' ? true : false}
         >
           <StripeElementsForm
+            cart={cart}
+            paymethod={isOpenMethod?.paymethod?.gateway}
+            methodsPay={methodsPay}
             businessId={props.businessId}
-            publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
+            publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
             handleSource={handlePaymethodDataChange}
-            onCancel={() => handlePaymethodClick(false)}
+            onCancel={() => handlePaymethodClick(null)}
           />
         </KeyboardAvoidingView>
       </OModal>

package/src/components/StripeElementsForm/index.tsx

@@ -7,10 +7,11 @@ import {
   useConfirmSetupIntent,
   createPaymentMethod
 } from '@stripe/stripe-react-native';
-
+import configs from '../../config.json'
 import { ErrorMessage } from './styles';
 
 import { StripeElementsForm as StripeFormController } from './naked';
+import { StripeMethodForm } from '../StripeMethodForm';
 import { OButton, OText } from '../shared';
 import { useTheme } from 'styled-components/native';
 
@@ -22,6 +23,10 @@ const StripeElementsFormUI = (props: any) => {
     businessId,
     requirements,
     stripeTokenHandler,
+    methodsPay,
+    paymethod,
+    onCancel,
+    cart
   } = props;
 
   const theme = useTheme();
@@ -121,33 +126,49 @@ const StripeElementsFormUI = (props: any) => {
     <View style={styles.container}>
       {publicKey ? (
         <View style={{ flex: 1 }}>
-          <StripeProvider publishableKey={publicKey}>
-            <CardField
-              postalCodeEnabled={true}
-              cardStyle={{
-                backgroundColor: '#FFFFFF',
-                textColor: '#000000',
-              }}
-              style={{
-                width: '100%',
-                height: 50,
-                marginVertical: 30,
-                zIndex: 9999,
-              }}
-              onCardChange={(cardDetails: any) => setCard(cardDetails)}
-            />
+          <StripeProvider 
+            publishableKey={publicKey}
+            merchantIdentifier={`merchant.${configs.apple_app_id}`}
+          >
+            {methodsPay.includes(paymethod) ? (
+              <StripeMethodForm 
+                handleSource={handleSource}
+                onCancel={onCancel}
+                cart={cart}
+                setErrors={setErrors}
+                paymethod={paymethod}
+                devMode={publicKey?.includes('test')}
+              />
+            ) : (
+              <CardField
+                postalCodeEnabled={true}
+                cardStyle={{
+                  backgroundColor: '#FFFFFF',
+                  textColor: '#000000',
+                }}
+                style={{
+                  width: '100%',
+                  height: 50,
+                  marginVertical: 30,
+                  zIndex: 9999,
+                }}
+                onCardChange={(cardDetails: any) => setCard(cardDetails)}
+              />
+            )}
           </StripeProvider>
-          <OButton
-            text={t('SAVE_CARD', 'Save card')}
-            bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
-            borderColor={isCompleted ? theme.colors.primary :theme.colors.backgroundGray}
-            style={styles.btnAddStyle}
-            textStyle={{color: 'white'}}
-            imgRightSrc={null}
-            onClick={() => handleSaveCard()}
-            isDisabled={!isCompleted}
-            isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
-          />
+          {!methodsPay?.includes(paymethod) && (
+            <OButton
+              text={t('SAVE_CARD', 'Save card')}
+              bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
+              borderColor={isCompleted ? theme.colors.primary :theme.colors.backgroundGray}
+              style={styles.btnAddStyle}
+              textStyle={{color: 'white'}}
+              imgRightSrc={null}
+              onClick={() => handleSaveCard()}
+              isDisabled={!isCompleted}
+              isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
+            />
+          )}
           {!!errors && (
             <ErrorMessage>
               <OText

package/src/components/StripeMethodForm/index.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components/native'
+import { GooglePayButton, useGooglePay, ApplePayButton, useApplePay } from '@stripe/stripe-react-native'
+import { OButton } from '../shared';
+import { Platform, View } from 'react-native';
+import { StripeMethodFormParams } from '../../types';
+
+export const StripeMethodForm = (props: StripeMethodFormParams) => {
+  const {
+    cart,
+    handleSource,
+    onCancel,
+    setErrors,
+    paymethod,
+    devMode
+  } = props
+  const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
+  const { presentApplePay, isApplePaySupported } = useApplePay();
+  const [initialized, setInitialized] = useState(false);
+  const [, t] = useLanguage()
+ 
+  useEffect(() => {
+    if (paymethod !== 'google_pay') return
+    if (Platform.OS === 'ios') {
+      setErrors(t('GOOGLE_PAY_NOT_SUPPORTED', 'Google pay not supported'))
+      return
+    }
+    const initialize = async () => {
+      try {
+        const { error } = await initGooglePay({
+          testEnv: devMode,
+          merchantName: 'Widget Store',
+          countryCode: 'US',
+          billingAddressConfig: {
+            format: 'FULL',
+            isPhoneNumberRequired: true,
+            isRequired: false,
+          },
+          existingPaymentMethodRequired: false,
+          isEmailRequired: true,
+        });
+
+        if (error) {
+          setErrors(error.code + ' - ' + error.message);
+          return;
+        }
+        setInitialized(true);
+      } catch (err: any) {
+        setErrors('Catch ' + err?.message)
+      }
+    }
+    initialize();
+  }, [initGooglePay]);
+
+  useEffect(() => {
+    if (paymethod !== 'apple_pay') return
+    if (Platform.OS === 'android') {
+      setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      return
+    }
+  }, [])
+
+  const createPaymentMethod = async () => {
+
+    const { error, paymentMethod } = await createGooglePayPaymentMethod({
+      amount: cart?.balance ?? cart?.total,
+      currencyCode: 'USD',
+    });
+
+    if (error) {
+      setErrors(error.code + ' - ' + error.message);
+      return;
+    } else if (paymentMethod) {
+      handleSource({
+        ...paymentMethod?.Card,
+        id: paymentMethod.id,
+        type: paymentMethod.type,
+        source_id: paymentMethod?.id,
+        card: {
+          brand: paymentMethod.Card.brand,
+          last4: paymentMethod.Card.last4
+        }
+      })
+      onCancel()
+    }
+    setInitialized(false);
+  };
+
+  const pay = async () => {
+    if (!isApplePaySupported) {
+      setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      return
+    }
+
+    const { error, paymentMethod } = await presentApplePay({
+      cartItems: cart?.products?.map((product: any) => ({ label: product?.name, amount: product?.price?.toString?.() })),
+      country: 'US',
+      currency: 'USD',
+      shippingMethods: [
+        {
+          amount: cart?.balance?.toString() ?? cart?.total?.toString?.(),
+          identifier: 'DPS',
+          label: 'Courier',
+          detail: 'Delivery',
+          type: 'final',
+        },
+      ],
+
+      requiredShippingAddressFields: ['emailAddress', 'phoneNumber'],
+      requiredBillingContactFields: ['phoneNumber', 'name'],
+    });
+    if (error) {
+      setErrors(error.code + ' - ' + error.message);
+    } else if (paymentMethod) {
+      handleSource({
+        ...paymentMethod?.Card,
+        id: paymentMethod.id,
+        type: paymentMethod.type,
+        source_id: paymentMethod?.id,
+        card: {
+          brand: paymentMethod.Card.brand,
+          last4: paymentMethod.Card.last4
+        }
+      })
+      onCancel()
+    }
+  }
+
+  return (
+    <>
+      {paymethod === 'google_pay' ? (
+        <View>
+          {!loading && initialized && (
+            <OButton
+              textStyle={{
+                color: '#fff'
+              }}
+              imgRightSrc={null}
+              onClick={createPaymentMethod}
+              isDisabled={!initialized}
+              text={t('PAY_WITH_GOOGLE_PAY', 'Pay with Google Pay')}
+            />
+          )}
+        </View>
+      ) : (
+        <View>
+          {isApplePaySupported && (
+            <ApplePayButton
+              onPress={pay}
+              type="plain"
+              buttonStyle="black"
+              borderRadius={4}
+              style={{
+                width: '100%',
+                height: 50,
+              }}
+            />
+          )}
+        </View>
+      )}
+    </>
+  )
+}

package/src/config.json

@@ -3,6 +3,8 @@
   "notification_app": "orderingapp",
   "app_name": "Ordering",
   "project": "reactdemo",
+  "apple_app_id": "com.delivery",
+  "android_app_id": "com.delivery",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",

package/src/types/index.tsx

@@ -473,3 +473,12 @@ export interface HelpGuideParams {
 export interface HelpAccountAndPaymentParams {
   navigation: any;
 }
+
+export interface StripeMethodFormParams {
+  cart: any;
+  handleSource: ({id, card} : {id : string, card : any}) => void;
+  onCancel: () => void;
+  setErrors: (error: string) => void;
+  paymethod: string;
+  devMode?: boolean;
+}