Styling Apple Pay Button

I am trying to make a pill shaped Apple Pay button. From what I can tell, border-radius is supported on iOS (shown in the corner radius section https://developer.apple.com/design/human-interface-guidelines/apple-pay/overview/buttons-and-marks/), but it can't find any mention of it for the Apple Pay for Web API. I tried appying to border-radius property manually, but it messed up the border of the button when it was the "white-outline" style. See my screenshot, https://prnt.sc/pzenq6.


I would prefer avoid do all the styling myself as it is discouraged in the developer docs. Does apple provide any way of creating a pill shaped button using their styling?

Replies

Quoting the HIGs:


Buttons and Marks

The system provides several Apple Pay button types and styles you can use in your app or website. In contrast to the Apple Pay buttons, you use the Apple Pay mark to communicate the availability of Apple Pay as a payment option.


Don't create your own Apple Pay button design or attempt to mimic the system-provided button designs.


For related design guidance, see Offering Apple Pay and Checkout and Payment. For developer guidance, see PKPaymentButtonType (iOS), PKPaymentButtonStyle (iOS), WKInterfacePaymentButton (watchOS), and Apple Pay on the Web (web).


Button Types

Apple designed several types of buttons so that you can choose the button type that fits best with the terminology and flow of your purchase experience. In addition to payment buttons, Apple also designed a set-up button you can use to help people set up Apple Pay.

Use the Apple-provided APIs to create Apple Pay buttons. When you use the system-provided APIs, you get:


......