Apple pay button not showing in HTML web site
Question
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.
1 answers
solution1
1 ACCPTED 2022-05-19 10:26:31
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.