Skip to content

Support apple pay button styling#457

Closed
lusarz wants to merge 1 commit intoShopify:mainfrom
lusarz:apple-pay-style
Closed

Support apple pay button styling#457
lusarz wants to merge 1 commit intoShopify:mainfrom
lusarz:apple-pay-style

Conversation

@lusarz
Copy link
Copy Markdown

@lusarz lusarz commented Apr 2, 2026

What changes are you making?

Adds a new applePayStyle prop to AcceleratedCheckoutButtons that allows customizing the Apple Pay button appearance. This addresses #443 where consumers couldn't control the button style — for example, getting a white button when a black one was needed for their app's UI.

The prop maps to Apple's PayWithApplePayButtonStyle and supports four values: automatic, black, white, and whiteOutline. Defaults to automatic (adapts to the system light/dark mode).

Integration guide

 <AcceleratedCheckoutButtons
   applePayLabel={ApplePayLabel.checkout}
+  applePayStyle={ApplePayStyle.black}
   cartId={cartId}
   wallets={[
     AcceleratedCheckoutWallet.applePay,
     AcceleratedCheckoutWallet.shopPay,
   ]}
   cornerRadius={cornerRadius}
 />

Manual Testing

  • applePayStyle={ApplePayStyle.black} renders a black Apple Pay button
  • applePayStyle={ApplePayStyle.white} renders a white Apple Pay button
  • applePayStyle={ApplePayStyle.whiteOutline} renders a white button with outline
  • applePayStyle={ApplePayStyle.automatic} adapts to system color scheme
  • Omitting applePayStyle defaults to automatic behavior
  • Existing props (applePayLabel, cornerRadius, wallets) continue to work alongside applePayStyle

PR Checklist

Important

Releasing a new version of the kit?


Tip

See the Contributing documentation for instructions on how to publish a new version of the library.

@lusarz lusarz requested a review from a team as a code owner April 2, 2026 08:41
@lusarz lusarz force-pushed the apple-pay-style branch from 1e00235 to ba83909 Compare April 2, 2026 08:46
@lusarz lusarz force-pushed the apple-pay-style branch from ba83909 to f6f7a63 Compare April 2, 2026 08:53
@kieran-osgood-shopify
Copy link
Copy Markdown
Contributor

Morning @lusarz,

Thank you for the contribution!

Also apologies I didn't reply on #443, your request hasn't gone unnoticed and I made a start on trying to implement this a few weeks ago but forgot to tag the issue properly https://github.com/Shopify/checkout-sheet-kit-swift/pull/460/changes but haven't got it working just yet.

Our approach is to implement first in the native SDK (Checkout Sheet Kit Swift in this case), and then bridge the API's in the React Native layer to avoid duplicating the logic in both sides.

I don't think we'll be able to merge this PR as it stands until we're able to get support landed in Swift

@lusarz
Copy link
Copy Markdown
Author

lusarz commented Apr 2, 2026

Morning @kieran-osgood-shopify

Thanks for the context! That makes total sense — happy to align with the approach of landing it in the Swift SDK first.

Once Shopify/checkout-sheet-kit-swift#460 is merged, I can update this PR to use the SDK's native modifier in attachModifiers() instead of applying .payWithApplePayButtonStyle() from the bridge layer. I believe the TypeScript/bridge side could stay the same.

Happy to rebase and update whenever the Swift side is ready, or feel free to close this if you'd prefer to handle the RN bridge internally.

@kieran-osgood-shopify
Copy link
Copy Markdown
Contributor

It'll probably make sense to just start a fresh PR so I'll close this one out
I have just started a new branch over here: Shopify/checkout-sheet-kit-swift#551 and got the apple pay button working with the different styles now

Hope to get this reviewed soon - so stay tuned 🙏🏼

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants