0

这是试图让 Adyen Drop In Web 工作的另一次尝试。目前我已经让它与一个 Wordpress 插件一起工作，在一个使用 Node.js 的自动安装的 Heroku 网站上和在我的本地主机上使用 PHP。现在我正试图从我的本地主机获取它到我的网站进行测试，但是它并不顺利。（最后我想要一个没有框架的 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',
    reference: 'Checkout Components sample code test',
    countryCode: 'NL',
    channel: 'Web',
    returnUrl: 'https://your-company.com/',
    amount: {
        value: 1000,
        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);

任何帮助表示赞赏。

4

0 回答 0