Adyen Web 项目教程
Adyen 是一家提供支付服务的公司，支持全球各种支付方式。通过 Adyen 的 API，开发者可以轻松集成支付解决方案，以满足各种电商需求。本文将介绍如何在一个简单的 Web 项目中集成 Adyen 支付。
环境准备
在开始之前，请确保你已经注册了 Adyen 帐号，并且获取了 API 密钥和相应的商户 ID。此外，你需要搭建一个基本的 Web 项目，可以使用 Vanillia JS、React、Angular 等框架。为了简单起见，我们将使用纯 HTML 和 JavaScript 示例。
1. 创建 HTML 结构
首先，创建一个简单的 HTML 页面，包含一个可以输入信用卡信息的表单。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adyen Web 支付示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<h1>在线支付</h1>
<form id="payment-form">
<label for="card-number">卡号:</label>
<input type="text" id="card-number" required><br>
<label for="expiry-date">到期日 (MM/YY):</label>
<input type="text" id="expiry-date" required><br>
<label for="cvc">CVC:</label>
<input type="text" id="cvc" required><br>
<button type="submit">提交支付</button>
</form>
<script src="app.js"></script>
</body>
</html>
2. 创建 JavaScript 脚本
接下来，创建一个 app.js 文件，其中包含调用 Adyen API 的代码。我们将使用 Axios 库来执行 HTTP 请求。
// app.js
document.getElementById('payment-form').addEventListener('submit', async function(event) {
event.preventDefault();
const cardNumber = document.getElementById('card-number').value;
const expiryDate = document.getElementById('expiry-date').value.split('/');
const cvc = document.getElementById('cvc').value;
// 解析到期日
const expirationMonth = expiryDate[0];
const expirationYear = '20' + expiryDate[1];
// 创建支付请求的 payload
const payload = {
paymentMethod: {
type: 'scheme',
number: cardNumber,
expiryMonth: expirationMonth,
expiryYear: expirationYear,
cvc: cvc
},
amount: {
currency: 'EUR',
value: 1000 // 10.00 EUR
},
reference: 'YOUR_ORDER_ID',
merchantAccount: 'YOUR_MERCHANT_ACCOUNT'
};
try {
// 向 Adyen 发送支付请求
const response = await axios.post('https://checkout-test.adyen.com/v68/payments', payload, {
headers: {
'Content-Type': 'application/json',
'X-API-Key': 'YOUR_API_KEY' // 替换为你的 API 密钥
}
});
// 处理支付响应
if (response.data.resultCode === 'Authorised') {
alert('支付成功！');
} else {
alert('支付失败: ' + response.data.resultCode);
}
} catch (error) {
console.error('支付请求失败:', error);
alert('支付请求失败，请稍后重试。');
}
});
3. 运行项目
确保你在拥有 HTTPS 支持的环境中运行此示例（例如，使用本地服务器），因为 Adyen 的 API 可能会要求安全连接。打开浏览器，加载你的 HTML 文件并尝试提交支付表单。
小结
通过以上步骤，你可以在自己的 Web 项目中成功集成 Adyen 支付。请注意，这只是一个基本示例，实际的项目中你可能需要实现更加复杂的功能，例如错误处理、输入验证、支付状态查询等。
更多 Adyen API 文档和功能介绍可以参考 Adyen 官方文档：Adyen API Documentation。希望这个教程能帮助你快速入门 Adyen 支付集成！
