feat: add applePayStyle prop and AcceleratedCheckoutButtons README section

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/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?
@@ -207,7 +213,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 +224,10 @@ class RCTAcceleratedCheckoutButtonsView: UIView {
             modifiedButtons = modifiedButtons.applePayLabel(applePayLabel)
         }
 
+        if let applePayStyle {
+            modifiedButtons = modifiedButtons.applePayStyle(applePayStyle)
+        }
+
         if let cornerRadius {
             modifiedButtons = modifiedButtons.cornerRadius(CGFloat(cornerRadius.doubleValue))
         }
@@ -276,8 +286,8 @@ 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)
 

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

@@ -61,6 +61,15 @@ export enum ApplePayLabel {
   topUp = 'topUp',
 }
 
+export const ApplePayStyle = {
+  automatic: 'automatic',
+  black: 'black',
+  white: 'white',
+  whiteOutline: 'whiteOutline',
+} as const;
+
+export type ApplePayStyle = (typeof ApplePayStyle)[keyof typeof ApplePayStyle];
+
 type CheckoutIdentifier =
   | {
       cartId: string;
@@ -87,6 +96,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 +163,7 @@ export type AcceleratedCheckoutButtonsProps = (CartProps | VariantProps) &
 
 interface NativeAcceleratedCheckoutButtonsProps {
   applePayLabel?: string;
+  applePayStyle?: string;
   style?: ViewStyle;
   checkoutIdentifier: CheckoutIdentifier;
   cornerRadius?: number;
@@ -193,6 +209,7 @@ export const AcceleratedCheckoutButtons: React.FC<
   AcceleratedCheckoutButtonsProps
 > = ({
   applePayLabel,
+  applePayStyle,
   cornerRadius,
   wallets,
   onFail,
@@ -307,6 +324,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,

sample/src/context/Config.tsx

@@ -6,14 +6,15 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import {ColorScheme} from '@shopify/checkout-sheet-kit';
+import {ColorScheme, ApplePayStyle} from '@shopify/checkout-sheet-kit';
 import EncryptedStorage from 'react-native-encrypted-storage';
 import {useTheme} from './Theme';
 import {BuyerIdentityMode} from '../auth/types';
 
 export interface AppConfig {
   colorScheme: ColorScheme;
   buyerIdentityMode: BuyerIdentityMode;
+  applePayStyle: ApplePayStyle;
 }
 
 interface Context {
@@ -26,6 +27,7 @@ const CONFIG_STORAGE_KEY = 'app_config';
 const defaultAppConfig: AppConfig = {
   colorScheme: ColorScheme.automatic,
   buyerIdentityMode: BuyerIdentityMode.Guest,
+  applePayStyle: ApplePayStyle.automatic,
 };
 
 const ConfigContext = createContext<Context>({

sample/src/screens/CartScreen.tsx

@@ -41,6 +41,7 @@ import {
   ApplePayLabel,
   AcceleratedCheckoutWallet,
 } from '@shopify/checkout-sheet-kit';
+import {useConfig} from '../context/Config';
 import useShopify from '../hooks/useShopify';
 import type {CartLineItem} from '../../@types';
 import type {Colors} from '../context/Theme';
@@ -55,6 +56,7 @@ function CartScreen(): React.JSX.Element {
   const {cartId, checkoutURL, totalQuantity, removeFromCart, addingToCart} =
     useCart();
   const {queries} = useShopify();
+  const {appConfig} = useConfig();
   const eventHandlers = useShopifyEventHandlers(
     'Cart - AcceleratedCheckoutButtons',
   );
@@ -167,6 +169,7 @@ function CartScreen(): React.JSX.Element {
               <AcceleratedCheckoutButtons
                 {...eventHandlers}
                 applePayLabel={ApplePayLabel.checkout}
+                applePayStyle={appConfig.applePayStyle}
                 cartId={cartId}
                 wallets={[
                   AcceleratedCheckoutWallet.applePay,

sample/src/screens/ProductDetailsScreen.tsx

@@ -45,6 +45,7 @@ import {
   ApplePayLabel,
   useShopifyCheckoutSheet,
 } from '@shopify/checkout-sheet-kit';
+import {useConfig} from '../context/Config';
 import {useShopifyEventHandlers} from '../hooks/useCheckoutEventHandlers';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'ProductDetails'>;
@@ -90,6 +91,7 @@ function ProductDetails({
   loading?: boolean;
   onAddToCart: (variantId: string) => void;
 }) {
+  const {appConfig} = useConfig();
   const {colors, cornerRadius} = useTheme();
   const styles = createStyles(colors, cornerRadius);
   const image = product.images?.edges[0]?.node;
@@ -126,6 +128,7 @@ function ProductDetails({
             <AcceleratedCheckoutButtons
               {...eventHandlers}
               applePayLabel={ApplePayLabel.order}
+              applePayStyle={appConfig.applePayStyle}
               wallets={[AcceleratedCheckoutWallet.applePay]}
               variantId={variant.id}
               quantity={1}