diff --git a/modules/@shopify/checkout-sheet-kit/ios/AcceleratedCheckoutButtons+Extensions.swift b/modules/@shopify/checkout-sheet-kit/ios/AcceleratedCheckoutButtons+Extensions.swift index 9e4c4df4..c8261255 100644 --- a/modules/@shopify/checkout-sheet-kit/ios/AcceleratedCheckoutButtons+Extensions.swift +++ b/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 + ] +} diff --git a/modules/@shopify/checkout-sheet-kit/ios/AcceleratedCheckoutButtons.swift b/modules/@shopify/checkout-sheet-kit/ios/AcceleratedCheckoutButtons.swift index 0de7fb31..95d747ab 100644 --- a/modules/@shopify/checkout-sheet-kit/ios/AcceleratedCheckoutButtons.swift +++ b/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 { diff --git a/modules/@shopify/checkout-sheet-kit/ios/ShopifyCheckoutSheetKit.mm b/modules/@shopify/checkout-sheet-kit/ios/ShopifyCheckoutSheetKit.mm index 2971cd2c..5a3d7017 100644 --- a/modules/@shopify/checkout-sheet-kit/ios/ShopifyCheckoutSheetKit.mm +++ b/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. */ diff --git a/modules/@shopify/checkout-sheet-kit/src/components/AcceleratedCheckoutButtons.tsx b/modules/@shopify/checkout-sheet-kit/src/components/AcceleratedCheckoutButtons.tsx index 7958fe85..787b67ca 100644 --- a/modules/@shopify/checkout-sheet-kit/src/components/AcceleratedCheckoutButtons.tsx +++ b/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 (