uniApp在微信,h5,app三端支付的接入

安卓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) {
   },
 });