Apple Pay Web & Stripe: How to customize Apple Pay Button

Question

I am following Stripe's JS implementation of Apple Pay on the Web (https://stripe.com/docs/stripe-js/elements/payment-request-button). It uses an element with an id of #payment-request-button and Stripe loads the button in an iFrame so that it remains PCI compliant. The button is loaded in the iFrame at 40px height and black background.
Looking at Apple Pay's own documentation, there are a few button options and button styling options ( https://applepaydemo.apple.com/#display-button ), as well as text such as "Checkout with Apple Pay" or "Pay with Apple Pay". Is there a way to apply these text options and custom heights to the Stripe implementation?

Answer 1

You can style the iFramed button with the pre-built theme's as shown here: https://stripe.com/docs/stripe-js/elements/payment-request-button#html-js-styling-the-element

Alternatively, you are able to create and style your own button, then call paymentRequest.show() to trigger the payment sheets: https://stripe.com/docs/js/payment_request/show