您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
php项目集成stripe pay支付(自定义placeholder)
发布时间：2023-10-29 17:17:16编辑：雪饮阅读（）
-
上篇
http://www.gaojiupan.cn/manshenghuo/chengxurensheng/5564.html
中已经完成了基础的阿联酋aed货币的银行卡支付。
那么实际上自带的这种效果并不是很好，包括一些国外论坛里面都有人吐槽card number的默认placeholder，那么我是觉得直接为空比较好。
但是如果要自定义的情况下，就不能使用官方的快速demo的checkout那个了。
不过总体变化也不是很多，后端还就是用上篇中的后端，只是改变下前端到每个输入元素都自己创建。
支付的时候也指定为card确认支付，而不是直接确认支付。
实践如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<title>Payment</title>
<link rel="stylesheet" href="/assets/css/checkout.css">
<style>
body{
height: auto !important;
}
form{
width: 100% !important;
}
</style>
<script src="/assets/js/jquery-1.10.2.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<script src="/static/js/layer/layer.js"></script>
<script type="text/javascript" src="/assets/js/unpkg.com_@dcloudio_uni-webview-js@0.0.3_index.js"></script>
<script>
var stripe;
var elements;
var client_secret;
var cardNumberElement;
var type=new URLSearchParams(new URL(window.location.href).search).get("type");
var order_id=new URLSearchParams(new URL(window.location.href).search).get("order_id");
async function stripePaySubmit(){
var return_url=document.location.protocol+'//'+document.domain+'/common/StripePay/paymentCompletion?type='+type+"&order_id="+order_id;
console.log("return_url",return_url);
var confirmCardPayment=await stripe.confirmCardPayment(client_secret,{
payment_method:{
card: cardNumberElement
}
});
console.log("confirmCardPayment",confirmCardPayment);
if(confirmCardPayment.error){
var error =confirmCardPayment.error;
console.log("error",error);
if (error.type === "card_error" || error.type === "validation_error") {
layer.msg(error.message,{icon:0});
$("#submit").attr("disabled",false);
}
if(error.type=="invalid_request_error" && error.code=="payment_intent_unexpected_state" && error.payment_intent.status=="succeeded"){
$("#submit").attr("disabled",false);
layer.msg("The order has been paid",{icon:0});
}
else {
layer.msg("An unexpected error occurred.",{icon:0});
console.log("error.message",error.message);
$("#submit").attr("disabled",false);
}
}
if(confirmCardPayment.paymentIntent && confirmCardPayment.paymentIntent.status=="succeeded"){
location.href=return_url;
}
}
async function stripePay(){
stripe = Stripe('{$stripe_public_key}');
client_secret=new URLSearchParams(new URL(window.location.href).search).get("client_secret");
if(client_secret=="" || client_secret==null){
return;
}
elements = stripe.elements({
clientSecret:client_secret,
locales:['en'],
locale:'en'
});
$("#submit").show();
var style = {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 300,
fontFamily: 'Helvetica Neue',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
},
},
};
cardNumberElement = elements.create('cardNumber', {
style: style,
placeholder: "Card number"
});
cardNumberElement.mount('#card-number-element');
var cardExpiryElement = elements.create('cardExpiry', {
style: style,
placeholder: "Expiration date"
});
cardExpiryElement.mount('#card-expiry-element');
var cardCvcElement = elements.create('cardCvc', {
style: style,
placeholder: "Security code"
});
cardCvcElement.mount('#card-cvc-element');
}
$(function(){
stripePay();
//监听付款提交按钮
$("#submit").click(function(){
$("#submit").attr("disabled",true);
stripePaySubmit();
});
})
</script>
</head>
<body>
<form>
<div class="group">
<label>
<span>Card number</span>
<div id="card-number-element" class="field"></div>
</label>
<label>
<span>Expiry date</span>
<div id="card-expiry-element" class="field"></div>
</label>
<label>
<span>CVC</span>
<div id="card-cvc-element" class="field"></div>
</label>
</div>
<button type="button" id="submit" style="display: none;" class="btn btn-default btn-success">
<div class="spinner hidden" id="spinner"></div>
<span id="button-text">Pay now</span>
</button>
</form>
</body>
</html>最终的效果：
看到这效果确实没有官方的好看了，这就需要自己再稍微加工下了
目前我这里测试是支付成功的，但是回调方面，由于即便是在开发模式的stripe pay cli也需要登录stripe pay的账户的token，这边暂时不方便拿到这个token，所以暂时没有测试回调，等有了token后再测，其实这里基本上我直觉应该是没有问题了的。
关键字词：stripe,pay,placeholder