php项目集成stripe pay支付(自定义placeholder)

上篇

http://www.gaojiupan.cn/manshenghuo/chengxurensheng/5564.html

中已经完成了基础的阿联酋aed货币的银行卡支付。

那么实际上自带的这种效果并不是很好，包括一些国外论坛里面都有人吐槽card number的默认placeholder，那么我是觉得直接为空比较好。

但是如果要自定义的情况下，就不能使用官方的快速demo的checkout那个了。

不过总体变化也不是很多，后端还就是用上篇中的后端，只是改变下前端到每个输入元素都自己创建。

支付的时候也指定为card确认支付，而不是直接确认支付。

实践如：

Payment

body{

height: auto !important;

}

form{

width: 100% !important;

}

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();

});

})

Card number

Expiry date

CVC

Pay now

最终的效果：

看到这效果确实没有官方的好看了，这就需要自己再稍微加工下了

目前我这里测试是支付成功的，但是回调方面，由于即便是在开发模式的stripe pay cli也需要登录stripe pay的账户的token，这边暂时不方便拿到这个token，所以暂时没有测试回调，等有了token后再测，其实这里基本上我直觉应该是没有问题了的。