杉德云支付和paypal支付流程基本一致，这篇文章我写的是paypal支付
杉德云支付与paypal支付区别是：
- 加一个杉德云钱包页面
- 调起支付跳转到第三方页面，用户确认支付后，此时我们后端已经完成扣费。而paypal需要还没有，需要再调一个扣费接口
paypal支付流程
step1|✨获取paypal支付链接并跳转
/pages/balance/balanceRechage/balanceRechage 页面
onLoad(options) {
// 保存this.options原因是：导航栏返回操作 = this.options.paypal ? [跳转到首页] ： [返回上一级]
this.options = options;
if(options.paypal) {// paypal支付
// options.paypal = 'next' | 'back' (第三方页面点击确认支付 | 返回)
options.paypal == 'next' && this.payPay(options);// 执行扣费
}
},
methods: {
invokePaypal() {
let { data } = await PayCenterApi.executePayment({
...this.formData,
paymentPrice: parseFloat(this.formData.paymentPrice),
// #ifdef H5
paypalReturnUrl: `${window.location.origin}/#/pages/balance/balanceRechage/balanceRechage?paypal=next`,
paypalCancelUrl: `${window.location.origin}/#/pages/balance/balanceRechage/balanceRechage?paypal=back`
// #endif
// #ifdef APP-PLUS
paypalReturnUrl: `${urlPrefix}/middle_html/app.html?paypal=next`,
paypalCancelUrl: `${urlPrefix}/middle_html/app.html?paypal=back`
// #endif
})
this.$refs.dyToast.hide()
// #ifdef H5 || MP-WEIXIN
// h5直接跳转
window.location.href = data.href;
// #endif
// #ifdef APP-PLUS
// 保存paypal支付地址，跳转到内置webview页面展示
uni.setStorageSync("zjcy_payUrl", data.href);
uni.redirectTo({
url:'/pages/balance/payWebview/payWebview'
})
// #endif
}
}
/pages/balance/payWebview/payWebview 页面
<template>
<view style="padding: 0 20rpx;">
<!-- paypal支付 || app端杉德支付 -->
<view class="header-top-bg">
<u-navbar @leftClick="leftClick" placeholder title="支付" bgColor="#0a0b20"></u-navbar>
</view>
<view class="content">
<web-view class="webb" :src="url"></web-view>
</view>
</view>
</template>
<script>
export default {
name: 'payWebview',
data() {
return {
url: ''
}
},
async onReady(){
// #ifdef APP-PLUS
let screenHeight = 0
uni.getSystemInfo({
success: function (res) {
screenHeight = res.screenHeight
}
})
var currentWebview = this.$scope.$getAppWebview();
const query = uni.createSelectorQuery().in(this);
let topHeight = 0;
query.select('.header-top-bg').boundingClientRect(data => {
topHeight = data.height; // 头部元素高度
}).exec();
//如果是页面初始化调用时，需要延时一下
setTimeout(function() {
let wv = currentWebview.children()[0];
wv.setStyle({top:topHeight,height: screenHeight-topHeight})
}, 1000);
// #endif
},
onLoad(options) {
let payUrl = uni.getStorageSync('zjcy_payUrl')
this.url = payUrl
uni.setStorageSync('zjcy_payUrl', '')
},
methods: {
leftClick(){
uni.navigateBack({
delta: 1
});
},
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: calc(100vh - var(--status-bar-height) - 45px - 45px - 3px);
}
.webb {
margin-top: calc(var(--status-bar-height) + 45px);
}
</style>
step2|✨app支付成功回调页面
app.html: 作为一个网页，放到线上服务器，注意需要与传递给后端回调地址保持一致
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>app支付成功回调页面-中转站</title>
</head>
<body>
<!-- uni 的 SDK -->
<!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
<script type="text/javascript" src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js"></script>
<script type="text/javascript">
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
/**引入uni.webview.1.5.4.js后，就支持uni各种路由跳转，使得该H5页面能控制uniapp App页面跳转*/
let queryString = location.search.substring(1);
let queryObj = Object.fromEntries(new URLSearchParams(queryString));
uni.redirectTo({
url: `/pages/balance/balanceRechage/balanceRechage?paypal=${queryObj.paypal}`
});
});
</script>
</body>
</html>
以上就是paypal支付的全部流程了。
我的项目paypal支付是用来充值的，相当于订单类型只有一种。若你是多个订单类型，这时候注意处理回调页面，传给后端接口回调地址会多传一个订单类型，在回调页面判断订单类型跳转对应支付成功页面
