@kiosinc/commons-rn 0.1.95 → 0.1.97

package/lib/typescript/src/screens/SavedCards/SavedCards.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SavedCards.d.ts","sourceRoot":"","sources":["../../../../../src/screens/SavedCards/SavedCards.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,eAAO,MAAM,UAAU;iCAIO,mBAAmB,KAAK,IAAI;;iBA6KzD,CAAC"}
+{"version":3,"file":"SavedCards.d.ts","sourceRoot":"","sources":["../../../../../src/screens/SavedCards/SavedCards.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAG7D,eAAO,MAAM,UAAU;iCAKO,mBAAmB,GAAG,UAAU,KAAK,IAAI;;;iBAqLtE,CAAC"}

package/lib/typescript/src/screens/SavedCards/useApplePay.d.ts

@@ -0,0 +1,6 @@
+export declare const useApplePay: () => {
+    hasApplePay: boolean;
+    isProcessing: boolean;
+    startApplePay: () => Promise<void>;
+};
+//# sourceMappingURL=useApplePay.d.ts.map

package/lib/typescript/src/screens/SavedCards/useApplePay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useApplePay.d.ts","sourceRoot":"","sources":["../../../../../src/screens/SavedCards/useApplePay.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW;;;;CAiFvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiosinc/commons-rn",
-  "version": "0.1.95",
+  "version": "0.1.97",
   "description": "Common Code",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/assets/icons/apple_pay.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.14931 4H21.8507C21.9326 4 22.0148 4 22.0967 4.00048C22.1658 4.00097 22.2349 4.00174 22.3043 4.00362C22.4546 4.0077 22.6065 4.01659 22.7556 4.04332C22.9066 4.07053 23.0473 4.1149 23.1845 4.18475C23.3195 4.25335 23.4426 4.34308 23.5499 4.45014C23.6568 4.55721 23.7465 4.6805 23.8153 4.81553C23.8853 4.95274 23.9296 5.09343 23.9565 5.24469C23.9834 5.3935 23.9922 5.54542 23.9962 5.69591C23.9981 5.76499 23.999 5.83406 23.9994 5.90312C24 5.98521 24 6.06723 24 6.14946V17.2153C24 17.2975 24 17.3794 23.9994 17.4616C23.999 17.5307 23.9981 17.5998 23.9962 17.6688C23.9922 17.8192 23.9834 17.9711 23.9565 18.1199C23.9296 18.2712 23.8853 18.4118 23.8153 18.5491C23.7465 18.6841 23.6568 18.8076 23.5499 18.9145C23.4426 19.0217 23.3195 19.1114 23.1845 19.1798C23.0473 19.2499 22.9066 19.2943 22.7556 19.3214C22.6065 19.348 22.4546 19.3571 22.3043 19.3611C22.2349 19.3627 22.1658 19.3636 22.0967 19.3639C22.0148 19.3646 21.9326 19.3646 21.8507 19.3646H2.14931C2.06726 19.3646 1.98506 19.3646 1.90315 19.3639C1.83391 19.3636 1.76484 19.3627 1.69576 19.3611C1.54511 19.3571 1.39317 19.348 1.2444 19.3214C1.09326 19.2943 0.95261 19.2499 0.8154 19.1798C0.680509 19.1114 0.557016 19.0217 0.449995 18.9145C0.342928 18.8076 0.253204 18.6841 0.184621 18.5491C0.114747 18.4118 0.0703489 18.2712 0.043336 18.1199C0.0164551 17.9711 0.00750735 17.8192 0.00344744 17.6688C0.00159148 17.5998 0.000795452 17.5307 0.000344512 17.4616C-3.82314e-05 17.3958 -1.27661e-05 17.3303 1.27502e-05 17.2646C1.91332e-05 17.2482 2.55194e-05 17.2317 2.55194e-05 17.2153V6.14946C2.55194e-05 6.13301 1.91349e-05 6.11656 1.27527e-05 6.10013C-1.27644e-05 6.03441 -3.8244e-05 5.96878 0.000344512 5.90312C0.000795452 5.83406 0.00159148 5.76499 0.00344744 5.69591C0.00750735 5.54542 0.0164551 5.3935 0.043336 5.24469C0.0703489 5.09343 0.114747 4.95274 0.184621 4.81553C0.253204 4.6805 0.342928 4.55721 0.449995 4.45014C0.557016 4.34308 0.680509 4.25335 0.8154 4.18475C0.95261 4.1149 1.09326 4.07053 1.2444 4.04332C1.39317 4.01659 1.54511 4.0077 1.69576 4.00362C1.76484 4.00174 1.83391 4.00097 1.90315 4.00048C1.98506 4 2.06726 4 2.14931 4ZM22.0931 4.51255L21.8507 4.51208H2.14932L1.90614 4.51256C1.84101 4.51301 1.77539 4.51372 1.70976 4.51551C1.59463 4.51862 1.46021 4.52483 1.33496 4.54733C1.22625 4.56689 1.13495 4.59669 1.04779 4.64107C0.960548 4.68544 0.881367 4.74296 0.812204 4.81216C0.742763 4.88158 0.685257 4.96072 0.641222 5.04741C0.596563 5.13512 0.566853 5.22627 0.547482 5.33471C0.524703 5.46083 0.518497 5.59498 0.515395 5.70968C0.513625 5.77524 0.512885 5.84083 0.512451 5.90645L0.512146 6.09858L0.512161 6.14942V17.2152L0.512146 17.2661L0.512465 17.4586C0.512886 17.5238 0.513625 17.5894 0.515395 17.655C0.518497 17.7696 0.524703 17.9037 0.547295 18.0288C0.566839 18.1382 0.596563 18.2294 0.64099 18.3167C0.685373 18.404 0.742778 18.483 0.811854 18.552C0.881467 18.6217 0.96039 18.6791 1.04708 18.7231C1.13518 18.768 1.22631 18.7978 1.33502 18.8174C1.46173 18.84 1.60178 18.8462 1.7096 18.8492C1.7734 18.8506 1.83939 18.8515 1.90552 18.8518C1.98651 18.8524 2.06621 18.8524 2.14575 18.8524H2.14611H2.14932H21.8507C21.9313 18.8524 22.0122 18.8524 22.0928 18.8518C22.1604 18.8515 22.2264 18.8506 22.2927 18.8491C22.3981 18.8462 22.5381 18.84 22.6658 18.8172C22.7736 18.7978 22.8647 18.768 22.9517 18.7236C23.0392 18.6793 23.1182 18.6219 23.1878 18.5523C23.2569 18.4831 23.3145 18.4039 23.3589 18.3166C23.4035 18.2293 23.4331 18.1384 23.4523 18.0303C23.475 17.9049 23.4812 17.7703 23.4843 17.6549C23.4861 17.5896 23.4869 17.5244 23.4873 17.4592C23.4879 17.3784 23.4879 17.2994 23.4879 17.2201V17.2152V6.14942V6.14511C23.4879 6.06564 23.4879 5.98637 23.4873 5.90705C23.4869 5.84028 23.4861 5.77506 23.4843 5.70984C23.4812 5.5943 23.475 5.45959 23.4526 5.33574C23.4331 5.22609 23.4035 5.13524 23.3591 5.04831C23.3146 4.96086 23.2569 4.88149 23.1875 4.81194C23.1183 4.74285 23.039 4.68525 22.9526 4.64131C22.8649 4.59671 22.7737 4.56689 22.6648 4.54729C22.5396 4.52484 22.4053 4.51862 22.2904 4.51552C22.2244 4.51372 22.1587 4.51301 22.0931 4.51255Z" fill="currentColor"/>
+<path d="M6.55187 9.1677C6.75737 8.91067 6.89682 8.56556 6.86004 8.21289C6.55922 8.22785 6.19213 8.41135 5.97961 8.66858C5.78878 8.88886 5.61989 9.24842 5.66392 9.58631C6.0016 9.6156 6.33897 9.41752 6.55187 9.1677Z" fill="currentColor"/>
+<path d="M6.85617 9.65235C6.36577 9.62314 5.94882 9.93067 5.71463 9.93067C5.48031 9.93067 5.12169 9.66707 4.73382 9.67417C4.22897 9.68159 3.76053 9.96703 3.50435 10.421C2.97741 11.3292 3.36529 12.6764 3.8777 13.4161C4.12654 13.782 4.42644 14.185 4.8216 14.1705C5.19495 14.1558 5.3413 13.9287 5.79513 13.9287C6.24863 13.9287 6.38045 14.1705 6.77567 14.1632C7.18552 14.1558 7.44176 13.797 7.69059 13.4307C7.97606 13.0136 8.09292 12.6108 8.10027 12.5887C8.09292 12.5813 7.30996 12.281 7.30269 11.3803C7.2953 10.6262 7.91741 10.2675 7.94669 10.2452C7.59538 9.72565 7.04647 9.66707 6.85617 9.65235Z" fill="currentColor"/>
+<path d="M11.1261 8.63086C12.192 8.63086 12.9342 9.36557 12.9342 10.4353C12.9342 11.5088 12.1767 12.2473 11.0994 12.2473H9.91928V14.124H9.06665V8.63086L11.1261 8.63086ZM9.91928 11.5316H10.8976C11.64 11.5316 12.0625 11.1319 12.0625 10.4391C12.0625 9.74629 11.64 9.35037 10.9014 9.35037H9.91928V11.5316Z" fill="currentColor"/>
+<path d="M13.157 12.9857C13.157 12.2852 13.6937 11.8551 14.6455 11.8018L15.7418 11.7371V11.4288C15.7418 10.9834 15.441 10.7169 14.9386 10.7169C14.4627 10.7169 14.1657 10.9453 14.0935 11.3031H13.3169C13.3626 10.5798 13.9792 10.0469 14.969 10.0469C15.9397 10.0469 16.5602 10.5608 16.5602 11.364V14.1239H15.7722V13.4653H15.7532C15.521 13.9107 15.0147 14.1924 14.4894 14.1924C13.7052 14.1924 13.157 13.7051 13.157 12.9857ZM15.7418 12.6241V12.3081L14.7558 12.369C14.2647 12.4033 13.9869 12.6203 13.9869 12.9629C13.9869 13.3131 14.2762 13.5415 14.7177 13.5415C15.2925 13.5415 15.7418 13.1456 15.7418 12.6241Z" fill="currentColor"/>
+<path d="M17.3041 15.5971V14.9309C17.3649 14.9461 17.5019 14.9461 17.5705 14.9461C17.9512 14.9461 18.1568 14.7862 18.2823 14.3751C18.2823 14.3675 18.3547 14.1315 18.3547 14.1277L16.9082 10.1191H17.7989L18.8116 13.3778H18.8267L19.8394 10.1191H20.7073L19.2073 14.3332C18.8649 15.304 18.469 15.6161 17.6391 15.6161C17.5705 15.6161 17.3649 15.6085 17.3041 15.5971Z" fill="currentColor"/>
+</svg>

package/src/hooks/useCustomer.ts

@@ -189,7 +189,18 @@ export const useCustomerQueries = () => {
         [queryKeys.LOYALTY, user?.uid, selectedBusinessId],
         async () => {
           if (isLoggedIn && selectedBusinessId) {
-            return await fetchSquareLoyalty(user.uid, selectedBusinessId);
+            const response = await fetchSquareLoyalty(
+              user.uid,
+              selectedBusinessId
+            );
+
+            if (response?.data?.error) {
+              throw new Error(
+                response.data.error.message || 'Unknown error occurred'
+              );
+            }
+
+            return response;
           } else {
             return { data: null };
           }
@@ -259,17 +270,26 @@ export const useCustomerQueries = () => {
       const mutation = useMutation(
         async () => {
           if (isLoggedIn && selectedBusinessId) {
-            await connectSquareLoyalty(user?.uid, {
+            const response = await connectSquareLoyalty(user?.uid, {
               businessId: selectedBusinessId,
               idempotentKey: uuid.v4() as string,
               uid: user?.uid,
             });
+
+            if (response?.data?.error) {
+              throw new Error(
+                response.data.error.message || 'Unknown error occurred'
+              );
+            }
+
+            return response;
           }
+          return null;
         },
         {
           onError: (err: { code: string; message: string }) =>
             Alert.show({
-              title: 'Code ' + err?.code,
+              title: err?.code ? 'Code ' + err?.code : '',
               description: err?.message,
             }),
           onSuccess: () => {

package/src/localization/translations/en.json

@@ -66,6 +66,9 @@
     "addCard": "Add card",
     "noSavedCards": "You have no saved card yet.",
     "paymentMethods": "Payment methods",
+    "selectPaymentMethod": "Select payment method to be used",
+    "selectValidPaymentMethod": "Select valid payment method to be used",
+    "noPaymentMethods": "You have no payment methods available",
     "payment": "Payment",
     "payAndPlaceOrder": "Pay & Place order",
     "payByCard": "Pay by card",
@@ -84,6 +87,8 @@
     },
     "termsTitle": "Terms of Service Update",
     "acceptTerms": "Accept Terms",
-    "version": "Version"
+    "version": "Version",
+    "error": "Error",
+    "cardSaveError": "Something went wrong saving the card"
   }
 }

package/src/screens/SavedCards/CardRow.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Alert, Card, IconButton, Text, View } from '../../components';
+import ApplePayIcon from '../../assets/icons/apple_pay.svg';
 import { RadioButton, useTheme } from 'react-native-paper';
 import { useTranslation } from 'react-i18next';
 import { getCardName } from '../../utils/checkout';
@@ -12,48 +13,55 @@ export const CardRow = ({
   isSelectable,
   isSelected,
   isDisabled,
+  isApplePay = false,
 }: {
-  card: CustomerCardPayment;
-  onDelete: (id: string) => void;
-  onSelect: (linkedObjectId: string) => void;
+  card?: CustomerCardPayment;
+  onDelete?: (id: string) => void;
+  onSelect?: (linkedObjectId: string) => void;
   isSelectable: boolean;
   isSelected: boolean;
   isDisabled: boolean;
+  isApplePay?: boolean;
 }) => {
-  const name = getCardName(card);
   const { t } = useTranslation();
   const theme = useTheme();
 
   const onDeleteCard = () => {
-    Alert.show({
-      title: t('commons.confirmCardDelete'),
-      description: t('commons.cardDeleteDesc', {
-        card: card.cardDetails.last4,
-      }),
-      buttons: [
-        {
-          label: t('commons.delete'),
-          textColor: theme.colors.error,
-          onPress: () => onDelete(card.id),
-        },
-        {
-          label: t('commons.cancel'),
-          textColor: theme.colors.onSurface,
-        },
-      ],
-    });
+    if (card) {
+      Alert.show({
+        title: t('commons.confirmCardDelete'),
+        description: t('commons.cardDeleteDesc', {
+          card: card.cardDetails.last4,
+        }),
+        buttons: [
+          {
+            label: t('commons.delete'),
+            textColor: theme.colors.error,
+            onPress: () => onDelete?.(card.id),
+          },
+          {
+            label: t('commons.cancel'),
+            textColor: theme.colors.onSurface,
+          },
+        ],
+      });
+    }
   };
 
+  const cardName = isApplePay ? 'Apple Pay' : getCardName(card!);
+
   return (
     <Card
       disabled={isDisabled}
       mode="outlined"
       borderRadius="4"
+      height={50}
+      justifyContent="center"
       mb="8"
       {...(isSelectable
         ? {
             onPress: () => {
-              onSelect(card.linkedObjectId);
+              onSelect?.(card?.linkedObjectId ?? '');
             },
           }
         : {})}
@@ -66,10 +74,10 @@ export const CardRow = ({
       >
         {isSelectable && (
           <RadioButton.Android
-            value={card.linkedObjectId}
+            value={card?.linkedObjectId || 'apple-pay'}
             status={isSelected ? 'checked' : 'unchecked'}
             onPress={() => {
-              onSelect(card.linkedObjectId);
+              onSelect?.(card?.linkedObjectId ?? '');
             }}
           />
         )}
@@ -80,13 +88,26 @@ export const CardRow = ({
           alignItems="center"
           justifyContent="space-between"
         >
-          <Text variant="bodyMedium">{name}</Text>
-          <IconButton
-            disabled={isDisabled}
-            icon="trash-can-outline"
-            bg="background"
-            onPress={onDeleteCard}
-          />
+          <View flexDirection="row" alignItems="center">
+            {isApplePay && (
+              <ApplePayIcon
+                height={24}
+                width={24}
+                color={theme.colors.onBackground}
+              />
+            )}
+            <Text ps={isApplePay ? '8' : '0'} variant="bodyMedium">
+              {cardName}
+            </Text>
+          </View>
+          {!isApplePay && (
+            <IconButton
+              disabled={isDisabled}
+              icon="trash-can-outline"
+              bg="background"
+              onPress={onDeleteCard}
+            />
+          )}
         </View>
       </View>
     </Card>

package/src/screens/SavedCards/SavedCards.tsx

@@ -10,19 +10,22 @@ import {
 import { ActivityIndicator, useTheme } from 'react-native-paper';
 import uuid from 'react-native-uuid';
 import { useTranslation } from 'react-i18next';
-import { FlatList } from 'react-native';
+import { FlatList, Platform } from 'react-native';
 import { onStartCardEntry } from '../../utils/square';
 import { useCustomerQueries } from '../../hooks/useCustomer';
 import { useCheckCustomer } from '../../hooks/useCheckCustomer';
 import { CardRow } from './CardRow';
 import { CustomerCardPayment } from '@kiosinc/commons-types';
+import { useApplePay } from './useApplePay';
 
 export const SavedCards = ({
   onCheckout,
+  showApplePay,
   total,
 }: {
-  onCheckout?: (selectedCard: CustomerCardPayment) => void;
+  onCheckout?: (selectedCard: CustomerCardPayment | 'ApplePay') => void;
   total?: string;
+  showApplePay?: boolean;
 }) => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -35,14 +38,15 @@ export const SavedCards = ({
   } = useCustomerQueries();
   const { saveCard, saveCardLoading } = useSaveCustomerCard();
   const { disableCard, disableCardLoading } = useDisableCard();
-  const [selectedPaymentId, onSelectPaymentId] = useState('');
+  const [selectedPaymentId, setSelectedPaymentId] = useState('');
   const { updateCustomer, updateCustomerLoading } = useUpdateCustomer();
+  const { hasApplePay } = useApplePay();
 
   useEffect(() => {
     if (customer?.paymentId) {
-      onSelectPaymentId(customer.paymentId);
+      setSelectedPaymentId(customer.paymentId);
     }
-  }, [customer?.paymentId, onSelectPaymentId]);
+  }, [customer?.paymentId]);
 
   const {
     data: cards = [],
@@ -51,7 +55,7 @@ export const SavedCards = ({
     refetch,
   } = useFetchSavedCards();
 
-  const onAddPress = () => {
+  const handleAddCard = () => {
     onStartCardEntry(
       (cardDetails) => {
         saveCard({
@@ -59,44 +63,50 @@ export const SavedCards = ({
           idempotentKey: uuid.v4() as string,
         });
       },
-      () => {}
+      () => {
+        Alert.show({
+          title: t('commons.error'),
+          description: t('commons.cardSaveError'),
+        });
+      }
     );
   };
 
-  const label =
-    cards.length > 0 ? t('commons.payAndPlaceOrder') : t('commons.payByCard');
+  const handleUseCard = () => {
+    if (!cards.length && !(hasApplePay && Platform.OS === 'ios')) {
+      Alert.show({ title: t('commons.noPaymentMethods') });
+      return;
+    }
 
-  if (isLoading) {
-    return <ActivityIndicator />;
-  }
+    if (!selectedPaymentId) {
+      Alert.show({ title: t('commons.selectPaymentMethod') });
+      return;
+    }
 
-  const onUseCard = () => {
-    if (cards.length === 0) {
-      // If no cards then initiate add card flow.
-      onStartCardEntry(
-        (cardDetails) => {
-          saveCard({
-            sourceId: cardDetails.nonce,
-            idempotentKey: uuid.v4() as string,
-          });
-        },
-        () => {}
-      );
-    } else if (!customer.paymentId) {
-      Alert.show({ title: 'Select a card' });
+    if (selectedPaymentId === 'ApplePay') {
+      onCheckout?.('ApplePay');
     } else {
-      // Make payment
       const selectedCard = cards.find(
-        (card: any) => card.linkedObjectId === customer.paymentId
+        (card: any) => card.linkedObjectId === selectedPaymentId
       );
+
       if (selectedCard) {
         onCheckout?.(selectedCard);
       } else {
-        Alert.show({ title: 'Select a card' });
+        Alert.show({ title: t('commons.selectValidPaymentMethod') });
       }
     }
   };
 
+  const paymentMethods =
+    hasApplePay && showApplePay && Platform.OS === 'ios'
+      ? [{ linkedObjectId: 'ApplePay', isApplePay: true }, ...cards]
+      : cards;
+
+  if (isLoading) {
+    return <ActivityIndicator />;
+  }
+
   return (
     <View flex={1}>
       <View px="16" bg="background" flex={1}>
@@ -106,49 +116,51 @@ export const SavedCards = ({
         <FlatList
           extraData={{ selectedPaymentId, disableCardLoading }}
           refreshControl={
-            <RefreshControl refreshing={false} onRefresh={refetch} />
+            <RefreshControl refreshing={isFetching} onRefresh={refetch} />
           }
-          data={cards}
+          data={paymentMethods}
           showsVerticalScrollIndicator={false}
-          renderItem={({ item: card, index }) => (
+          renderItem={({ item: card }) => (
             <CardRow
               isDisabled={disableCardLoading}
               isSelected={selectedPaymentId === card.linkedObjectId}
               isSelectable={!!onCheckout}
-              key={index}
+              isApplePay={card.isApplePay}
               card={card}
               onDelete={(id: string) => {
-                disableCard(id);
+                if (!card.isApplePay) {
+                  disableCard(id);
+                }
               }}
               onSelect={(linkedObjectId: string) => {
-                onSelectPaymentId(linkedObjectId);
-                updateCustomer({
-                  paymentId: linkedObjectId,
-                  addressId: customer.addressId,
-                  squareCustomerId: customer.squareCustomerId,
-                });
+                setSelectedPaymentId(linkedObjectId);
+                if (!card.isApplePay) {
+                  updateCustomer({
+                    paymentId: linkedObjectId,
+                    addressId: customer.addressId,
+                    squareCustomerId: customer.squareCustomerId,
+                  });
+                }
               }}
             />
           )}
           ListHeaderComponent={
-            <>
-              {cards.length > 0 ? (
-                <Text mb="8" variant="titleMedium">
-                  {t('commons.paymentMethods')}
-                </Text>
-              ) : (
-                <Text variant="bodyLarge" color="outline">
-                  {t('commons.noSavedCards')}
-                </Text>
-              )}
-            </>
+            paymentMethods.length > 0 ? (
+              <Text mb="8" variant="titleMedium">
+                {t('commons.paymentMethods')}
+              </Text>
+            ) : (
+              <Text variant="bodyLarge" color="outline">
+                {t('commons.noSavedCards')}
+              </Text>
+            )
           }
           ListFooterComponent={
             <View alignItems="flex-start">
               <Button
-                pt={'16'}
+                pt="16"
                 loading={saveCardLoading}
-                onPress={onAddPress}
+                onPress={handleAddCard}
                 icon="plus"
                 mode="text"
               >
@@ -178,17 +190,15 @@ export const SavedCards = ({
           <Button
             mode="contained"
             height={40}
-            width={'auto'}
+            width="auto"
             alignSelf="center"
             bg="primary"
-            labelStyle={[
-              {
-                color: theme.colors.background,
-              },
-            ]}
-            onPress={onUseCard}
+            labelStyle={{ color: theme.colors.background }}
+            onPress={handleUseCard}
           >
-            {label}
+            {cards.length > 0 || hasApplePay
+              ? t('commons.payAndPlaceOrder')
+              : t('commons.payByCard')}
           </Button>
         </View>
       )}

package/src/screens/SavedCards/useApplePay.tsx

@@ -0,0 +1,88 @@
+import { useState, useCallback, useEffect } from 'react';
+import { Platform } from 'react-native';
+// @ts-ignore
+import { SQIPApplePay } from 'react-native-square-in-app-payments';
+import { Alert } from '@kiosinc/commons-rn';
+
+export const useApplePay = () => {
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [hasApplePay, setHasApplePay] = useState(false);
+
+  useEffect(() => {
+    const checkApplePay = async () => {
+      const digitalWalletEnabled = await SQIPApplePay.canUseApplePay();
+      setHasApplePay(digitalWalletEnabled);
+    };
+
+    checkApplePay();
+  }, []);
+
+  // Handle Apple Pay Nonce Request Success
+  const onApplePayNonceRequestSuccess = useCallback(async (cardDetails) => {
+    try {
+      // Perform operations with cardDetails
+      // await chargeCard(cardDetails);
+
+      Alert.show({ title: JSON.stringify(cardDetails) });
+
+      // Close the Apple Pay sheet with success
+      await SQIPApplePay.completeApplePayAuthorization(true);
+    } catch (ex: any) {
+      await SQIPApplePay.completeApplePayAuthorization(false, ex.message);
+    }
+  }, []);
+
+  // Handle Apple Pay Nonce Request Failure
+  const onApplePayNonceRequestFailure = useCallback(async (errorInfo) => {
+    Alert.show({
+      title: errorInfo.message,
+      description: errorInfo.debugMessage,
+    });
+    await SQIPApplePay.completeApplePayAuthorization(false, errorInfo.message);
+  }, []);
+
+  // Handle Apple Pay Entry Completion
+  const onApplePayEntryComplete = useCallback(() => {
+    setIsProcessing(false);
+  }, []);
+
+  // Start Digital Wallet Flow
+  const startApplePay = useCallback(async () => {
+    if (Platform.OS === 'ios') {
+      if (hasApplePay) {
+        const applePayConfig = {
+          price: '0.1',
+          summaryLabel: 'Test Item',
+          countryCode: 'US',
+          currencyCode: 'USD',
+          paymentType: 2,
+        };
+        try {
+          setIsProcessing(true);
+          await SQIPApplePay.requestApplePayNonce(
+            applePayConfig,
+            onApplePayNonceRequestSuccess,
+            onApplePayNonceRequestFailure,
+            onApplePayEntryComplete
+          );
+        } catch (ex) {
+          setIsProcessing(false);
+          // Handle InAppPaymentsException
+        }
+      }
+    } else if (Platform.OS === 'android') {
+      // Android-specific digital wallet logic
+    }
+  }, [
+    onApplePayNonceRequestSuccess,
+    onApplePayNonceRequestFailure,
+    onApplePayEntryComplete,
+    hasApplePay,
+  ]);
+
+  return {
+    hasApplePay,
+    isProcessing,
+    startApplePay,
+  };
+};