Stripe - 支付宝支付（前端）
2、前端代码：
use \Illuminate\Support\Facades\Input;
?><!DOCTYPE html>
<html lang="zh-cnm">
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<title>VIP会员
<link rel="stylesheet" type="text/css" href="<?=Config::get('app.cdn01')?>/api_assert/css/index.min.css">
<link rel="stylesheet" type="text/css" href="<?=Config::get('app.cdn01')?>/api_assert/css/inviteReg.min.css">
<script src="<?=Config::get('app.cdn01')?>/api_assert/script/flexible.min.js">
#footers{
width:100%;
height:6rem;
background:#fff;
position:fixed;
left:0;
bottom: -.2rem;
margin:auto;
}
.footers_top{
width:100%;
height:.9rem;
text-align:center;
line-height:.9rem;
background:#fff;
position:relative;
display:flex;
justify-content:center;
align-items:center;
}
.footers_top span{
font-family:"PingFang-SC-Regular";
font-size:.34rem;
color:#333333;
}
.footers_top .no_icon{
width:.22rem;
height:.22rem;
position:absolute;
right:.3rem;
top:0;
bottom:0;
margin:auto;
}
.footers_top .no_icon img{
display:block;
width:100%;
}
.mark fade{
width:100%;
height:100%;
}
.Popup {
display:none;
width:100%;
height:6rem;
background:#fff;
position:fixed;
left:0;
right:0;
bottom:0;
margin:auto;
z-index:999;
padding:.9rem .3rem 0rem;
box-sizing:border-box;
}
.Popup .footers_top{
position:absolute;
top:0;
left:0;
margin:auto;
border-bottom:1px solid #e3e3e3;
background:#fff;
}
.Popup .footers_top .no_icon{
right:.3rem;
}
.Popup .StripeElement {
background-color:white;
height:40px;
padding:10px 12px;
border-radius:4px;
border:1px solid transparent;
box-shadow:0 1px 3px 0 #e6ebf1;
-webkit-transition:box-shadow 150ms ease;
transition:box-shadow 150ms ease;
}
.Popup .StripeElement--focus {
box-shadow:0 1px 3px 0 #cfd7df;
}
.Popup .StripeElement--invalid {
border-color:#fa755a;
}
.Popup .StripeElement--webkit-autofill {
background-color:#fefde5 !important;
}
.Popup .StripeElement {
background-color:white;
height:40px;
padding:10px 12px;
border-radius:4px;
border:1px solid transparent;
box-shadow:0px 0px 3px 1px #e6ebf1;
-webkit-transition:box-shadow 150ms ease;
transition:box-shadow 150ms ease;
}
<body class="unheader unfooter">
<div class="header">
<div class="header-btn">
<div class="i-arrow" _back>
<div class="i-close" _close>
<div class="header-title">邀请注册
<div class="main" id="btn" data-message="<?=isset($ban_flag)?$ban_flag:''?>">
<div class="step">
<div>1.选择礼包
<div><div class="i-arrow">
<div>2.收货信息
<div><div class="i-arrow">
<div class="on">3.立即支付
<form class="step3" action="payment/create">
<div class="scroll">
<label class="input-group">
<div class="group">
<div class="group-l nowrap">
<button type="button" class="name">邀请人 
<div class="group-r">
<div class="contant"><?php echo $parent->nick_name?>
$inviteCode = \App\Models\UserInviteCode::query()->where('user_id',$parent->user_id)->where('state',1)->first();
?> <label class="input-group" <?php echo $inviteCode?'':'style="display:none"'?>>
<div class="group">
<div class="group-l nowrap">
<button type="button" class="name">邀请码 
<div class="group-r">
<div class="contant">
<?php echo $inviteCode?$inviteCode->code:''; ?>
<label class="input-group">
<div class="group">
<div class="group-l nowrap">
<button type="button" class="name">联系人 
<div class="group-r">
<div class="contant">
<?php echo e(Input::get('name'))?> <?php echo e(Input::get('phone'))?>
<label class="input-group">
<div class="group top">
<div class="group-l nowrap">
<button type="button" class="name">地 址 
<div class="group-r">
<div class="contant">
新加坡
<?php echo e(Input::get('address'))?>
<div class="ware">
<div class="group">
$gift = \App\Models\UserUpgradeGift::query()
->where('state',1)
->where('id',Input::get('gift'))
->first();
if(!$gift)
throw new \App\Business\Exceptions\BusinessException('请选择礼包！');
?> <div class="group-l">
<div class="logo"><img src="<?=$gift->pic_url?>">
<div class="group-r">
<div class="group right top">
<div class="group-l">
<div class="ware-main">
<div class="ware-name t-o">
<?=e($gift->goods_name)?>
<div class="ware-spec">
<div class="ware-price">
<span class="now">￥<?=$gift->price?>
<span class="old v-b">￥ <?=$gift->res_price?>
-->
<div class="group-r">
<div class="ware-count">x1
<input type="hidden" name="parentNo" value="<?php echo e(Input::get('parentNo'))?>">
<input type="hidden" name="type" value="<?php echo e(Input::get('hasstore'))?>">
<input type="hidden" name="giftId" value="<?php echo e(Input::get('gift'))?>">
<input type="hidden" name="phone" value="<?php echo e(Input::get('phone'))?>">
<input type="hidden" name="authcode" value="<?php echo e(Input::get('authcode'))?>">
<input type="hidden" name="name" value="<?php echo e(Input::get('name'))?>">
<input type="hidden" name="address" value="<?php echo e(Input::get('address'))?>">
<input type="hidden" name="business" value="UserUpgradeOrder">
<input type="hidden" name="province" value="2">
<input type="hidden" name="city" value="3">
<input type="hidden" name="area" value="4">
<input type="hidden" name="invitationCode" value="<?=$inviteCode?$inviteCode->code:''?>">
<input type="hidden" name="zipcode" value="<?php echo e(Input::get('zipcode'))?>">
<div class="foot">
<div class="group right">
<div class="group-l">
<div class="amount">
共 1件商品
<div class="f-r">
需支付<span class="price">S$<span id="pay_money"></span></span>元
<div class="group-r nowrap">
<button type="button" class="confirm">立即支付
<div class="mark fade">
<div class="pay-mode bounce" id="footers">
<div class="footers_top">
<span>支付方式
<div class="no_icon">
<img src="<?=Config::get('app.url')?>/ononononon.png" alt="">
<div style="border-bottom:none">
<label class="mode" >
<div class="i-alipay" style="background-image:url('<?=Config::get('app.url')?>/xinyongka.png')">
<span class="pay-name v-t">新加坡信用卡
<div class="checkbox f-r">
<input type="radio" name="payProvider" value="1" checked="">
<label class="mode" >
<div class="i-alipay">
<span class="pay-name v-t">支付宝支付
<div class="checkbox f-r">
<input type="radio" name="payProvider" value="2" >
<button type="submit" id="submitOrder" class="btn-submit" style="width:6.2rem; height:.8rem; background:#F7A030; position:absolute; left:0; right:0; margin:auto; text-align:center; line-height:.8rem; color:#FFFFFF;font-size:.3rem; font-family:'PingFang-SC-Regular'; position:absolute; bottom:.4rem; left:0; right:0; margin:auto; border-radius:.12rem;">确认支付
<div class="Popup">
<div class="footers_top">
<span>支付方式
<div class="no_icon">
<img src="<?=Config::get('app.url')?>/ononononon.png" alt="">
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<div id="card-element" style="margin-bottom:.2rem ;margin-top:.2rem">
<label for="card-element" style=" font-family:'PingFang-SC-Regular'; color:#999999;font-size:.26rem;">
填写您的银行卡号确认付款
<div id="card-errors" role="alert" style="margin-top:.2rem; font-family:'PingFang-SC-Regular'; color:#999999;font-size:.26rem;">
<button class="button" style="width:6.2rem; height:.8rem; background:#F7A030; position:absolute; left:0; right:0; margin:auto; text-align:center; line-height:.8rem; color:#FFFFFF;font-size:.3rem; font-family:'PingFang-SC-Regular'; position:absolute; bottom:.4rem; left:0; right:0; margin:auto; border-radius:.12rem;" >
确认支付
<script src="<?=Config::get('app.cdn01')?>/api_assert/script/zepto.min.js">
<script src="<?=Config::get('app.cdn01')?>/api_assert/script/index.min.js">
<script src="<?=Config::get('app.cdn01')?>/api_assert/script/expand.js">
<script src="https://js.stripe.com/v3/">
var msg =$("#btn").attr('data-message');
if(msg){
$("#submitOrder").css({'display':'none'});
$(".confirm").css({'display':'none'});
App.alert(msg);
}
App.ajaxWait({
url:'<?=\Illuminate\Support\Facades\URL::to('app/userUpgrade/Money')?>',
data:{},
success:function(result){
var hasstore ='<?php echo e(Input::get('hasstore'))?>';
if(hasstore==1){
$("#pay_money").text(result['level_1_money'])
}else{
$("#pay_money").text(result['level_2_money'])
}
}
})
// Create a Stripe client.
var stripe = Stripe("<?= env('STRIPE_PUB_KEY') ?>");
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color:'#32325d',
lineHeight:'18px',
fontFamily:'"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing:'antialiased',
fontSize:'16px',
'::placeholder': {
color:'#aab7c4'
}
},
invalid: {
color:'#fa755a',
iconColor:'#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element`
.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
}else {
displayError.textContent ='';
}
});
// Handle form submission.
$("#submitOrder").click((e)=>{
e.preventDefault();
data =$(".step3").serializeArray();
data['pay_provider'] =1;
let parentNo='';
let type='';
let giftId='';
let phone='';
let authcode='';
let name='';
let address='';
let business='';
let province='';
let city='';
let area='';
let invitationCode='';
let zipcode='';
let payProvider='';
data.forEach((val,index)=> {
if (val.name =="parentNo") {
parentNo = val.value;
}
else if (val.name =="type") {
type = val.value;
}
else if (val.name =="giftId") {
giftId = val.value;
}
else if (val.name =="phone") {
phone = val.value;
}
else if (val.name =="authcode") {
authcode = val.value;
}
else if (val.name =="name") {
name = val.value;
}
else if (val.name =="address") {
address = val.value;
}
else if (val.name =="business") {
business = val.value;
}
else if (val.name =="province") {
province = val.value;
}
else if (val.name =="city") {
city = val.value;
}
else if (val.name =="area") {
area = val.value;
}
else if (val.name =="invitationCode") {
invitationCode = val.value;
}
else if (val.name =="zipcode") {
zipcode = val.value;
}
else if (val.name =="payProvider") {
payProvider = val.value;
}
})
// 表单提交标识
let flag =true;
if(payProvider==1){
$(".Popup").css({"display":"block"});
$(".button").click((event) => {
$(".pay-mode").hide();
event.stopPropagation();
event.preventDefault();
if(flag) {
flag =false;
stripe.createToken(card).then((result) => {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
}
else {
let token = result.token.id;
setTimeout(()=>{
flag =true;
}, 3000);
App.ajaxWait({
url:"<?=\Illuminate\Support\Facades\URL::to('app/stripe/paidGift')?>",
type:"POST",
data: {
'parentNo': parentNo,
'type': type,
'giftId': giftId,
'phone': phone,
'authcode': authcode,
'name': name,
'address': address,
'business': business,
'province': province,
'city': city,
'area': area,
'invitationCode': invitationCode,
'zipcode': zipcode,
'payProvider': payProvider,
'currency':"sgd",
'amount':"398",
'pay_type':2,
'source': token
},
success:function (res) {
App.alert('支付成功！优品质、享购物、趣赚钱，即刻下载app吧！', function () {
window.location.href ='/app/download';
});
flag =true;
// if (!res.data) {
//
// }
// else {
// App.alert(res && res.err_desc ? res.err_desc : '支付失败');
// }
}
})
}
});
}
})
}
else if(payProvider==2){
App.ajaxWait({
url:"xxxxxxxxx/app/stripe/createWebOrd",
type:"POST",
data: {
'parentNo': parentNo,
'type': type,
'giftId': giftId,
'phone': phone,
'authcode': authcode,
'name': name,
'address': address,
'business': business,
'province': province,
'city': city,
'area': area,
'invitationCode': invitationCode,
'zipcode': zipcode,
'payProvider': payProvider,
'currency':"sgd",
'amount':"398",
'pay_type':2
},
success:function (res) {
if (res.order_id) {
function alipay(amount) {
stripe.createSource({
type:'alipay',
amount:parseInt(amount),
currency:'sgd', // usd, eur, ***
redirect: {
return_url: res['return_url']
},
metadata: {
'order_sn':res['trade_no'],
'order_id':res['order_id'],
'amount':amount,
'business':res['business'],
// 'ordered_at':res['created_at']
},
}).then(function (response) {
if (response.error) {
alert(response.error.message);
}
else {
console.log(response);
processStripeResponse(response.source);
}
});
}
function processStripeResponse(source) {
window.location.href = source.redirect.url;
}
alipay(res['amount']);
}
else {
App.alert(res && res.err_desc ? res.err_desc :'支付失败');
}
}
})
}
});
$(".confirm").click(function (e) {
e.preventDefault();
showPay();
});
$(".mark").click(function (e) {
e.preventDefault();
hidePay();
});
$(".no_icon").click((e)=>{
e.preventDefault();
hidePay();
});
function showPay() {
// $(".pay-mode").hide();
$(".pay-mode").show();
$(".mark").show();
}
function hidePay() {
$(".pay-mode").hide();
$(".mark").hide();
$(".Popup").css({'display':'none'});
}
