2

我有一个反应应用程序，我想在其中设置 adyen（支付处理 API）。我想使用结帐 SDK（https://docs.adyen.com/developers/checkout/web-sdk），因为它非常简单，我已将js逻辑移至componentDidMount，但加载 sdk 时遇到问题，

<script type="text/javascript" src="https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.6.3.min.js"></script>

所以我可以使用 SDK 中的以下函数：

chckt.hooks.beforeComplete = function(node, paymentData) {
   return false; // Indicates that you want to replace the default handling.
};

我尝试在我的 React 组件中使用react-script-tag：

render() {
        return (
            <div className='checkout-warpper'>
               <ScriptTag type="text/javascript" src="https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.9.2.min.js" />

                <div className="checkout" id="adyen-checkout">
                    {/* The checkout interface will be rendered here */}
                </div>
            </div>
        );
    }

但仍然得到错误：

Uncaught ReferenceError: chckt is not defined.
4

2 回答 2

1

试试window.chckt.hooks.beforeComplete = ...chckt 是一个全局范围变量。

加载外部脚本最简单的方法是使用react-async-script-loader

import React from 'react';
import scriptLoader from 'react-async-script-loader'

class CheckoutSDK extends React.Component {

    componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) {
        if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished
            if (isScriptLoadSucceed) {

                window.chckt.hooks.beforeComplete = function(node, paymentData) {
                    return false; // Indicates that you want to replace the default handling.
                };

            }
        }
    }

    render() {
        return null
    }

}

export default scriptLoader('https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.6.3.min.js',)(CheckoutSDK)
于 2019-02-09T13:18:26.520 回答
1

您可以尝试使用 import ScriptLoader from 'react-script-loader-hoc'；您可以在 window.chckt 上找到。

于 2019-05-09T15:04:18.960 回答