我有一个 React 应用程序,我想在其中设置 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-script-tag ,在我的 React 组件中:
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.
最佳答案
尝试 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)
关于javascript - React 应用程序中 Adyen 的 Checkout SDK 集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54605838/