Handle runtime config validation errors, add tests

Author: markmur

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

@@ -222,9 +222,9 @@ class ShopifyCheckoutSheet implements ShopifyCheckoutSheetKit {
       return false;
     }
 
-    this.validateAcceleratedCheckoutsConfiguration(config);
-
     try {
+      this.validateAcceleratedCheckoutsConfiguration(config);
+
       const configured =
         await RNShopifyCheckoutSheetKit.configureAcceleratedCheckouts(
           config.storefrontDomain,
@@ -238,8 +238,8 @@ class ShopifyCheckoutSheet implements ShopifyCheckoutSheetKit {
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(
-        'Failed to configured accelerated checkouts with config:',
-        config,
+        '[ShopifyCheckoutSheetKit] Failed to configure accelerated checkouts with',
+        error,
       );
       return false;
     }
@@ -288,18 +288,34 @@ class ShopifyCheckoutSheet implements ShopifyCheckoutSheetKit {
      * Required Accelerated Checkouts configuration properties
      */
     if (!acceleratedCheckouts?.storefrontDomain) {
-      throw new Error('storefrontDomain is required');
+      throw new Error('`storefrontDomain` is required');
     }
     if (!acceleratedCheckouts.storefrontAccessToken) {
-      throw new Error('storefrontAccessToken is required');
+      throw new Error('`storefrontAccessToken` is required');
     }
 
     /**
      * Validate Apple Pay config if available
      */
     if (acceleratedCheckouts.wallets?.applePay) {
       if (!acceleratedCheckouts.wallets.applePay.merchantIdentifier) {
-        throw new Error('wallets.applePay.merchantIdentifier is required');
+        throw new Error('`wallets.applePay.merchantIdentifier` is required');
+      }
+
+      const expectedContactFields = Object.values(ApplePayContactField);
+      const hasInvalidContactFields =
+        Array.isArray(acceleratedCheckouts.wallets.applePay.contactFields) &&
+        acceleratedCheckouts.wallets.applePay.contactFields.some(
+          value =>
+            !expectedContactFields.includes(
+              value.toLowerCase() as ApplePayContactField,
+            ),
+        );
+
+      if (hasInvalidContactFields) {
+        throw new Error(
+          `'wallets.applePay.contactFields' contains unexpected values. Expected "${expectedContactFields.join(', ')}", received "${acceleratedCheckouts.wallets.applePay.contactFields}"`,
+        );
       }
     }
   }

modules/@shopify/checkout-sheet-kit/tests/index.test.ts

@@ -1,4 +1,5 @@
 /* eslint-disable no-new */
+/* eslint-disable no-console */
 
 import {
   LifecycleEventParseError,
@@ -772,10 +773,15 @@ describe('ShopifyCheckoutSheetKit', () => {
           ...acceleratedConfig,
           storefrontDomain: '',
         };
+        const expectedError = new Error('`storefrontDomain` is required');
 
         await expect(
           instance.configureAcceleratedCheckouts(invalidConfig),
-        ).rejects.toThrow('storefrontDomain is required');
+        ).resolves.toBe(false);
+        expect(console.error).toHaveBeenCalledWith(
+          '[ShopifyCheckoutSheetKit] Failed to configure accelerated checkouts with',
+          expectedError,
+        );
       });
 
       it('validates required storefrontAccessToken', async () => {
@@ -785,9 +791,15 @@ describe('ShopifyCheckoutSheetKit', () => {
           storefrontAccessToken: '',
         };
 
+        const expectedError = new Error('`storefrontAccessToken` is required');
+
         await expect(
           instance.configureAcceleratedCheckouts(invalidConfig),
-        ).rejects.toThrow('storefrontAccessToken is required');
+        ).resolves.toBe(false);
+        expect(console.error).toHaveBeenCalledWith(
+          '[ShopifyCheckoutSheetKit] Failed to configure accelerated checkouts with',
+          expectedError,
+        );
       });
 
       it('validates required merchantIdentifier when Apple Pay is configured', async () => {
@@ -802,9 +814,42 @@ describe('ShopifyCheckoutSheetKit', () => {
           },
         };
 
+        const expectedError = new Error(
+          '`wallets.applePay.merchantIdentifier` is required',
+        );
+
         await expect(
           instance.configureAcceleratedCheckouts(invalidConfig),
-        ).rejects.toThrow('wallets.applePay.merchantIdentifier is required');
+        ).resolves.toBe(false);
+        expect(console.error).toHaveBeenCalledWith(
+          '[ShopifyCheckoutSheetKit] Failed to configure accelerated checkouts with',
+          expectedError,
+        );
+      });
+
+      it('validates required contactFields when Apple Pay is configured', async () => {
+        const instance = new ShopifyCheckoutSheet();
+        const invalidConfig = {
+          ...acceleratedConfig,
+          wallets: {
+            applePay: {
+              contactFields: ['invalid'],
+              merchantIdentifier: 'merchant.test.com',
+            },
+          },
+        };
+
+        const expectedError = new Error(
+          `'wallets.applePay.contactFields' contains unexpected values. Expected "email, phone", received "invalid"`,
+        );
+
+        await expect(
+          instance.configureAcceleratedCheckouts(invalidConfig as any),
+        ).resolves.toBe(false);
+        expect(console.error).toHaveBeenCalledWith(
+          '[ShopifyCheckoutSheetKit] Failed to configure accelerated checkouts with',
+          expectedError,
+        );
       });
 
       it('does not throw when Apple Pay wallet is not configured', async () => {

sample/src/App.tsx

@@ -356,6 +356,17 @@ function AppWithNavigation({children}: PropsWithChildren) {
     };
   }, [appConfig.colorScheme, updatedColors]);
 
+  const [contactFields, setContactFields] = useState<ApplePayContactField[]>([
+    ApplePayContactField.email,
+    ApplePayContactField.phone,
+  ]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setContactFields(['invalid']);
+    }, 3000);
+  }, []);
+
   const checkoutKitConfig: Configuration = useMemo(() => {
     return {
       ...checkoutKitConfigDefaults,
@@ -380,15 +391,13 @@ function AppWithNavigation({children}: PropsWithChildren) {
              * In cases where customers are authenticated, email/phone will be provided through the customer property,
              * In cases where customers are NOT authenticated, we will collect email and phone number via the Apple Pay sheet.
              */
-            contactFields: appConfig.customerAuthenticated
-              ? []
-              : [ApplePayContactField.email, ApplePayContactField.phone],
+            contactFields: contactFields,
             merchantIdentifier: env.STOREFRONT_MERCHANT_IDENTIFIER!,
           },
         },
       },
     } as Configuration;
-  }, [appConfig, checkoutKitThemeConfig]);
+  }, [appConfig, checkoutKitThemeConfig, contactFields]);
 
   return (
     <ShopifyCheckoutSheetProvider