Javascript 从React-AmazonPay访问脚本标记回调_Javascript_Reactjs_Amazon Pay

Javascript 从React-AmazonPay访问脚本标记回调

javascript reactjs

Javascript 从React-AmazonPay访问脚本标记回调,javascript,reactjs,amazon-pay,Javascript,Reactjs,Amazon Pay,我正在将AmazonPay整合到React SPA中。经典的集成依赖于脚本标记和回调（）下面是按钮小部件的一个示例： <head> <script type='text/javascript'> window.onAmazonLoginReady = function() { amazon.Login.setClientId('CLIENT-ID'); }; window.onAmazonPaymentsReady = funct

我正在将AmazonPay整合到React SPA中。经典的集成依赖于脚本标记和回调（）

下面是按钮小部件的一个示例：

<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>

包含AmazonPay

div

的组件现在可以在

componentDidMount

上调用：

import React, {Component} from 'react'

class AmazonMethod extends Component {

    componentDidMount () {
        window.showButton()
    }

    render() { return <div id="AmazonPayButton"></div>}
}

export default AmazonMethod

import React，{Component}来自“React”
类AmazonMethod扩展组件{
组件安装（）{
window.showButton（）
}
render（）{return}
}
导出默认AmazonMethod

我不知道如何从React组件内部访问

onError

回调。我如何倾听回调并做出适当的响应

这个问题同样适用于AddressWidget和WalletWidget；它们都依赖于脚本标记回调

更新：

我已经写了一篇文章，总结了如何将AmazonPay与客户端React集成。

为什么不在componentDidMount中传递一个函数给showButton函数，onError可以调用它

大概是这样的：

window.onAmazonPaymentsReady=function（）{
window.showButton=函数（errorFunc）{
var-authRequest；
//eslint禁用下一行无未定义
OffAmazonPayments.Button（“AmazonPayButton”，%REACT\u APP\u AMAZON\u SELLER\u ID\u SANDBOX%”{
类型：“PwA”，
颜色：“金色”，
尺码：“中等”，
授权：功能（）{
登录选项={
范围：“配置文件邮政编码付款：小部件付款：发货地址”，
弹出窗口：真
};
authRequest=amazon.Login.authorize（loginOptions，“%PUBLIC\u URL%/pay with amazon”）；
},
onError:函数（错误）{
console.log（error.toString（））
errorFunc（错误）
}
});
};
};
从“React”导入React，{Component}
类AmazonMethod扩展组件{
组件安装（）{
window.showButton（this.errorFunc）
}
errorFunc=（错误）=>{
console.log（错误）；
这是我的国家({
错误
});
}
render（）{return}
}
导出默认AmazonMethod

为什么不在componentDidMount中传递一个函数给showButton函数，onError可以调用它

大概是这样的：

window.onAmazonPaymentsReady=function（）{
window.showButton=函数（errorFunc）{
var-authRequest；
//eslint禁用下一行无未定义
OffAmazonPayments.Button（“AmazonPayButton”，%REACT\u APP\u AMAZON\u SELLER\u ID\u SANDBOX%”{
类型：“PwA”，
颜色：“金色”，
尺码：“中等”，
授权：功能（）{
登录选项={
范围：“配置文件邮政编码付款：小部件付款：发货地址”，
弹出窗口：真
};
authRequest=amazon.Login.authorize（loginOptions，“%PUBLIC\u URL%/pay with amazon”）；
},
onError:函数（错误）{
console.log（error.toString（））
errorFunc（错误）
}
});
};
};
从“React”导入React，{Component}
类AmazonMethod扩展组件{
组件安装（）{
window.showButton（this.errorFunc）
}
errorFunc=（错误）=>{
console.log（错误）；
这是我的国家({
错误
});
}
render（）{return}
}
导出默认AmazonMethod

如何访问组件和setState中的回调函数？你能举个例子吗？我明白了你的意思。更新了我的第一个答案。：）即将更正你通过回调的位置。谢谢如何访问组件和setState中的回调函数？你能举个例子吗？我明白了你的意思。更新了我的第一个答案。：）即将更正你通过回调的位置。谢谢

import React, {Component} from 'react'

class AmazonMethod extends Component {

    componentDidMount () {
        window.showButton()
    }

    render() { return <div id="AmazonPayButton"></div>}
}

export default AmazonMethod