Release 3.8.0: applePayStyle + Accelerated Checkouts StoreFront API 2026-04 (#464)

### What changes are you making?

Bump to 3.8.0 of swift SDK
I noticed we were missing ReadMe documentation for the accelerated checkouts that we have for swift so added some documentation here too

3.8.0 brings two improvements to Accelerated Checkouts

1. adds support for `applePayStyle` closing: #443

https://github.com/user-attachments/assets/c4329ca2-2ea2-4917-b017-61f5faa0d76a



2. Updates the Storefront API for Accelerated Checkouts up to 2026-04

From the Swift PR Shopify/checkout-sheet-kit-swift#555: 
```
Bump apiVersion to 2026-04
Add explicit handling for MERCHANDISE_LINE_TRANSFORMERS_RUN_ERROR error code (new in 2026-04) in both CartErrorCode and CartCompletionErrorCode — interrupts with .other reason to fall through to web checkout, matching portable-wallets behavior
Add GIFT_CARD_RECIPIENT_INVALID error code (new in 2026-01) to CartErrorCode — interrupts with .unhandled as gift cards are not applicable in the Apple Pay flow
No breaking changes affect the kit between 2025-10 and 2026-04.
```


---

### PR Checklist

> [!IMPORTANT]
>
> - [ ] I've added tests to support my implementation
> - [ ] I have read and agree with the [Contribution Guidelines](https://github.com/shopify/checkout-sheet-kit-react-native/blob/main/.github/CONTRIBUTING.md).
> - [ ] I have read and agree with the [Code of Conduct](https://github.com/shopify/checkout-sheet-kit-react-native/blob/main/.github/CODE_OF_CONDUCT.md).
> - [ ] I've updated the [README](https://github.com/shopify/checkout-sheet-kit-react-native).
>
> _Releasing a new version of the kit?_
>
> - [ ] I have bumped the version number in the [`package.json` file](https://github.com/Shopify/checkout-sheet-kit-react-native/blob/main/modules/%40shopify/checkout-sheet-kit/package.json#L4).

---

> [!TIP]
> See the [Contributing documentation](https://github.com/shopify/checkout-sheet-kit-react-native/blob/main/.github/CONTRIBUTING.md#releasing-a-new-version) for instructions on how to publish a new version of the library.

Author: kieran-osgood-shopify

README.md

@@ -841,6 +841,178 @@ shopify.addEventListener('geolocationRequest', async (event: GeolocationRequestE
 
 ---
 
+## Accelerated Checkouts
+
+Accelerated checkout buttons surface Apple Pay and Shop Pay options earlier in the buyer journey so more orders complete without leaving your app.
+
+### Prerequisites
+
+- iOS 16 or later
+- The `write_cart_wallet_payments` access scope ([request access](https://www.appsheet.com/start/1ff317b6-2da1-4f39-b041-c01cfada6098))
+- Apple Pay payment processing certificates ([setup guide](https://shopify.dev/docs/storefronts/mobile/create-apple-payment-processing-certificates))
+- A device configured for Apple Pay ([Apple setup instructions](https://developer.apple.com/documentation/passkit/setting-up-apple-pay))
+
+### Configure the integration
+
+Pass an `acceleratedCheckouts` configuration when setting up the provider or `ShopifyCheckoutSheet` instance. This connects the accelerated checkout buttons to your storefront.
+
+```tsx
+import {ShopifyCheckoutSheetProvider} from '@shopify/checkout-sheet-kit';
+
+const config = {
+  acceleratedCheckouts: {
+    storefrontDomain: 'your-shop.myshopify.com',
+    storefrontAccessToken: 'your-storefront-access-token',
+    customer: {
+      // For authenticated customers
+      accessToken: 'customer-access-token',
+      // OR for guest customers
+      // email: 'customer@example.com',
+      // phoneNumber: '0123456789',
+    },
+    wallets: {
+      applePay: {
+        merchantIdentifier: 'merchant.com.yourcompany',
+        contactFields: ['email', 'phone'],
+        // Optionally restrict shipping countries (ISO 3166-1 alpha-2)
+        // supportedShippingCountries: ['US', 'CA'],
+      },
+    },
+  },
+};
+
+function App() {
+  return (
+    <ShopifyCheckoutSheetProvider configuration={config}>
+      <YourApp />
+    </ShopifyCheckoutSheetProvider>
+  );
+}
+```
+
+> [!WARNING]
+> Do not provide both `accessToken` and `email`/`phoneNumber` together. For authenticated customers, email and phone are fetched automatically from the Shopify account.
+
+### Render accelerated checkout buttons
+
+Use `AcceleratedCheckoutButtons` to attach accelerated checkout calls-to-action to product or cart surfaces once you have a valid cart ID or product variant ID from the Storefront API.
+
+```tsx
+import {
+  AcceleratedCheckoutButtons,
+  AcceleratedCheckoutWallet,
+} from '@shopify/checkout-sheet-kit';
+
+function CartFooter({cartId}: {cartId: string}) {
+  return (
+    <AcceleratedCheckoutButtons
+      cartId={cartId}
+      wallets={[AcceleratedCheckoutWallet.shopPay, AcceleratedCheckoutWallet.applePay]}
+    />
+  );
+}
+```
+
+You can also render buttons for a single product variant:
+
+```tsx
+<AcceleratedCheckoutButtons
+  variantId={variantId}
+  quantity={1}
+  wallets={[AcceleratedCheckoutWallet.applePay]}
+/>
+```
+
+#### Customize wallet options
+
+Accelerated checkout buttons display every available wallet by default. Use `wallets` to show a subset or adjust the order.
+
+```tsx
+// Display only Shop Pay
+<AcceleratedCheckoutButtons
+  cartId={cartId}
+  wallets={[AcceleratedCheckoutWallet.shopPay]}
+/>
+
+// Display Shop Pay first, then Apple Pay
+<AcceleratedCheckoutButtons
+  cartId={cartId}
+  wallets={[AcceleratedCheckoutWallet.shopPay, AcceleratedCheckoutWallet.applePay]}
+/>
+```
+
+#### Modify the Apple Pay button label
+
+Use `applePayLabel` to map to the native `PayWithApplePayButtonLabel` values. The default is `plain`.
+
+```tsx
+import {ApplePayLabel} from '@shopify/checkout-sheet-kit';
+
+<AcceleratedCheckoutButtons
+  cartId={cartId}
+  applePayLabel={ApplePayLabel.buy}
+/>
+```
+
+#### Customize the Apple Pay button style
+
+Use `applePayStyle` to set the color style of the Apple Pay button. The default is `automatic`, which adapts to the current appearance (light/dark mode).
+
+```tsx
+import {ApplePayStyle} from '@shopify/checkout-sheet-kit';
+
+<AcceleratedCheckoutButtons
+  cartId={cartId}
+  applePayStyle={ApplePayStyle.whiteOutline}
+/>
+```
+
+Available styles: `automatic`, `black`, `white`, `whiteOutline`.
+
+#### Customize button corners
+
+The `cornerRadius` prop lets you match the buttons to other calls-to-action in your app. Buttons default to an 8pt radius.
+
+```tsx
+// Pill-shaped buttons
+<AcceleratedCheckoutButtons cartId={cartId} cornerRadius={16} />
+
+// Square buttons
+<AcceleratedCheckoutButtons cartId={cartId} cornerRadius={0} />
+```
+
+### Handle loading, errors, and lifecycle events
+
+Attach lifecycle handlers to respond when buyers finish, cancel, or encounter an error.
+
+```tsx
+<AcceleratedCheckoutButtons
+  cartId={cartId}
+  onComplete={(event) => {
+    // Clear cart after successful checkout
+    clearCart();
+  }}
+  onFail={(error) => {
+    console.error('Accelerated checkout failed:', error);
+  }}
+  onCancel={() => {
+    analytics.track('accelerated_checkout_cancelled');
+  }}
+  onRenderStateChange={(event) => {
+    // event.state: 'loading' | 'rendered' | 'error'
+    setRenderState(event.state);
+  }}
+  onWebPixelEvent={(event) => {
+    analytics.track(event);
+  }}
+  onClickLink={(url) => {
+    Linking.openURL(url);
+  }}
+/>
+```
+
+---
+
 ## Contributing
 
 See the [contributing documentation](CONTRIBUTING.md) for details on how to get started.

modules/@shopify/checkout-sheet-kit/RNShopifyCheckoutSheetKit.podspec

@@ -20,8 +20,8 @@ Pod::Spec.new do |s|
   s.source_files = "ios/*.{h,m,mm,swift}"
 
 	s.dependency "React-Core"
-	s.dependency "ShopifyCheckoutSheetKit", "~> 3.7.0"
-	s.dependency "ShopifyCheckoutSheetKit/AcceleratedCheckouts", "~> 3.7.0"
+	s.dependency "ShopifyCheckoutSheetKit", "~> 3.8.0"
+	s.dependency "ShopifyCheckoutSheetKit/AcceleratedCheckouts", "~> 3.8.0"
 
   if fabric_enabled
 		# Use React Native's helper if available, otherwise add dependencies directly

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

@@ -58,3 +58,23 @@ extension PayWithApplePayButtonLabel {
         "topUp": .topUp
     ]
 }
+
+// MARK: - Apple Pay Button Style
+
+@available(iOS 16.0, *)
+extension PayWithApplePayButtonStyle {
+    static func from(_ string: String?, fallback: PayWithApplePayButtonStyle = .automatic) -> PayWithApplePayButtonStyle {
+        guard let string, let value = map[string] else {
+            return fallback
+        }
+
+        return value
+    }
+
+    private static let map: [String: PayWithApplePayButtonStyle] = [
+        "automatic": .automatic,
+        "black": .black,
+        "white": .white,
+        "whiteOutline": .whiteOutline
+    ]
+}

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

@@ -120,6 +120,12 @@ class RCTAcceleratedCheckoutButtonsView: UIView {
         }
     }
 
+    @objc var applePayStyle: String? {
+        didSet {
+            updateView()
+        }
+    }
+
     @objc var onFail: RCTBubblingEventBlock?
     @objc var onComplete: RCTBubblingEventBlock?
     @objc var onCancel: RCTBubblingEventBlock?
@@ -156,6 +162,17 @@ class RCTAcceleratedCheckoutButtonsView: UIView {
         hostingController?.view.frame = bounds
     }
 
+    // Deprecated in iOS 17 — superseded by registerForTraitChanges in setupView().
+    // Remove this override when dropping iOS 16 support.
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+        if #unavailable(iOS 17.0) {
+            if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
+                updateView()
+            }
+        }
+    }
+
     override var intrinsicContentSize: CGSize {
         let height = calculateRequiredHeight()
         return CGSize(width: UIView.noIntrinsicMetric, height: height)
@@ -172,6 +189,14 @@ class RCTAcceleratedCheckoutButtonsView: UIView {
 
         updateView()
 
+        // Replaces traitCollectionDidChange for iOS 17+.
+        // When dropping iOS 16 support, remove the traitCollectionDidChange override above.
+        if #available(iOS 17.0, *) {
+            registerForTraitChanges([UITraitUserInterfaceStyle.self]) { [weak self] (_: RCTAcceleratedCheckoutButtonsView, _: UITraitCollection) in
+                self?.updateView()
+            }
+        }
+
         // Listen for configuration updates
         NotificationCenter.default.addObserver(
             self,
@@ -207,7 +232,7 @@ class RCTAcceleratedCheckoutButtonsView: UIView {
         updateView()
     }
 
-    private func attachModifiers(to buttons: AcceleratedCheckoutButtons, wallets: [Wallet]?, applePayLabel: PayWithApplePayButtonLabel?) -> AcceleratedCheckoutButtons {
+    private func attachModifiers(to buttons: AcceleratedCheckoutButtons, wallets: [Wallet]?, applePayLabel: PayWithApplePayButtonLabel?, applePayStyle: PayWithApplePayButtonStyle) -> AcceleratedCheckoutButtons {
         var modifiedButtons = buttons
 
         if let wallets {
@@ -218,6 +243,8 @@ class RCTAcceleratedCheckoutButtonsView: UIView {
             modifiedButtons = modifiedButtons.applePayLabel(applePayLabel)
         }
 
+        modifiedButtons = modifiedButtons.applePayStyle(applePayStyle)
+
         if let cornerRadius {
             modifiedButtons = modifiedButtons.cornerRadius(CGFloat(cornerRadius.doubleValue))
         }
@@ -276,18 +303,20 @@ class RCTAcceleratedCheckoutButtonsView: UIView {
             return
         }
 
-        // Attach modifiers (wallets, applePayLabel, cornerRadius)
-        buttons = attachModifiers(to: buttons, wallets: shopifyWallets, applePayLabel: PayWithApplePayButtonLabel.from(applePayLabel))
+        // Attach modifiers (wallets, applePayLabel, applePayStyle, cornerRadius)
+        buttons = attachModifiers(to: buttons, wallets: shopifyWallets, applePayLabel: PayWithApplePayButtonLabel.from(applePayLabel), applePayStyle: PayWithApplePayButtonStyle.from(applePayStyle))
         // Attach event handlers
         buttons = attachEventListeners(to: buttons)
 
         var view: AnyView
 
+        let colorScheme: SwiftUI.ColorScheme = traitCollection.userInterfaceStyle == .dark ? .dark : .light
+
         // Attach config (and Apple Pay config if available)
         if let applePayConfig = AcceleratedCheckoutConfiguration.shared.applePayConfiguration {
-            view = AnyView(buttons.environmentObject(config).environmentObject(applePayConfig))
+            view = AnyView(buttons.environmentObject(config).environmentObject(applePayConfig).environment(\.colorScheme, colorScheme))
         } else {
-            view = AnyView(buttons.environmentObject(config))
+            view = AnyView(buttons.environmentObject(config).environment(\.colorScheme, colorScheme))
         }
 
         if let hostingController {

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

@@ -106,6 +106,11 @@ @interface RCT_EXTERN_MODULE (RCTAcceleratedCheckoutButtonsManager, RCTViewManag
  */
 RCT_EXPORT_VIEW_PROPERTY(applePayLabel, NSString*)
 
+/**
+ * Style variant for the Apple Pay button (e.g., "automatic", "black", "white", "whiteOutline").
+ */
+RCT_EXPORT_VIEW_PROPERTY(applePayStyle, NSString*)
+
 /**
  * Emitted when checkout fails. Payload contains a CheckoutException-like shape.
  */

modules/@shopify/checkout-sheet-kit/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/checkout-sheet-kit",
   "license": "MIT",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "main": "lib/commonjs/index.js",
   "types": "src/index.ts",
   "source": "src/index.ts",

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

@@ -61,6 +61,13 @@ export enum ApplePayLabel {
   topUp = 'topUp',
 }
 
+export enum ApplePayStyle {
+  automatic = 'automatic',
+  black = 'black',
+  white = 'white',
+  whiteOutline = 'whiteOutline',
+}
+
 type CheckoutIdentifier =
   | {
       cartId: string;
@@ -87,6 +94,12 @@ interface CommonAcceleratedCheckoutButtonsProps {
    */
   applePayLabel?: ApplePayLabel;
 
+  /**
+   * Style for the Apple Pay button color
+   * Defaults to 'automatic' which adapts to the current appearance (light/dark mode)
+   */
+  applePayStyle?: ApplePayStyle;
+
   /**
    * Called when checkout fails
    */
@@ -148,6 +161,7 @@ export type AcceleratedCheckoutButtonsProps = (CartProps | VariantProps) &
 
 interface NativeAcceleratedCheckoutButtonsProps {
   applePayLabel?: string;
+  applePayStyle?: string;
   style?: ViewStyle;
   checkoutIdentifier: CheckoutIdentifier;
   cornerRadius?: number;
@@ -193,6 +207,7 @@ export const AcceleratedCheckoutButtons: React.FC<
   AcceleratedCheckoutButtonsProps
 > = ({
   applePayLabel,
+  applePayStyle,
   cornerRadius,
   wallets,
   onFail,
@@ -307,6 +322,7 @@ export const AcceleratedCheckoutButtons: React.FC<
   return (
     <RCTAcceleratedCheckoutButtons
       applePayLabel={applePayLabel}
+      applePayStyle={applePayStyle}
       style={{...defaultStyles, height: dynamicHeight}}
       checkoutIdentifier={checkoutIdentifier}
       cornerRadius={cornerRadius}

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

@@ -58,7 +58,7 @@ import {
 import {CheckoutErrorCode} from './errors.d';
 import type {CheckoutCompletedEvent} from './events.d';
 import type {CustomEvent, PixelEvent, StandardEvent} from './pixels.d';
-import {ApplePayLabel} from './components/AcceleratedCheckoutButtons';
+import {ApplePayLabel, ApplePayStyle} from './components/AcceleratedCheckoutButtons';
 import type {
   AcceleratedCheckoutButtonsProps,
   RenderStateChangeEvent,
@@ -515,6 +515,7 @@ export {
   AcceleratedCheckoutWallet,
   ApplePayContactField,
   ApplePayLabel,
+  ApplePayStyle,
   ColorScheme,
   LogLevel,
   ShopifyCheckoutSheet,