从 React 访问脚本标签回调 - AmazonPay
Posted
技术标签:
【中文标题】从 React 访问脚本标签回调 - AmazonPay【英文标题】：Access Script Tag Callback from React - AmazonPay 【发布时间】：2018-08-27 15:46:30 【问题描述】：我正在将 AmazonPay 集成到 React SPA 中。经典集成依赖于脚本标签和回调 (docs)。
这是按钮小部件的一个示例：
<head>
<script type='text/javascript'>
window.onAmazonLoginReady = function()
amazon.Login.setClientId('CLIENT-ID');
;
window.onAmazonPaymentsReady = function()
showButton();
;
</script>
<script async="async" src='https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js'>
</script>
</head>
<body>
. . .
<div id="AmazonPayButton">
</div>
...
<script type="text/javascript">
function showButton()
var authRequest;
OffAmazonPayments.Button("AmazonPayButton", "SELLER-ID",
type: "TYPE",
color: "COLOR",
size: "SIZE",
authorization: function()
loginOptions = scope: "SCOPES",
popup: "POPUP-PARAMETER";
authRequest = amazon.Login.authorize (loginOptions,
"REDIRECT-URL");
,
onError: function(error)
// your error handling code.
// alert("The following error occurred: "
// + error.getErrorCode()
// + ' - ' + error.getErrorMessage());
);
;
</script>
. . .
<script type="text/javascript">
document.getElementById('Logout').onclick = function()
amazon.Login.logout();
;
</script>
</body>
使用 React 时，id="AmazonPayButton" 和 div 不会出现在页面上，直到 React 挂载 div，导致 window.showButton() 函数失败。
为了规避这个问题，我将function showButton() 定义封装在window.showButton() 中：
window.onAmazonPaymentsReady = function()
window.showButton = function ()
var authRequest;
// eslint-disable-next-line no-undef
OffAmazonPayments.Button("AmazonPayButton", "%REACT_APP_AMAZON_SELLER_ID_SANDBOX%",
type: "PwA",
color: "Gold",
size: "medium",
authorization: function ()
loginOptions =
scope: "profile postal_code payments:widget payments:shipping_address",
popup: true
;
authRequest = amazon.Login.authorize(loginOptions, "%PUBLIC_URL%/pay-with-amazon");
,
onError: function (error)
console.log(error.toString())
);
;
;
现在可以在 componentDidMount 上调用包含 AmazonPay div 的组件：
import React, Component from 'react'
class AmazonMethod extends Component
componentDidMount ()
window.showButton()
render() return <div id="AmazonPayButton"></div>
export default AmazonMethod
我很困惑如何从我的 React 组件内部访问 onError 回调。如何监听回调并做出适当响应？
这个问题也适用于 AddressWidget 和 WalletWidget；它们都依赖于脚本标签回调。
更新： 我写了一个 post 总结了如何将 AmazonPay 与客户端 React 集成。
【问题讨论】：
【参考方案1】：为什么不直接将 onError 可以调用的 componentDidMount 中的 showButton 函数传入一个函数？
类似这样的：
window.onAmazonPaymentsReady = function()
window.showButton = function (errorFunc)
var authRequest;
// eslint-disable-next-line no-undef
OffAmazonPayments.Button("AmazonPayButton", "%REACT_APP_AMAZON_SELLER_ID_SANDBOX%",
type: "PwA",
color: "Gold",
size: "medium",
authorization: function ()
loginOptions =
scope: "profile postal_code payments:widget payments:shipping_address",
popup: true
;
authRequest = amazon.Login.authorize(loginOptions, "%PUBLIC_URL%/pay-with-amazon");
,
onError: function (error)
console.log(error.toString())
errorFunc(error)
);
;
;
import React, Component from 'react'
class AmazonMethod extends Component
componentDidMount ()
window.showButton(this.errorFunc)
errorFunc = (error) =>
console.log(error);
this.setState(
amazonError: error
);
render() return <div id="AmazonPayButton"></div>
export default AmazonMethod【讨论】：
如何访问组件和 setState 中的回调函数？可以举个例子吗？ 我明白你的意思了。 更新了我的第一个答案。 :) 即将更正您传递回调的位置。谢谢！以上是关于从 React 访问脚本标签回调 - AmazonPay的主要内容，如果未能解决你的问题，请参考以下文章
尽管存储桶是公共的，但 Amazon S3 base64 图像不适用于 og:image 标签
如何从我的网站中删除加载了脚本标签的 CSS 以及删除该脚本标签？