199 lines
7.0 KiB
HTML
199 lines
7.0 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Stripe Payment Example</title>
|
|||
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
padding: 10px;
|
|||
|
|
margin: 0px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
/* .form-container {
|
|||
|
|
width: 95%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|||
|
|
} */
|
|||
|
|
.form-container h2 {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.form-group {
|
|||
|
|
width: 90%;
|
|||
|
|
margin: 10px auto;
|
|||
|
|
}
|
|||
|
|
.title_{
|
|||
|
|
font-weight: 600;
|
|||
|
|
width: 98%;
|
|||
|
|
margin: 10px auto;
|
|||
|
|
}
|
|||
|
|
#card-element {
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
button {
|
|||
|
|
background-color: #106f3d;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
button:disabled {
|
|||
|
|
background-color: #ddd;
|
|||
|
|
}
|
|||
|
|
.error {
|
|||
|
|
|
|||
|
|
color: red;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
#card-element{
|
|||
|
|
width: 93% !important;
|
|||
|
|
margin: 10px auto;
|
|||
|
|
}
|
|||
|
|
input{
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
width: 100%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
#submit{
|
|||
|
|
margin-top: 45px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<div class="form-container">
|
|||
|
|
<h2></h2>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<form id="payment-form" onsubmit="handleSubmit(event)">
|
|||
|
|
|
|||
|
|
<div class="title_">Customer Name</div>
|
|||
|
|
<input type="text" id="name" name="name" placeholder="Please enter your name" required>
|
|||
|
|
<div class="title_">Customer amount At least four </div>
|
|||
|
|
<input type="number" id="amount" name="amount" placeholder="Please enter your amount" required>
|
|||
|
|
<div class="title_">Credit or debit card</div>
|
|||
|
|
<div id="card-element"></div>
|
|||
|
|
<!-- Stripe Element将在这里渲染 -->
|
|||
|
|
<button id="submit" type="submit"> payment</button>
|
|||
|
|
<div class="error" style="width: 100px;" id="error-message"></div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
//获取url携带参数
|
|||
|
|
|
|||
|
|
function GetQueryString(name) {
|
|||
|
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
|||
|
|
var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
|
|||
|
|
var context = "";
|
|||
|
|
if (r != null)
|
|||
|
|
context = decodeURIComponent(r[2]);
|
|||
|
|
reg = null;
|
|||
|
|
r = null;
|
|||
|
|
return context == null || context == "" || context == "undefined" ? "" : context;
|
|||
|
|
}
|
|||
|
|
const token = GetQueryString("token");
|
|||
|
|
// alert(GetQueryString("token"));
|
|||
|
|
// 使用你的公钥初始化Stripe
|
|||
|
|
const stripe = Stripe('pk_test_51QGKJrCrcRylwRdelJhR9vySUQbjkJdVVIKAlArKH9E8OiNLGPbdieMsbGDJDaAHMWJpPRpnfgHZrv1Hq6suzVJL00uV3547D5'); // 替换成你的实际 Stripe 公钥
|
|||
|
|
const elements = stripe.elements();
|
|||
|
|
const card = elements.create('card');
|
|||
|
|
card.mount('#card-element'); // 渲染信用卡输入框到页面上
|
|||
|
|
|
|||
|
|
// 处理表单提交
|
|||
|
|
async function handleSubmit(event) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
|
|||
|
|
const name = document.getElementById('name').value; // 获取输入的客户姓名
|
|||
|
|
const amount = document.getElementById('amount').value; // 获取输入的客户姓名
|
|||
|
|
// 禁用提交按钮，防止用户多次点击
|
|||
|
|
document.getElementById('submit').disabled = true;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 1. 调用后端创建 PaymentIntent，获取 clientSecret
|
|||
|
|
const response = await fetch('http://192.168.1.4:8880/paymentController/create-payment-intent', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
'Authorization': token
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({ name: name ,amount:amount}), // 将客户数据发送到后端
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const { clientSecret } = await response.json(); // 获取后端返回的 clientSecret
|
|||
|
|
|
|||
|
|
// 2. 使用 clientSecret 来确认支付
|
|||
|
|
const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
|
|||
|
|
payment_method: {
|
|||
|
|
card: card, // 传递卡片信息
|
|||
|
|
billing_details: {
|
|||
|
|
name: name, // 传递客户姓名等账单信息
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
console.log("error",error)
|
|||
|
|
|
|||
|
|
// 3. 处理支付确认结果
|
|||
|
|
if (error) {
|
|||
|
|
console.log("error",error)
|
|||
|
|
document.getElementById('error-message').textContent = error.message; // 显示错误信息
|
|||
|
|
document.getElementById('submit').disabled = false; // 重新启用按钮，允许重试
|
|||
|
|
} else if (paymentIntent.status === 'succeeded') {
|
|||
|
|
alert('pay success！'); // 支付成功时的提示
|
|||
|
|
console.log('PaymentIntent:', paymentIntent); // 输出支付意图信息
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
document.getElementById('error-message').textContent = 'An error occurred. Please try again later'; // 显示网络请求错误
|
|||
|
|
document.getElementById('submit').disabled = false; // 重新启用按钮，允许重试
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
<!--常见的 Stripe 测试卡号：-->
|
|||
|
|
<!--成功支付：-->
|
|||
|
|
|
|||
|
|
<!--卡号：4242 4242 4242 4242-->
|
|||
|
|
<!--有效期：任意未来的日期（例如：12/34）-->
|
|||
|
|
<!--CVC：任意 3 位数字（例如：123）-->
|
|||
|
|
<!--使用说明：该卡号用于测试成功支付。-->
|
|||
|
|
<!--卡被拒绝：-->
|
|||
|
|
|
|||
|
|
<!--卡号：4000 0000 0000 9995-->
|
|||
|
|
<!--有效期：任意未来的日期（例如：12/34）-->
|
|||
|
|
<!--CVC：任意 3 位数字（例如：123）-->
|
|||
|
|
<!--使用说明：该卡号会被拒绝，适用于测试支付失败的情况。-->
|
|||
|
|
<!--卡已过期：-->
|
|||
|
|
|
|||
|
|
<!--卡号：4000 0000 0000 0069-->
|
|||
|
|
<!--有效期：已过期（例如：01/20）-->
|
|||
|
|
<!--CVC：任意 3 位数字（例如：123）-->
|
|||
|
|
<!--使用说明：该卡号用于测试支付时的卡片过期错误。-->
|
|||
|
|
<!--卡余额不足：-->
|
|||
|
|
|
|||
|
|
<!--卡号：4000 0000 0000 0127-->
|
|||
|
|
<!--有效期：任意未来的日期（例如：12/34）-->
|
|||
|
|
<!--CVC：任意 3 位数字（例如：123）-->
|
|||
|
|
<!--使用说明：该卡号用于测试支付时余额不足的错误。-->
|
|||
|
|
<!--处理需要身份验证：-->
|
|||
|
|
|
|||
|
|
<!--卡号：4000 0025 0000 3155-->
|
|||
|
|
<!--有效期：任意未来的日期（例如：12/34）-->
|
|||
|
|
<!--CVC：任意 3 位数字（例如：123）-->
|
|||
|
|
<!--使用说明：该卡号会触发 3D Secure 认证，用于测试需要身份验证的支付流程。-->
|