Интеграция Adyen Checkout SDK в приложение реакции

Question

У меня есть приложение реагирования, и я хочу настроить 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.
};

Я пытался использовать response-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.

Answer 1

вы можете попробовать использовать импорт ScriptLoader из'act-script-loader-hoc ';и вы можете найти на window.chckt.

Answer 2

Try window.chckt.hooks.beforeComplete = ... chckt - это глобальная переменная области видимости.

Самый простой способ загрузить внешний скрипт - использовать response-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)