在index.html中集成Apple Pay/Google Pay支付按钮：HTML移动支付-html教程-PHP中文网

apple pay按钮不显示是因环境未达标：必须https访问（localhost除外）、域名在apple后台注册并正确部署验证文件、且supportsversion(4)返回true；google pay需初始化paymentsclient并确保js加载完成；共存时apple pay须用is="apple-pay-button"写法；验签失败多因密钥或配置不匹配。

在index.html中集成apple pay/google pay支付按钮：html移动支付

Apple Pay按钮在iOS Safari里不显示？检查支付请求支持和域名验证

Apple Pay按钮不出现，大概率不是代码写错了，而是环境没达标。Safari只在满足条件的页面上渲染apple-pay-button——它根本不关心你写了什么HTML，先看硬性门槛。

必须通过HTTPS访问（http://localhost除外，但http://192.168.x.x不行）
域名需在Apple Developer后台注册为“Merchant ID”，并上传apple-developer-merchantid-domain-association文件到/.well-known/路径（注意：文件名大小写、路径位置、MIME类型application/json都必须准确）
调用ApplePaySession.supportsVersion(4)返回true才代表当前设备+系统+浏览器支持——iOS 16.4+、macOS Ventura+、Safari 16.4+是底线

常见错误：本地开发用HTTP Server跑index.html，没配HTTPS；或把验证文件放错位置（比如放在/static/下却没映射到/.well-known/）。

Google Pay按钮点击无响应？别漏掉`paymentsClient`初始化和依赖加载

Google Pay按钮本身只是个样式容器，真正触发支付的是google.payments.api.PaymentsClient实例。没初始化就调用loadPaymentData，控制台会静默失败，按钮点不动。

必须先加载https://pay.google.com/gp/p/js/pay.js，且等其全局google对象就绪后再创建PaymentsClient
PaymentsClient构造时传入的environment参数必须匹配：测试用"TEST"，上线改"PRODUCTION"（否则isReadyToPay永远返回false）
调用isReadyToPay前，要确保allowedPaymentMethods中至少包含一个用户设备实际支持的方法（比如Android 12+默认支持"CARD"，但旧机型可能只支持"TOKENIZED_CARD"）

示例片段：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

const paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});

如果google未定义，说明JS没加载完——建议用onload回调或document.addEventListener('google-pay-loaded', ...)手动监听。

两个按钮共存时，如何避免`apple-pay-button`被当成普通按钮渲染？

HTML里同时放<button type="button" class="apple-pay-button"></button>和<google-pay-button></google-pay-button>，Safari会把前者当普通按钮，因为没声明is="apple-pay-button"自定义元素，也没加data-style等必要属性。

Apple Pay按钮必须用标准自定义元素写法：<button type="button" is="apple-pay-button" data-style="black" data-type="buy"></button>
Google Pay按钮推荐用官方Web Component：<google-pay-button environment="TEST" buttoncolor="default" buttontype="buy"></google-pay-button>（需提前注册google-pay-button组件）
两者CSS不能冲突——尤其避免全局button { width: 100%; }导致Apple Pay按钮拉伸变形（它内部有固定宽高比）

注意：apple-pay-button自定义元素仅在Safari中激活，Chrome/Firefox会回退为普通按钮；而google-pay-button在非Android Chrome中也会降级，但至少保留可点击状态。

支付数据提交后，后端验签失败？关键字段对不上

前端拿到paymentData后直接发给后端，结果验签失败，大概率是忽略了Apple Pay/Google Pay签名机制的根本差异。

Apple Pay返回的paymentData.paymentMethod.data是加密后的paymentMethodToken，需用商户私钥解密，且header.ephemeralPublicKey必须参与验签流程
Google Pay返回的paymentData.tokenizationData.token是Base64字符串，但内容格式取决于tokenizationSpecification.type：设为"PAYMENT_GATEWAY"时，才是给Stripe/Adyen等网关用的加密payload；设为"DIRECT"则需自己解析JWT
两者都要求后端使用对应平台的公钥（Apple从开发者后台下载，Google从Pay Console获取）——混用会导致验签必然失败

最容易被忽略的点：Apple Pay的countryCode（如"US"）和currencyCode（如"USD"）必须与Merchant ID绑定的地区一致；Google Pay的gatewayMerchantId必须与tokenizationSpecification.parameters中配置的完全匹配，字母大小写都不能错。