如何解决如何修复错误并使我的 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 举报,一经查实,本站将立刻删除。