我已经解决了这个问题一段时间了，我无法弄清楚为什么亚马逊钱包小部件不呈现。我正在实施仅使用亚马逊支付，而不是登录。我让按钮小部件工作，但是当钱包出现的时候，什么都没有。我使用BigCommerce作为我的电子商务平台。按钮工作，并带我到下一个页面(https://store-24r5d.mybigcommerce.com/checkout-with-amazon)but小部件不呈现。
这是我的按钮代码（测试和工作正常）
<!--Amazon Pay Starts Here-->
<!-- Place this where you would like the Payment Button to appear
<div id="AmazonPayButton"></div>
<script type="text/javascript">
var authRequest;
OffAmazonPayments.Button("AmazonPayButton", "Selleridhere", {
type: "PwA",
color: "Gold",
size: "medium",
useAmazonAddressBook: true,
authorization: function() {
var loginOptions = {scope: 'profile payments:widget'};
authRequest = amazon.Login.authorize(loginOptions, "https://store-24r5d.mybigcommerce.com/checkout-with-amazon/");
},
onError: function(error) {
// Write your custom error handling
}
});
</script>
<!--Amazon Pay ends Here-->
在我的custom.css上呈现钱包：
<!-- please put the style below inside your CSS file -->
#addressBookWidgetDiv{
width: 400px;
height: 228px;
}
在我的钱包应该呈现的页面上（这是问题）：
<!--Amazon wallet Widget-->
<div id="addressBookWidgetDiv">
</div>
<script>
new OffAmazonPayments.Widgets.AddressBook({
sellerId: 'SellerIDHere,'
onOrderReferenceCreate: function(orderReference) {
orderReference.getAmazonOrderReferenceId();
},
onAddressSelect: function(orderReference) {
// Replace the following code with the action that you want to perform
// after the address is selected.
// The amazonOrderReferenceId can be used to retrieve
// the address details by calling the GetOrderReferenceDetails
// operation. If rendering the AddressBook and Wallet widgets on the
// same page, you should wait for this event before you render the
// Wallet widget for the first time.
// The Wallet widget will re-render itself on all subsequent
// onAddressSelect events, without any action from you. It is not
// recommended that you explicitly refresh it.
},
design: {
designMode: 'responsive'
},
onError: function(error) {
// your error handling code
}
}).bind("addressBookWidgetDiv");
</script>
<!--Amazon wallet ends here-->
听起来您没有在尝试呈现addressBook的页面上包含所需的Amazon小部件js库。要确认，请打开控制台，看看是否收到以下错误：
“ReferenceError：OffAmazonPayments未定义”
如果是这样，只需包含沙箱或生产js文件：
<script type='text/javascript'
src='https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js'>
要么
<script type='text/javascript'
src=='https://static-na.payments-amazon.com/OffAmazonPayments/us/js/Widgets.js'>
此外，您的上述代码是呈现亚马逊的地址簿，而不是钱包。付款需要钱包（选择信用卡），地址簿（选择送货地址）是可选的。有关添加钱包（和地址簿）按钮的文档，请查看https://payments.amazon.com/documentation/lpwa/201749840#201749990。
我访问了您的网站，似乎没有工作。仅供参考，您使用的是使用亚马逊登录。当点击“通过亚马逊支付”这是“登录亚马逊”体验时，您会看到要求您同意。
除了添加小部件代码之外，您还需要在<head>中设置使用Amazon客户端ID登录，如下所示：
<script type='text/javascript'>
window.onAmazonLoginReady = function () {
amazon.Login.setClientId('your_login_with_amazon_client_id');
};
</script>
如果您未设置客户端ID，则可能会看到会话到期等内容。
您需要在“使用Amazon支付”按钮页面和小部件页面上包含此内容以及Widgets.js。
设置客户端ID后，必须加载Widgets.js。
亚马逊文档中给出的脚本代码包含属性async ='async'，看起来像这样 -
<script type='text/javascript' async='async'
src='https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js'>
</script>
现在你必须删除“async”属性，因为它导致了整个问题。当你的代码需要OffAmazonPayments引用时，但JavaScript文件（.../widgets.js）仍在加载（因为它是一个异步函数）。所以只需删除“async”属性，就可以像这样制作脚本代码 -
<script type='text/javascript' async='async'
src='https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js'>
</script>
如果您使用异步将其添加到head标记，它似乎以这种方式工作。
<script async type='text/javascript' src='https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js'></script>