轻松接入：Stripe与支付宝支付（适用于前端开发）

最编程 2024-07-27 09:13:46

...

2、前端代码：

use \Illuminate\Support\Facades\Input;

?><!DOCTYPE html>

<title>VIP会员

#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;

}

<div class="header-title">邀请注册

<div>1.选择礼包

<div>2.收货信息

<div class="on">3.立即支付

<button type="button" class="name">邀请人&emsp;

$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"'?>>

<button type="button" class="name">邀请码&emsp;

<?php echo $inviteCode?$inviteCode->code:''; ?>

<button type="button" class="name">联系人&emsp;

<?php echo e(Input::get('name'))?>  <?php echo e(Input::get('phone'))?>

<button type="button" class="name">地&emsp;址&emsp;

新加坡

<?php echo e(Input::get('address'))?>

$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">

<?=e($gift->goods_name)?>

<span class="now">￥<?=$gift->price?>

<span class="old v-b">￥ <?=$gift->res_price?>

-->

<div class="ware-count">x1

共 1件商品

需支付<span class="price">S$<span id="pay_money"></span></span>元

<button type="button" class="confirm">立即支付

<span>支付方式

<img src="<?=Config::get('app.url')?>/ononononon.png" alt="">

<div class="i-alipay" style="background-image:url('<?=Config::get('app.url')?>/xinyongka.png')">

<span class="pay-name v-t">新加坡信用卡

<span class="pay-name v-t">支付宝支付

<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;">确认支付

<span>支付方式

<img src="<?=Config::get('app.url')?>/ononononon.png" alt="">

填写您的银行卡号确认付款

确认支付

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'});

}

上一篇：如何设置 Gerrit 用户配置

下一篇：实用技巧：以微信读书和Uber为例，剖析分享机制引导新用户注册的运营实操案例研究