Bump dependency versions, expose isFirstOrder and closeButton configurability

kiftio · kiftio · commit a4e1ce4a34d7 · 2025-07-14T09:21:36.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -106,3 +106,6 @@ sample/vendor
 
 # Sample app
 sample/**/AndroidManifest.xml
+
+.claude/
+CLAUDE.md
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## 3.3.0 - Jul 14, 2025
+
+- Upgrades Swift dependency to 3.3.0
+- Upgrades Android dependency to 3.5.0
+- Adds GooglePay support for eligible devices in Android
+- Adds isFirstOrder to web pixel events
+- Allow customizing sheet close button color
+- React Native dependency updates
+- Sample updates - fix for automatic scheme, stringify objects before logging.
+
 ## 3.2.0 - December 18, 2024
 
 - Handle geolocation requests for Android devices
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -11,7 +11,7 @@ This repo is subdivided into 3 parts using yarn workspaces:
 - The `@shopify/checkout-sheet-kit` Native Module (workspace name = `module`)
 - The sample application (workspace name = `sample`)
 
-Each of the worksapces contains a separate `package.json` to manage tasks
+Each of the workspaces contains a separate `package.json` to manage tasks
 specific to each workspace.
 
 ## Getting started
@@ -132,7 +132,7 @@ Replace the details in the `sample/.env.example` file and rename it to
 # Storefront Details
 STOREFRONT_DOMAIN="YOUR_STORE.myshopify.com"
 STOREFRONT_ACCESS_TOKEN="YOUR_PUBLIC_STOREFRONT_ACCESS_TOKEN"
-STOREFRONT_VERSION="2024-04"
+STOREFRONT_VERSION="2025-07"
 ```
 
 ### Start the sample app
diff --git a/README.md b/README.md
@@ -202,7 +202,7 @@ import {STOREFRONT_NAME, STOREFRONT_ACCESS_TOKEN} from '@env';
 
 // Create a new instance of the ApolloClient
 const client = new ApolloClient({
-  uri: `https://${STOREFRONT_NAME}.myshopify.com/api/2024-01/graphql.json`,
+  uri: `https://${STOREFRONT_NAME}.myshopify.com/api/2025-07/graphql.json`,
   headers: {
     'X-Shopify-Storefront-Access-Token': STOREFRONT_ACCESS_TOKEN,
   },
@@ -382,12 +382,14 @@ const config: Configuration = {
     ios: {
       backgroundColor: '#ffffff',
       tintColor: '#000000',
+      closeButtonColor: '#333333',
     },
     android: {
       backgroundColor: '#ffffff',
       progressIndicator: '#2d2a38',
       headerBackgroundColor: '#ffffff',
       headerTextColor: '#000000',
+      closeButtonColor: '#333333',
     },
   },
 };
@@ -414,12 +416,14 @@ const config: Configuration = {
         progressIndicator: '#2d2a38',
         headerBackgroundColor: '#ffffff',
         headerTextColor: '#000000',
+        closeButtonColor: '#000000',
       },
       dark: {
         backgroundColor: '#000000',
         progressIndicator: '#0087ff',
         headerBackgroundColor: '#000000',
         headerTextColor: '#ffffff',
+        closeButtonColor: '#ffffff',
       },
     },
   },
diff --git a/modules/@shopify/checkout-sheet-kit/RNShopifyCheckoutSheetKit.podspec b/modules/@shopify/checkout-sheet-kit/RNShopifyCheckoutSheetKit.podspec
@@ -20,7 +20,7 @@ Pod::Spec.new do |s|
   s.source_files = "ios/*.{h,m,mm,swift}"
 
 	s.dependency "React-Core"
-	s.dependency "ShopifyCheckoutSheetKit", "~> 3.1.2"
+	s.dependency "ShopifyCheckoutSheetKit", "~> 3.3.0"
 
   if fabric_enabled
 		install_modules_dependencies(s)
diff --git a/modules/@shopify/checkout-sheet-kit/android/build.gradle b/modules/@shopify/checkout-sheet-kit/android/build.gradle
@@ -5,7 +5,7 @@ buildscript {
   }
 
   dependencies {
-    classpath "com.android.tools.build:gradle:7.4.2"
+    classpath "com.android.tools.build:gradle:8.11.0"
   }
 }
 
@@ -32,10 +32,10 @@ static def supportsNamespace() {
   return (major == 7 && minor >= 3) || major >= 8
 }
 
