Apple Pay Button Styling/CSS

Questions
1

Hello!

I am having some issues with being able to style the Apple Pay button. I have been following the Apple documentation (Apple Pay on the Web | Apple Developer Documentation) and the Square documentation (https://developer.squareup.com/docs/web-payments/apple-pay#prerequisites-and-assumptions) and have hit a wall trying different things. I am using the react-square-web-payments-sdk in my React application. For context, I am building a simple checkout page for a service and payment is accepted via credit card and Apple Pay payments.

Specifically, I want to use the different Apple Pay button styles and types. Such as “-apple-pay-button-style: white;” or “-apple-pay-button-type: donate;”. I would also like to know how to disable the Apple Pay button. I need the button to be disabled when my site is processing a current payment (i.e. the user can’t pay twice by clicking the button after they’ve paid once or a payment is processing). The “button props” using the Credit Card tag works perfectly for that, but I can’t seem to find the same ideology for the Apple Pay tag.

Here is some of the code that could be useful:

import {
  PaymentForm,
  CreditCard,
  ApplePay,
} from 'react-square-web-payments-sdk'

... other react code ...

return (
... other react & square code ...
    <>
... other html code ...

const SquarePayment = () => {
<PaymentForm
... other payment form code ...
>

{/* Attempt 1 */}
<ApplePay
  style={{
    marginBottom: '1rem',
    -webkit-appearance: '-apple-pay-button',
    -apple-pay-button-type: 'donate',
    -apple-pay-button-style: 'black'
  }}
/>

{/* Attempt 2 */}
<ApplePay className='apple-pay-button' />

{/* Attempt 3 */}
<script src='https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js'></script>
<apple-pay-button
  buttonstyle='black'
  type='donate'
  locale='en-US'
></apple-pay-button>

</PaymentForm>
</>
  )
}

Here is the CSS for Attempt #2:

.apple-pay-button {
  margin-bottom: 4rem;
  height: 48px;
  width: 100%;
  display: inline-block;
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: donate;
  -apple-pay-button-style: black;
}

I am a novice to using Square and working with React, I would appreciate any and all tips! Thanks!

1 Like
2

What issues are you having with the styling? Also with the Web Payments SDK you won’t be able to process a payment when the button has submitted payment with an additional Apple Pay Payment so there isn’t a need to disable the button. :slightly_smiling_face:

3

The Apple Pay button has different styles and different types. For instance, the Apple Developer page shows they have an Apple Pay Button for donate, buy, checkout, rent, subscribe, etc. and the four different styles are white, whiteOutline, black, and automatic. All of that is found here: PKPaymentButtonType.buy | Apple Developer Documentation

I am wanting to know how to change the button style and type in the React Web Payments SDK? Thanks for your response!

4

The React Web Payment SDK was built by Seeed so I’d recommend reaching out to them. Also I’d imagine all you would have to do is update the styling of the button to make the change. :slightly_smiling_face: