从 React 访问脚本标签回调 - AmazonPay答案

【问题标题】：Access Script Tag Callback from React - AmazonPay从 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 集成。

【问题讨论】：

标签： javascript reactjs amazon-pay

【解决方案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 中的回调函数？可以举个例子吗？
我明白你的意思了。
更新了我的第一个答案。
:) 即将更正您传递回调的位置。谢谢！