安卓APP和H5(支付宝支付)
接入的是支付宝的
网页支付,后端通过get或者post从支付宝获取不同的返回,get返回一个支付链接,前端直接跳转会拉起支付宝支付,post会返回一段支付表单,前端模拟表单提交会拉起支付宝支付
APP支付
实现思路:获取链接后通过webview跳转链接,在webview页面通过onShow调取接口查看是否完成了支付,完成后跳转指定页面
H5支付
实现思路:直接跳转页面,支付成功后会重定向到支付宝后台配置的地址,根据地址上的订单号调取接口查看是否完成支付,完成后跳转指定页面
安卓APP和H5(微信支付)
接入的是微信的
网页支付,后端返回一个支付链接,前端直接跳转会拉起微信支付
APP支付
实现思路:获取链接后通过动态生成webview,设置好网站来源,拉起微信支付,支付后会跳转回拉起支付页面
let web_url = res.data.h5_url; //后台返回的支付链接
let BaseUrl = 'https://⭐⭐⭐⭐⭐⭐⭐' //需要设置的网页来源,跟微信后台配置的域名须一致,不然就会提示 商家参数格式有误,请联系商家解决
// 创建一个webview
const webview = plus.webview.create("", BaseUrl);
// 判断是安卓还是ios
const platform = uni.getSystemInfoSync().platform;
switch (platform) {
case "android":
webview.loadURL(web_url, { Referer: BaseUrl });
break;
case "ios":
webview.loadURL(web_url, { Referer: BaseUrl + "://" });
break;
default:
break;
}
//可以在跳转支付页面后在原页面打开一个弹窗,等用户回来可以让用户选择是否支付完成,参照下图
H5支付
实现思路:同APP,不同的是h5可以直接打开后端返回的链接window.location.href = url
可能遇到的问题: 开发时打开后端返回的支付链接会提示商家参数格式有误,请联系商家解决
因为你的开发ip跟微信后台配置的域名不一致导致,可以参照
微信小程序(微信支付)
接入的是微信的
微信支付,后端通过JSAPI下单接口获取到发起支付的必要参数prepay_id,然后前端使用微信支付提供的小程序方法调起小程序支付(微信,uni微信)我这里用的是uni微信支付,前端调取支付的时候,注意:生成签名的时候timeStamp,nonceStr,package跟前端调取支付方法时候传的值要一致
签名可以后端生成,也能前端生成参考uniapp微信小程序支付前端生成签名并调起微信支付全部代码
uni.requestPayment({
provider: "wxpay",
timeStamp: '',//须跟生成签名时的值一致
nonceStr: '',//须跟生成签名时的值一致
package: '',//须跟生成签名时的值一致
signType: "MD5",
paySign: '',
success: function (res) {
//调取查询支付状态接口
},
fail: function (err) {
},
});