HTML 网站中未显示 Apple 支付按钮

Question

我有一个 HTML 文件，我在其中添加了如下所述的代码： https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_javascript

所以我的 HTML 代码如下所示：

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

当我在 MacBook Pro 上的 Chrome 或 Safari 中打开 HTML 文件时，它没有显示按钮。控制台中也没有 JavaScript 错误。

如何在浏览器中显示 Apple 支付按钮。我特别需要带有 Apple 标志的结帐按钮。

Answer 1

我尝试在

中添加 display: initial;

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;
}

代码，它对我有用。添加后还是这样：

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;
}

所以原因基本上是它在某处显示 none/hidden。我认为您必须修改该显示才能满足您的需要。

HTML 网站中未显示 Apple 支付按钮

Apple pay button not showing in HTML web site

html

javascript

css

button

applepay-web