如何修复错误并使我的 Adyen Drop In Web 正常工作？

问题描述

这是尝试让 Adyen Drop In Web 工作的另一次尝试。目前，我已经在使用 Node.js 的自动安装的 Heroku 网站和使用 PHP 的本地主机上使用 Wordpress 插件使用它。现在我试图将它从我的本地主机获取到我的网站进行测试，但是它进行得并不顺利。（最后，我想要一个没有框架的 Drop In Web PHP 版本。）

我在将文件上传到我的网站后收到这些错误：

https://gyazo.com/4ce6072bd536b60a3fc57ef6d39f6725

我的页面文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Adyen Checkout Components sample code</title>
    <link rel="stylesheet" href="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.15.1/adyen.css">
    <link rel="stylesheet" href="/site/Adyen/src/demo.css">
</head>
<body>
    <div class="container container--full-width">
        <div class="main">
            <div class="checkout-container">
                <a href="../">Back</a>

                <h1>Drop-in</h1>
                <div class="payment-method">
                    <div id="dropin-container">
                        <!-- Drop-in will be rendered here -->
                    </div>
                </div>
            </div>

            <div class="info">
                <p>
                    Check the Source Code to see the full implementation.
                </p>
                <p>
                    To make a payment,use our <a href="https://docs.adyen.com/developers/development-resources/test-cards/test-card-numbers" target="_blank">test card numbers</a>.
                </p>
                <p>
                    For more information,please refer to the <a href="https://docs.adyen.com/checkout/drop-in-web/" target="_blank">Drop-in documentation</a>.
                </p>
            </div>
        </div>

        <div class="sidebar">
            <div class="header">
                <h2>Basic Implementation</h2>
                <button class="copy-sample-code" aria-label="Copy sample code"></button>
            </div>
            <pre class="source-code">
                <code>
                
                    const checkout = new AdyenCheckout({
                        environment: 'test',clientKey: 'test_...',paymentMethodsResponse: { ... }
                    });
    
                    const dropin = checkout.create('dropin',{
                        onSubmit: (state,dropin) => {}
                    }).mount('#dropin-container');

                </code>
            </pre>

            <div class="header">
                <h2>Current state</h2>
            </div>
            <pre class="current-state">{}</pre>

            <div class="request-container">
                <div class="header">
                    <h2>Request</h2>
                </div>
                <p>The request to the <code>/payments</code> endpoint will be shown here.</p>
                <pre class="request-code"></pre>
            </div>

            <div class="response-container">
                <div class="header">
                    <h2>Response</h2>
                </div>
                <p>The response from the <code>/payments</code> endpoint will be shown here.</p>
                <pre class="response-code"></pre>
            </div>
        </div>
    </div>

    <script src="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.15.1/adyen.js"></script>
    <script src="/site/Adyen/src/demo.js"></script>
    <script src="/site/Adyen/src/utils.js"></script>
    <script src="/site/Adyen/src/dropin/dropin.js"></script>
</body>
</html>

utils.js 文件：

const paymentMethodsConfig = {
    shopperReference: 'Checkout Components sample code test',reference: 'Checkout Components sample code test',countryCode: 'NL',amount: {
        value: 1000,currency: 'EUR'
    }
};

const paymentsDefaultConfig = {
    shopperReference: 'Checkout Components sample code test',channel: 'Web',returnUrl: 'https://your-company.com/',currency: 'EUR'
    },lineItems: [
        {
            id: '1',description: 'Test Item 1',amountExcludingTax: 10000,amountIncludingTax: 11800,taxAmount: 1800,taxPercentage: 1800,quantity: 1,taxCategory: 'High'
        }
    ]
};

// Generic POST Helper
const httpPost = (endpoint,data) =>
    fetch(`/${endpoint}`,{
        method: 'POST',headers: {
            Accept: 'application/json,text/plain,*/*','Content-Type': 'application/json'
        },body: JSON.stringify(data)
    }).then(response => response.json());

// Get all available payment methods from the local server
const getPaymentMethods = () =>
    httpPost('paymentMethods',paymentMethodsConfig)
        .then(response => {
            if (response.error) throw 'No paymentMethods available';

            return response;
        })
        .catch(console.error);

// Posts a new payment into the local server
const makePayment = (paymentMethod,config = {}) => {
    const paymentsConfig = { ...paymentsDefaultConfig,...config };
    const paymentRequest = { ...paymentsConfig,...paymentMethod };

    updateRequestContainer(paymentRequest);

    return httpPost('payments',paymentRequest)
        .then(response => {
            if (response.error) throw 'Payment initiation failed';

            updateResponseContainer(response);

            return response;
        })
        .catch(console.error);
};

// Fetches an originKey from the local server
const getOriginKey = () =>
    httpPost('originKeys')
        .then(response => {
            if (response.error || !response.originKeys) throw 'No originKey available';

            return response.originKeys[Object.keys(response.originKeys)[0]];
        })
        .catch(console.error);

// Fetches a clientKey from the 
const getClientKey = () =>
    httpPost('clientKeys')
        .then(response => {
            if (response.error || !response.clientKey) throw 'No clientKey available';

            return response.clientKey;
        })
        .catch(console.error);

感谢任何帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

adyen json

如何修复错误并使我的 Adyen Drop In Web 正常工作？

问题描述

解决方法

相关问答