Adyen集成ApplePay按钮无图标及文字问题求助

问题背景 #

Adyen Web v5.57.0 集成Apple Pay Web组件，支付功能正常，但按钮仅显示纯色（跟随buttonColor配置），无Apple图标及“Pay”相关文字，尝试过Adyen文档配置及Apple官方PaymentRequest配置均未解决。

排查与解决思路 #

1. 修正Adyen组件配置逻辑 #

Adyen Web的Apple Pay组件有专属配置结构，不可直接混用Apple官方的PaymentRequest参数：

• 最初使用的buttonType: "plain"本身就是无文字无图标的纯色按钮，若需要显示图标和文字，需将buttonType改为checkout（显示“Checkout with Apple Pay”）、buy（显示“Buy with Apple Pay”）等带标识的类型。
• 正确的配置结构应将按钮样式与PaymentRequest参数嵌套在applepay字段下，示例：

{
  "type": "applepay",
  "applepay": {
    "buttonType": "checkout", // 替换为需要的按钮类型
    "buttonColor": "white",
    "paymentRequest": {
      "countryCode": "DE",
      "currencyCode": "EUR",
      "total": {
        "label": "Total",
        "amount": "48.00"
      },
      "supportedNetworks": ["visa", "masterCard", "amex", "jcb"],
      "merchantCapabilities": ["supports3DS"]
    }
  }
}

2. 验证Apple Pay运行环境 #

Apple Pay按钮仅在以下环境中会完整渲染图标和文字：

• 必须为HTTPS协议（本地开发可使用localhost）；
• 仅支持Safari浏览器（iOS/iPadOS/macOS）；
• 设备需绑定有效Apple Pay卡片。

可通过Adyen提供的工具验证环境支持：

// 检查当前环境是否支持Apple Pay
Adyen.checkout.isSupported('applepay').then(supported => {
  console.log('Apple Pay supported:', supported);
});

3. 排查页面样式冲突 #

检查按钮挂载的DOM元素是否被自定义CSS覆盖：

• 避免设置background、content等样式覆盖Adyen组件的默认按钮样式；
• 确保按钮容器没有限制尺寸导致图标/文字被截断。

4. 版本兼容性确认 #

v5.57.0属于Adyen Web较新版本，若上述排查无效，可确认该版本是否存在Apple Pay组件的已知问题（优先排查配置与环境）。

内容的提问来源于stack exchange，提问作者David Mann