Improvements

Author: markmur

modules/@shopify/checkout-sheet-kit/ios/AcceleratedCheckoutButtons.swift

@@ -61,7 +61,7 @@ class RCTAcceleratedCheckoutButtonsManager: RCTViewManager {
             return RCTAcceleratedCheckoutButtonsView()
         }
 
-        // Return an empty view for iOS < 17.0 (silent fallback)
+        // Return an empty view for iOS < 16.0 (silent fallback)
         return UIView()
     }
 

modules/@shopify/checkout-sheet-kit/ios/ShopifyCheckoutSheetKit.swift

@@ -240,11 +240,19 @@ class RCTShopifyCheckoutSheetKit: RCTEventEmitter, CheckoutDelegate {
         )
 
         if let merchantIdentifier = applePayMerchantIdentifier, let contactFields = applyPayContactFields {
-            acceleratedCheckoutsApplePayConfiguration = ShopifyAcceleratedCheckouts.ApplePayConfiguration(
-                merchantIdentifier: merchantIdentifier,
-                contactFields: contactFieldsToRequiredContactFields(contactFields)
-            )
-            AcceleratedCheckoutConfiguration.shared.applePayConfiguration = acceleratedCheckoutsApplePayConfiguration as? ShopifyAcceleratedCheckouts.ApplePayConfiguration
+            do {
+                let fields = try contactFieldsToRequiredContactFields(contactFields)
+
+                acceleratedCheckoutsApplePayConfiguration = ShopifyAcceleratedCheckouts.ApplePayConfiguration(
+                    merchantIdentifier: merchantIdentifier,
+                    contactFields: fields
+                )
+
+                AcceleratedCheckoutConfiguration.shared.applePayConfiguration = acceleratedCheckoutsApplePayConfiguration as? ShopifyAcceleratedCheckouts.ApplePayConfiguration
+            } catch {
+                resolve(false)
+                return
+            }
         }
 
         AcceleratedCheckoutConfiguration.shared.configuration = acceleratedCheckoutsConfiguration as? ShopifyAcceleratedCheckouts.Configuration
