Skip to content

[AC][ApplePay]: add .applePayStyle() modifier to configure styling on ApplePay#551

Merged
kieran-osgood-shopify merged 7 commits intomainfrom
issue-569-add-color-modifier
Apr 10, 2026
Merged

[AC][ApplePay]: add .applePayStyle() modifier to configure styling on ApplePay#551
kieran-osgood-shopify merged 7 commits intomainfrom
issue-569-add-color-modifier

Conversation

@kieran-osgood-shopify
Copy link
Copy Markdown
Contributor

@kieran-osgood-shopify kieran-osgood-shopify commented Apr 2, 2026

This fixes a feature request and internal ticket to support the native apple pay style : Shopify/checkout-sheet-kit-react-native#443

What changes are you making?

I replaced the SwiftUI PassKit PayWithApplePayButton with the UIKit PKPaymentmentButton - the SwiftUI version has some trouble with styling which looked broken on the outline button, it seems like the SwiftUI modifier approach has issues with it and being able to set cornerRadius.

As part of this change I also noticed that the lint command was separated into dev lint and dev lint pod - where the pod version typically gets forgotten when running checks
I decided to bundle it in to the lint script to simplify the process "just run lint" as this will make adopting monorepo easier

I skip the pod check on CI because we have a separate CI step to run it exclusively (it fails in the lint step as pod isn't installed)

TLDR

Apple Pay Button was using the .automatic style (black on light mode, white on dark mode)

This PR introduces a swiftui modifier for configuring the style to either

  • .automatic
  • .white
  • .black
  • .whiteOutline
image

Whats changes

  • Added sample app settings for configuring the style of the button for the app so that testers can see each of the different styles.
image
  • Default button style remains

How

One thing that I had to refactor was the Apple Pay button from Passkit.
The SwiftUI PayWithApplePayButton we were using was proving problematic
I've also made the Apple pay button a UI representable now instead This is to work around the SwiftUI limitation on the white outline button where it would render incorrectly.


Before you merge

Important

Releasing a new version of the kit?

Releasing a new major version?

  • I have bumped the version number in the README.

Tip

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

@kieran-osgood-shopify kieran-osgood-shopify requested a review from a team as a code owner April 2, 2026 13:22
@kieran-osgood-shopify kieran-osgood-shopify marked this pull request as draft April 2, 2026 13:22
@kieran-osgood-shopify kieran-osgood-shopify changed the title Issue 569 add color modifier [AC][ApplePay]: add .applePayStyle() modifier to configure styling on ApplePay Apr 2, 2026
@kieran-osgood-shopify kieran-osgood-shopify force-pushed the issue-569-add-color-modifier branch from bef9f76 to 5d5757f Compare April 2, 2026 13:56
…port

Replace SwiftUI PayWithApplePayButton with UIKit PKPaymentButton wrapped
in UIViewRepresentable. This fixes border rendering issues with
whiteOutline style at constrained frame heights, as PKPaymentButton
allows setting style and cornerRadius directly at init time.

Also aligns applePayStyle with modifier-only API pattern (removes init
overload) for consistency with applePayLabel, cornerRadius, and wallets.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@kieran-osgood-shopify kieran-osgood-shopify force-pushed the issue-569-add-color-modifier branch from 5d5757f to 504d1ea Compare April 9, 2026 10:45
kieran-osgood-shopify and others added 2 commits April 9, 2026 11:52
…port

Replace SwiftUI PayWithApplePayButton with UIKit PKPaymentButton wrapped
in UIViewRepresentable. This fixes border rendering issues with
whiteOutline style at constrained frame heights, as PKPaymentButton
allows setting style and cornerRadius directly at init time.

Also aligns applePayStyle with modifier-only API pattern (removes init
overload) for consistency with applePayLabel, cornerRadius, and wallets.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@kieran-osgood-shopify kieran-osgood-shopify force-pushed the issue-569-add-color-modifier branch from edef6c0 to 8e1dfd9 Compare April 9, 2026 11:06
@kieran-osgood-shopify kieran-osgood-shopify marked this pull request as ready for review April 9, 2026 11:36
@kieran-osgood-shopify kieran-osgood-shopify enabled auto-merge (squash) April 9, 2026 11:39
@kieran-osgood-shopify kieran-osgood-shopify merged commit fd73e02 into main Apr 10, 2026
8 checks passed
@kieran-osgood-shopify kieran-osgood-shopify deleted the issue-569-add-color-modifier branch April 10, 2026 08:44
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