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.
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.