MVC应用集成Amazon Pay时支付按钮无法渲染问题求助

排查及解决方法 #

1. 优先检查动态参数转义问题 #

当前问题90%概率是Razor视图默认HTML转义导致的：MVC会自动将ViewBag输出的特殊字符转义为"这类实体字符，而payloadJSON本身是标准JSON字符串，转义后会直接破坏JSON格式，导致渲染函数入参失效。
你可以先在浏览器控制台打印@ViewBag.PayLoad和@ViewBag.Signature的实际输出值，和服务端生成的原始值对比，如果存在转义字符，将参数用Html.Raw()包裹即可：

createCheckoutSessionConfig: {
    payloadJSON: '@Html.Raw(ViewBag.PayLoad)', 
    signature: '@Html.Raw(ViewBag.Signature)' 
}

2. 基础参数校验 #

• 确认publicKeyId前缀和当前环境匹配：沙箱环境以SANDBOX-开头，生产环境以LIVE-开头，环境不匹配会直接触发渲染失败
• 确认你引入的checkout.js区域和卖家账号区域一致：你当前用的是北美区CDN资源，如果你的账号属于欧洲/日本等其他区域，需要替换对应区域的SDK地址
• 确认ledgerCurrency和卖家账号开通的结算币种一致

3. 渲染函数添加错误处理 #

Amazon Pay的renderButton方法原生支持onError回调，可以直接捕获所有渲染阶段的错误，修改配置如下即可：

<div id="AmazonPayButton"></div>
<script src="https://static-na.payments-amazon.com/checkout.js"></script>
<script type="text/javascript" charset="utf-8">
amazon.Pay.renderButton('#AmazonPayButton', {
    merchantId: '@ViewBag.MerchantId',
    publicKeyId: '@ViewBag.PublicId',
    ledgerCurrency: 'USD',
    checkoutLanguage: 'en_US',
    productType: 'PayAndShip',
    placement: 'Cart',
    buttonColor: 'Gold',
    createCheckoutSessionConfig: {
        payloadJSON: '@Html.Raw(ViewBag.PayLoad)',
        signature: '@Html.Raw(ViewBag.Signature)'
    },
    // 新增错误处理回调
    onError: function (error) {
        console.error('Amazon Pay渲染错误：', error);
        // 可在此处添加自定义降级逻辑，比如向用户展示报错提示
    }
})
</script>

关于跨站报错的说明 #

你提到手动复制卖家平台生成的按钮代码也有相同跨站报错但可以正常渲染，说明该报错是Amazon Pay内部日志上报请求触发的，和按钮渲染失败无关，不需要针对这个报错做额外处理。

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