Release 3.3.0

.gitignore

@@ -106,3 +106,6 @@ sample/vendor
 
 # Sample app
 sample/**/AndroidManifest.xml
+
+.claude/
+CLAUDE.md

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 3.3.0 - Aug 12, 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

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

README.md

@@ -204,7 +204,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,
   },
@@ -384,12 +384,14 @@ const config: Configuration = {
     ios: {
       backgroundColor: '#ffffff',
       tintColor: '#000000',
+      closeButtonColor: '#333333',
     },
     android: {
       backgroundColor: '#ffffff',
       progressIndicator: '#2d2a38',
       headerBackgroundColor: '#ffffff',
       headerTextColor: '#000000',
+      closeButtonColor: '#333333',
     },
   },
 };
@@ -416,12 +418,14 @@ const config: Configuration = {
         progressIndicator: '#2d2a38',
         headerBackgroundColor: '#ffffff',
         headerTextColor: '#000000',
+        closeButtonColor: '#000000',
       },
       dark: {
         backgroundColor: '#000000',
         progressIndicator: '#0087ff',
         headerBackgroundColor: '#000000',
         headerTextColor: '#ffffff',
+        closeButtonColor: '#ffffff',
       },
     },
   },

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)

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"

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

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,18 @@ 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,
+          // Parameter allows passing a custom drawable, we'll just support custom color for now
+          null,
+          closeButtonColor
+        );
     }
 
     return null;

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)

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",

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 {

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;
 }
 
 /**

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"

sample/android/app/build.gradle

@@ -74,7 +74,7 @@ android {
   lintOptions {
     checkDependencies false
   }
-  tasks.whenTaskAdded { task ->
+  tasks.configureEach { task ->
     if (task.name == 'lintAnalyzeDebug' || task.name == 'generateReleaseLintVitalReportModel') {
       task.dependsOn 'copyReactNativeVectorIconFonts'
     }
@@ -85,8 +85,8 @@ android {
     applicationId "com.shopify.checkoutkitreactnative"
     minSdkVersion rootProject.ext.minSdkVersion
     targetSdkVersion rootProject.ext.targetSdkVersion
-    versionCode 5
-    versionName "1.0"
+    versionCode 11
+    versionName "1.1"
   }
   signingConfigs {
     debug {

sample/android/app/proguard-rules.pro

@@ -8,3 +8,4 @@
 #   http://developer.android.com/guide/developing/tools/proguard.html
 
 # Add any project specific keep options here:
+-keep class com.shopify.checkoutkitreactnative.BuildConfig { *; }