-buildToolsVersion = "33.0.0"
+buildToolsVersion = "35.0.0"
 minSdkVersion = 23
-compileSdkVersion = 33
-targetSdkVersion = 33
+compileSdkVersion = 36
+targetSdkVersion = 35
 
 // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
 ndkVersion = "23.1.7779620"
diff --git a/modules/@shopify/checkout-sheet-kit/android/gradle.properties b/modules/@shopify/checkout-sheet-kit/android/gradle.properties
@@ -1,8 +1,8 @@
 minSdkVersion=23
-targetSdkVersion=33
-compileSdkVersion=33
+targetSdkVersion=35
+compileSdkVersion=36
 ndkVersion=23.1.7779620
-buildToolsVersion = "33.0.0"
+buildToolsVersion = "35.0.0"
 
 # Version of Shopify Checkout SDK to use with React Native
-SHOPIFY_CHECKOUT_SDK_VERSION=3.3.0
+SHOPIFY_CHECKOUT_SDK_VERSION=3.5.0
diff --git a/modules/@shopify/checkout-sheet-kit/android/src/main/java/com/shopify/reactnative/checkoutsheetkit/ShopifyCheckoutSheetKitModule.java b/modules/@shopify/checkout-sheet-kit/android/src/main/java/com/shopify/reactnative/checkoutsheetkit/ShopifyCheckoutSheetKitModule.java
@@ -194,14 +194,21 @@ private boolean isValidColorConfig(ReadableMap config) {
       return false;
     }
 
-    String[] colorKeys = { "backgroundColor", "progressIndicator", "headerTextColor", "headerBackgroundColor" };
+    String[] requiredColorKeys = { "backgroundColor", "progressIndicator", "headerTextColor", "headerBackgroundColor" };
 
-    for (String key : colorKeys) {
+    for (String key : requiredColorKeys) {
       if (!config.hasKey(key) || config.getString(key) == null || parseColor(config.getString(key)) == null) {
         return false;
       }
     }
 
+    // closeButtonColor is optional, so we only validate it if it's present
+    if (config.hasKey("closeButtonColor") && config.getString("closeButtonColor") != null) {
+      if (parseColor(config.getString("closeButtonColor")) == null) {
+        return false;
+      }
+    }
+
     return true;
   }
 
@@ -242,13 +249,17 @@ private Colors createColorsFromConfig(ReadableMap config) {
     Color headerBackground = parseColorFromConfig(config, "headerBackgroundColor");
     Color headerFont = parseColorFromConfig(config, "headerTextColor");
     Color progressIndicator = parseColorFromConfig(config, "progressIndicator");
+    Color closeButtonColor = parseColorFromConfig(config, "closeButtonColor");
 
     if (webViewBackground != null && progressIndicator != null && headerFont != null && headerBackground != null) {
       return new Colors(
           webViewBackground,
           headerBackground,
           headerFont,
-          progressIndicator);
+          progressIndicator,
+          null,
+          closeButtonColor
+        );
     }
 
     return null;