@@ -283,15 +291,17 @@ class RCTShopifyCheckoutSheetKit: RCTEventEmitter, CheckoutDelegate {
     // MARK: - Private
 
     @available(iOS 16.0, *)
-    private func contactFieldsToRequiredContactFields(_ contactFields: [String]) -> [ShopifyAcceleratedCheckouts.RequiredContactFields] {
-        return contactFields.compactMap {
+    private func contactFieldsToRequiredContactFields(_ contactFields: [String]) throws -> [ShopifyAcceleratedCheckouts.RequiredContactFields] {
+        return try contactFields.compactMap {
             switch $0 {
             case "email":
                 return ShopifyAcceleratedCheckouts.RequiredContactFields.email
             case "phone":
                 return ShopifyAcceleratedCheckouts.RequiredContactFields.phone
             default:
-                return nil
+                let message = "Unknown contactField option: \(String(describing: $0))"
+                print("[ShopifyCheckoutSheetKit] \(message)")
+                throw NSError(domain: "ShopifyCheckoutSheetKit", code: 1, userInfo: ["message": message])
             }
         }
     }

modules/@shopify/checkout-sheet-kit/src/components/AcceleratedCheckoutButtons.tsx

@@ -35,6 +35,7 @@ export enum RenderState {
   Loading = 'loading',
   Rendered = 'rendered',
   Error = 'error',
+  Unknown = 'unknown',
 }
 
 export enum ApplePayLabel {
@@ -102,7 +103,13 @@ interface CommonAcceleratedCheckoutButtonsProps {
    * Called when the render state changes
    * States from SDK: loading, rendered, error
    */
-  onRenderStateChange?: (state: RenderState, reason?: string) => void;
+  onRenderStateChange?: (
+    event:
+      | {state: RenderState.Error; reason?: string}
+      | {state: RenderState.Loading}
+      | {state: RenderState.Rendered}
+      | {state: RenderState.Unknown},
+  ) => void;
 
   /**
    * Called when a web pixel event is triggered
@@ -151,7 +158,9 @@ interface NativeAcceleratedCheckoutButtonsProps {
   onFail?: (event: {nativeEvent: CheckoutException}) => void;
   onComplete?: (event: {nativeEvent: CheckoutCompletedEvent}) => void;
   onCancel?: () => void;
-  onRenderStateChange?: (event: {nativeEvent: {state: string}}) => void;
+  onRenderStateChange?: (event: {
+    nativeEvent: {state: string; reason?: string | undefined};
+  }) => void;
   onWebPixelEvent?: (event: {nativeEvent: PixelEvent}) => void;
   onClickLink?: (event: {nativeEvent: {url: string}}) => void;
   onSizeChange?: (event: {nativeEvent: {height: number}}) => void;
@@ -220,17 +229,14 @@ export const AcceleratedCheckoutButtons: React.FC<
   }, [onCancel]);
 
   const handleRenderStateChange = useCallback(
-    (event: {nativeEvent: {state: string; reason?: string}}) => {
-      if (event.nativeEvent?.state) {
-        if (isRenderStateError(event.nativeEvent.state)) {
-          onRenderStateChange?.(
-            event.nativeEvent.state,
-            event.nativeEvent.reason ?? '',
-          );
-          return;
-        }
-
-        onRenderStateChange?.(event.nativeEvent.state as RenderState);
+    (event: {nativeEvent: {state: string; reason?: string | undefined}}) => {
+      const state = validRenderState(event.nativeEvent.state);
+      const reason = event.nativeEvent.reason;
+
+      if (state === RenderState.Error) {
+        onRenderStateChange?.({state, reason});
+      } else {
+        onRenderStateChange?.({state});
       }
     },
     [onRenderStateChange],
@@ -319,8 +325,11 @@ export const AcceleratedCheckoutButtons: React.FC<
 
 export default AcceleratedCheckoutButtons;
 
-function isRenderStateError(state: string): state is RenderState.Error {
-  return state === RenderState.Error;
+function validRenderState(state: string): RenderState {
+  return (
+    Object.values(RenderState).find(renderState => renderState === state) ??
+    RenderState.Unknown
+  );
 }
 
 function isCartProps(

modules/@shopify/checkout-sheet-kit/src/index.ts

@@ -224,17 +224,25 @@ class ShopifyCheckoutSheet implements ShopifyCheckoutSheetKit {
 
     this.validateAcceleratedCheckoutsConfiguration(config);
 
-    const configured =
-      await RNShopifyCheckoutSheetKit.configureAcceleratedCheckouts(
-        config.storefrontDomain,
-        config.storefrontAccessToken,
-        config.customer?.email || null,
-        config.customer?.phoneNumber || null,
-        config.wallets?.applePay?.merchantIdentifier || null,
-        config.wallets?.applePay?.contactFields || [],
+    try {
+      const configured =
+        await RNShopifyCheckoutSheetKit.configureAcceleratedCheckouts(
+          config.storefrontDomain,
+          config.storefrontAccessToken,
+          config.customer?.email || null,
+          config.customer?.phoneNumber || null,
+          config.wallets?.applePay?.merchantIdentifier || null,
+          config.wallets?.applePay?.contactFields || [],
+        );
+      return configured;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'Failed to configured accelerated checkouts with config:',
+        config,
       );
-
-    return configured;
+      return false;
+    }
   }
 
   /**

sample/ios/ReactNative/Info.plist

@@ -50,8 +50,6 @@
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string>Your location is required to locate pickup points near you.</string>
-	<key>RCTNewArchEnabled</key>
-	<true/>
 	<key>UIAppFonts</key>
 	<array>
 		<string>Entypo.ttf</string>

sample/src/hooks/useCheckoutEventHandlers.ts

@@ -7,15 +7,14 @@ import type {
   CheckoutCompletedEvent,
   CheckoutException,
   PixelEvent,
-  RenderState,
 } from '@shopify/checkout-sheet-kit';
 import {Linking} from 'react-native';
 
 interface EventHandlers {
   onFail?: (error: CheckoutException) => void;
   onComplete?: (event: CheckoutCompletedEvent) => void;
   onCancel?: () => void;
-  onRenderStateChange?: (state: RenderState) => void;
+  onRenderStateChange?: (event: any) => void;
   onShouldRecoverFromError?: (error: {message: string}) => boolean;
   onWebPixelEvent?: (event: PixelEvent) => void;
   onClickLink?: (url: string) => void;
@@ -37,8 +36,8 @@ export function useShopifyEventHandlers(name?: string): EventHandlers {
       onCancel: () => {
         log('onCancel');
       },
-      onRenderStateChange: state => {
-        log('onRenderStateChange', state);
+      onRenderStateChange: event => {
+        log('onRenderStateChange', event);
       },
       onWebPixelEvent: event => {
         log('onWebPixelEvent', event.name);