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 认证，用于测试需要身份验证的支付流程。--> |