diff --git a/modules/@shopify/checkout-sheet-kit/ios/ShopifyCheckoutSheetKit.swift b/modules/@shopify/checkout-sheet-kit/ios/ShopifyCheckoutSheetKit.swift
@@ -242,6 +242,10 @@ class RCTShopifyCheckoutSheetKit: RCTEventEmitter, CheckoutDelegate {
 		if let backgroundColorHex = iosConfig?["backgroundColor"] as? String {
 			ShopifyCheckoutSheetKit.configuration.backgroundColor = UIColor(hex: backgroundColorHex)
 		}
+
+		if let closeButtonColorHex = iosConfig?["closeButtonColor"] as? String {
+			ShopifyCheckoutSheetKit.configuration.closeButtonTintColor = UIColor(hex: closeButtonColorHex)
+		}
 	}
 
 	@objc func getConfig(_ resolve: @escaping RCTPromiseResolveBlock, reject _: @escaping RCTPromiseRejectBlock) {
@@ -250,7 +254,8 @@ class RCTShopifyCheckoutSheetKit: RCTEventEmitter, CheckoutDelegate {
 			"preloading": ShopifyCheckoutSheetKit.configuration.preloading.enabled,
 			"colorScheme": ShopifyCheckoutSheetKit.configuration.colorScheme.rawValue,
 			"tintColor": ShopifyCheckoutSheetKit.configuration.tintColor,
-			"backgroundColor": ShopifyCheckoutSheetKit.configuration.backgroundColor
+			"backgroundColor": ShopifyCheckoutSheetKit.configuration.backgroundColor,
+			"closeButtonColor": ShopifyCheckoutSheetKit.configuration.closeButtonTintColor
 		]
 
 		resolve(config)
diff --git a/modules/@shopify/checkout-sheet-kit/package.json b/modules/@shopify/checkout-sheet-kit/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shopify/checkout-sheet-kit",
   "license": "MIT",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "main": "lib/commonjs/index.js",
   "types": "src/index.ts",
   "source": "src/index.ts",
diff --git a/modules/@shopify/checkout-sheet-kit/src/index.d.ts b/modules/@shopify/checkout-sheet-kit/src/index.d.ts
@@ -56,6 +56,10 @@ export interface IosColors {
    * A HEX color value for customizing the background color of the webview.
    */
   backgroundColor?: string;
+  /**
+   * A HEX color value for customizing the color of the close button.
+   */
+  closeButtonColor?: string;
 }
 
 export interface AndroidColors {
@@ -75,6 +79,10 @@ export interface AndroidColors {
    * A HEX color value for customizing the text color of the webview header.
    */
   headerTextColor: string;
+  /**
+   * A HEX color value for customizing the color of the close button.
+   */
+  closeButtonColor?: string;
 }
 
 export interface AndroidAutomaticColors {
diff --git a/modules/@shopify/checkout-sheet-kit/src/pixels.d.ts b/modules/@shopify/checkout-sheet-kit/src/pixels.d.ts
@@ -491,6 +491,8 @@ interface Order {
 interface OrderCustomer {
   /* The ID of the customer. */
   id?: string;
+  /* Indicates whether the customer is a first-time buyer. */
+  isFirstOrder?: boolean;
 }
 
 /**
diff --git a/sample/.env.example b/sample/.env.example
@@ -3,7 +3,7 @@ STOREFRONT_DOMAIN="YOUR_STORE.myshopify.com"
 STOREFRONT_ACCESS_TOKEN="YOUR_PUBLIC_STOREFRONT_ACCESS_TOKEN"
 
 # Storefront API version
-STOREFRONT_VERSION="2024-04"
+STOREFRONT_VERSION="2025-07"
 
 # Prefilled buyer information
 EMAIL="checkout-kit@shopify.com"
diff --git a/sample/android/app/src/test/java/com/shopify/checkoutkitreactnative/ShopifyCheckoutSheetKitModuleTest.java b/sample/android/app/src/test/java/com/shopify/checkoutkitreactnative/ShopifyCheckoutSheetKitModuleTest.java
@@ -30,6 +30,7 @@
 import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertFalse;
 import static org.junit.Assert.assertTrue;
+import static org.junit.Assert.fail;
 import static org.mockito.Mockito.*;
 
 import android.content.Context;
@@ -76,6 +77,18 @@ public class ShopifyCheckoutSheetKitModuleTest {
   @Mock
   private CheckoutException mockCheckoutException;
 
+  // Test constants for color configuration
+  private static final String BACKGROUND_COLOR = "#FFFFFF";
+  private static final String PROGRESS_INDICATOR = "#000000";
+  private static final String HEADER_BACKGROUND_COLOR = "#FFFFFF";
+  private static final String HEADER_TEXT_COLOR = "#000000";
+
+  // Dark theme colors
+  private static final String DARK_BACKGROUND_COLOR = "#000000";
+  private static final String DARK_PROGRESS_INDICATOR = "#FFFFFF";
+  private static final String DARK_HEADER_BACKGROUND_COLOR = "#000000";
+  private static final String DARK_HEADER_TEXT_COLOR = "#FFFFFF";
+
   @Before
   public void setup() {
     when(mockReactContext.getCurrentActivity()).thenReturn(mockComponentActivity);
@@ -129,6 +142,73 @@ public void setsInternalConfig() {
     assertEquals(colorScheme, "dark");
   }
 
+  @Test
+  public void setsConfigWithCloseButtonColor() {
+    JavaOnlyMap androidColors = createLightAndroidColors();
+    androidColors.putString("closeButtonColor", "#FF0000");
+    JavaOnlyMap config = createConfigWithAndroidColors("light", androidColors);
+
+    shopifyCheckoutSheetKitModule.setConfig(config);
+
+    String colorScheme = ShopifyCheckoutSheetKitModule.checkoutConfig.getColorScheme().getId();
+    assertEquals("light", colorScheme);
+  }
+
+  @Test
+  public void setsConfigWithMissingCloseButtonColor() {
+    // Missing closeButtonColor - should not crash
+    JavaOnlyMap androidColors = createLightAndroidColors();
+    JavaOnlyMap config = createConfigWithAndroidColors("light", androidColors);
+
+    shopifyCheckoutSheetKitModule.setConfig(config);
+
+    String colorScheme = ShopifyCheckoutSheetKitModule.checkoutConfig.getColorScheme().getId();
+    assertEquals("light", colorScheme);
+  }
+
+  @Test
+  public void setsConfigWithInvalidCloseButtonColor() {
+    JavaOnlyMap androidColors = createLightAndroidColors();
+    androidColors.putString("closeButtonColor", "invalid-color");
+    JavaOnlyMap config = createConfigWithAndroidColors("light", androidColors);
+
+    // The method should not throw an exception when given invalid close button color
+    try {
+      shopifyCheckoutSheetKitModule.setConfig(config);
+    } catch (Exception e) {
+      fail("setConfig should not throw exception for invalid close button color: " + e.getMessage());
+    }
+
+    // Verify the color scheme was set correctly despite invalid close button color
+    String colorScheme = ShopifyCheckoutSheetKitModule.checkoutConfig.getColorScheme().getId();
+    assertEquals("light", colorScheme);
+  }
+
+  @Test
+  public void setsAutomaticConfigWithCloseButtonColors() {
+    JavaOnlyMap lightColors = createLightAndroidColors();
+    lightColors.putString("closeButtonColor", "#000000");
+
+    JavaOnlyMap darkColors = createDarkAndroidColors();
+    darkColors.putString("closeButtonColor", "#FFFFFF");
+
+    JavaOnlyMap androidColors = new JavaOnlyMap();
+    androidColors.putMap("light", lightColors);
+    androidColors.putMap("dark", darkColors);
+
+    JavaOnlyMap colorsConfig = new JavaOnlyMap();
+    colorsConfig.putMap("android", androidColors);
+
+    JavaOnlyMap config = new JavaOnlyMap();
+    config.putString("colorScheme", "automatic");
+    config.putMap("colors", colorsConfig);
+
+    shopifyCheckoutSheetKitModule.setConfig(config);
+
+    String colorScheme = ShopifyCheckoutSheetKitModule.checkoutConfig.getColorScheme().getId();
+    assertEquals("automatic", colorScheme);
+  }
+
   @Test
   public void sendsStandardPixelEventOnWebPixelEvent() {
     PixelEvent event = new StandardPixelEvent(
@@ -295,4 +375,37 @@ public void sendsGeneralErrorEventOnCheckoutFailed() {
     assertTrue(capturedString.contains("\"code\":\"unknown\""));
     assertTrue(capturedString.contains("\"recoverable\":true"));
   }
+
+  // Helper methods
+
+  private JavaOnlyMap createLightAndroidColors() {
+    JavaOnlyMap androidColors = new JavaOnlyMap();
+    androidColors.putString("backgroundColor", BACKGROUND_COLOR);
+    androidColors.putString("progressIndicator", PROGRESS_INDICATOR);
+    androidColors.putString("headerBackgroundColor", HEADER_BACKGROUND_COLOR);
+    androidColors.putString("headerTextColor", HEADER_TEXT_COLOR);
+    return androidColors;
+  }
+
+  private JavaOnlyMap createDarkAndroidColors() {
+    JavaOnlyMap androidColors = new JavaOnlyMap();
+    androidColors.putString("backgroundColor", DARK_BACKGROUND_COLOR);
+    androidColors.putString("progressIndicator", DARK_PROGRESS_INDICATOR);
+    androidColors.putString("headerBackgroundColor", DARK_HEADER_BACKGROUND_COLOR);
+    androidColors.putString("headerTextColor", DARK_HEADER_TEXT_COLOR);
+    return androidColors;
+  }
+
+  /**
+   * Creates a configuration with the given color scheme and Android colors
+   */
+  private JavaOnlyMap createConfigWithAndroidColors(String colorScheme, JavaOnlyMap androidColors) {
+    JavaOnlyMap colorsConfig = new JavaOnlyMap();
+    colorsConfig.putMap("android", androidColors);
+
+    JavaOnlyMap config = new JavaOnlyMap();
+    config.putString("colorScheme", colorScheme);
+    config.putMap("colors", colorsConfig);
+    return config;
+  }
 }
diff --git a/sample/android/gradle.properties b/sample/android/gradle.properties
@@ -41,4 +41,4 @@ newArchEnabled=false
 hermesEnabled=true
 
 # Note: only used here for testing
-SHOPIFY_CHECKOUT_SDK_VERSION=3.3.0
+SHOPIFY_CHECKOUT_SDK_VERSION=3.5.0
diff --git a/sample/ios/Podfile.lock b/sample/ios/Podfile.lock
diff --git a/sample/ios/ReactNativeTests/ShopifyCheckoutSheetKitTests.swift b/sample/ios/ReactNativeTests/ShopifyCheckoutSheetKitTests.swift
diff --git a/sample/src/App.tsx b/sample/src/App.tsx
diff --git a/sample/src/context/Theme.tsx b/sample/src/context/Theme.tsx
diff --git a/sample/src/screens/SettingsScreen.tsx b/sample/src/screens/SettingsScreen.tsx

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ buildscript {`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`dependencies {`
`8`		`- classpath "com.android.tools.build:gradle:7.4.2"`
	`8`	`+ classpath "com.android.tools.build:gradle:8.11.0"`
`9`	`9`	`}`
`10`	`10`	`}`
`11`	`11`
`@@ -32,10 +32,10 @@ static def supportsNamespace() {`
`32`	`32`	`return (major == 7 && minor >= 3) \|\| major >= 8`
`33`	`33`	`}`
`34`	`34`
`35`		`-buildToolsVersion = "33.0.0"`
	`35`	`+buildToolsVersion = "35.0.0"`
`36`	`36`	`minSdkVersion = 23`
`37`		`-compileSdkVersion = 33`
`38`		`-targetSdkVersion = 33`
	`37`	`+compileSdkVersion = 36`
	`38`	`+targetSdkVersion = 35`
`39`	`39`
`40`	`40`	`// We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.`
`41`	`41`	`ndkVersion = "23.1.7779620"`
Original file line number	Diff line number	Diff line change
`@@ -242,6 +242,10 @@ class RCTShopifyCheckoutSheetKit: RCTEventEmitter, CheckoutDelegate {`
`242`	`242`	`if let backgroundColorHex = iosConfig?["backgroundColor"] as? String {`
`243`	`243`	`ShopifyCheckoutSheetKit.configuration.backgroundColor = UIColor(hex: backgroundColorHex)`
`244`	`244`	`}`
	`245`	`+`
	`246`	`+ if let closeButtonColorHex = iosConfig?["closeButtonColor"] as? String {`
	`247`	`+ ShopifyCheckoutSheetKit.configuration.closeButtonTintColor = UIColor(hex: closeButtonColorHex)`
	`248`	`+ }`
`245`	`249`	`}`
`246`	`250`
`247`	`251`	`@objc func getConfig(_ resolve: @escaping RCTPromiseResolveBlock, reject _: @escaping RCTPromiseRejectBlock) {`
`@@ -250,7 +254,8 @@ class RCTShopifyCheckoutSheetKit: RCTEventEmitter, CheckoutDelegate {`
`250`	`254`	`"preloading": ShopifyCheckoutSheetKit.configuration.preloading.enabled,`
`251`	`255`	`"colorScheme": ShopifyCheckoutSheetKit.configuration.colorScheme.rawValue,`
`252`	`256`	`"tintColor": ShopifyCheckoutSheetKit.configuration.tintColor,`
`253`		`- "backgroundColor": ShopifyCheckoutSheetKit.configuration.backgroundColor`
	`257`	`+ "backgroundColor": ShopifyCheckoutSheetKit.configuration.backgroundColor,`
	`258`	`+ "closeButtonColor": ShopifyCheckoutSheetKit.configuration.closeButtonTintColor`
`254`	`259`	`]`
`255`	`260`
`256`	`261`	`resolve(config)`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@shopify/checkout-sheet-kit",`
`3`	`3`	`"license": "MIT",`
`4`		`- "version": "3.2.0",`
	`4`	`+ "version": "3.3.0",`
`5`	`5`	`"main": "lib/commonjs/index.js",`
`6`	`6`	`"types": "src/index.ts",`
`7`	`7`	`"source": "src/index.ts",`