javascripthtmlcssbuttonapplepay-web

Apple pay button not showing in HTML web site

I have an HTML file where I added code like described here: https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_javascript

So my HTML code looks like this:

<!DOCTYPE html>
<html>
<head>
  <script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>

  <style>

    apple-pay-button {
      --apple-pay-button-width: 140px;
      --apple-pay-button-height: 30px;
      --apple-pay-button-border-radius: 5px;
      --apple-pay-button-padding: 5px 0px;
    }

  </style>
</head>

<body>

<apple-pay-button buttonstyle="black" type="plain" locale="en">Check out</apple-pay-button>

</body>
</html>

When I open the HTML file in Chrome or Safari on my MacBook Pro it does not show the button. There are no JavaScript errors in the console either.

How can I make the Apple pay button show in the browser. I specifically need the Check out button with the Apple logo.

Solution

  • I have tried adding display: initial; inside the

    apple-pay-button {
  --apple-pay-button-width: 140px;
  --apple-pay-button-height: 30px;
  --apple-pay-button-border-radius: 5px;
  --apple-pay-button-padding: 5px 0px;
}

    code, and it worked for me. It stays like this after adding it:

    apple-pay-button {
  --apple-pay-button-width: 140px;
  --apple-pay-button-height: 30px;
  --apple-pay-button-border-radius: 5px;
  --apple-pay-button-padding: 5px 0px;
  display: initial;
}

    So the reason is basically it has a display none/hidden somewhere. I think you will have to modify that display for it to fit your needs.