Support apple pay button styling

Author: lusarz

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

@@ -26,7 +26,7 @@ import Foundation
 import PassKit
 import SwiftUI
 
-// MARK: - Apple Pay Button
+// MARK: - Apple Pay Button Label
 
 @available(iOS 16.0, *)
 extension PayWithApplePayButtonLabel {
@@ -58,3 +58,23 @@ extension PayWithApplePayButtonLabel {
         "topUp": .topUp
     ]
 }
+
+// MARK: - Apple Pay Button Style
+
+@available(iOS 16.0, *)
+extension PayWithApplePayButtonStyle {
+    static func from(_ string: String?) -> PayWithApplePayButtonStyle? {
+        guard let string, let value = map[string] else {
+            return nil
+        }
+
+        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?
@@ -290,6 +296,10 @@ class RCTAcceleratedCheckoutButtonsView: UIView {
             view = AnyView(buttons.environmentObject(config))
         }
 
+        /// Apply Apple Pay button style (defaults to .automatic)
+        let applePayButtonStyle = PayWithApplePayButtonStyle.from(applePayStyle) ?? .automatic
+        view = AnyView(view.payWithApplePayButtonStyle(applePayButtonStyle))
+
         if let hostingController {
             hostingController.rootView = view
         } else {

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/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 (automatic, black, white, whiteOutline)
+   * @default ApplePayStyle.automatic
+   */
+  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.d.ts

@@ -189,6 +189,13 @@ export enum ApplePayContactField {
   phone = 'phone',
 }
 
+export enum ApplePayStyle {
+  automatic = 'automatic',
+  black = 'black',
+  white = 'white',
+  whiteOutline = 'whiteOutline',
+}
+
 /**
  * Configuration for AcceleratedCheckouts
  */

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

@@ -58,7 +58,10 @@ 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 +518,7 @@ export {
   AcceleratedCheckoutWallet,
   ApplePayContactField,
   ApplePayLabel,
+  ApplePayStyle,
   ColorScheme,
   ShopifyCheckoutSheet,
   ShopifyCheckoutSheetProvider,

sample/ios/ReactNativeTests/AcceleratedCheckouts_SupportedTests.swift

@@ -395,6 +395,15 @@ class AcceleratedCheckouts_SupportedTests: XCTestCase {
         XCTAssertTrue(PayWithApplePayButtonLabel.from("unknown", fallback: .buy) == .buy)
     }
 
+    func testApplePayStyleMapping_knownAndUnknownKeys() throws {
+        XCTAssertEqual(PayWithApplePayButtonStyle.from("automatic"), .automatic)
+        XCTAssertEqual(PayWithApplePayButtonStyle.from("black"), .black)
+        XCTAssertEqual(PayWithApplePayButtonStyle.from("white"), .white)
+        XCTAssertEqual(PayWithApplePayButtonStyle.from("whiteOutline"), .whiteOutline)
+        XCTAssertNil(PayWithApplePayButtonStyle.from("unknown"))
+        XCTAssertNil(PayWithApplePayButtonStyle.from(nil))
+    }
+
     func testConfigureAcceleratedCheckoutsResolvesFalseForInvalidApplePayContactField() throws {
         let expectation = self.expectation(description: "configureAcceleratedCheckouts invalid contact field resolves false")
         var resolved: Bool = true

sample/src/screens/CartScreen.tsx

@@ -39,6 +39,7 @@ import {
   useShopifyCheckoutSheet,
   AcceleratedCheckoutButtons,
   ApplePayLabel,
+  ApplePayStyle,
   AcceleratedCheckoutWallet,
 } from '@shopify/checkout-sheet-kit';
 import useShopify from '../hooks/useShopify';
@@ -167,6 +168,7 @@ function CartScreen(): React.JSX.Element {
               <AcceleratedCheckoutButtons
                 {...eventHandlers}
                 applePayLabel={ApplePayLabel.checkout}
+                applePayStyle={ApplePayStyle.black}
                 cartId={cartId}
                 wallets={[
                   AcceleratedCheckoutWallet.applePay,