前端使用支付宝和微信进行移动支付

前端移动支付(微信、支付宝)

微信支付

微信移动端支付分为两种:在微信浏览器内支付、在其他浏览器支付;

微信浏览器内支付(JSAPI):

在开始使用微信支付之前需要明确一个变量 trade_type ,这个变量有三个值:
NATIVE:扫码支付使用;
JSAPI:微信内置浏览器唤起微信支付使用;
MWEB:非微信浏览器且非支付宝内置浏览器唤起微信支付使用;

然后判断当前浏览器是不是微信浏览器(在支付宝内不能唤起微信支付),具体判断逻辑如下:

isWechat = () => {
  const userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.match(/MicroMessenger/i) == 'micromessenger') {
    return true;
  }
  return false;
};

确定是微信浏览器后可以使用如下JSAPI的方式调用统一预支付接口进行唤起:

wechatMobilePay = data => {
    WeixinJSBridge.invoke(
      'getBrandWCPayRequest',
      {
        appId: data.appid, // 公众号名称,由商户传入
        timeStamp: data.timestamp, // 时间戳,自1970年以来的秒数
        nonceStr: data.nonce_str, // 随机串
        package: `prepay_id=${data.prepay_id}`,
        signType: 'MD5', // 微信签名方式:
        paySign: data.sign, // 微信签名
      },
      function(res) {
        if (res.err_msg == 'get_brand_wcpay_request:ok') {
          // 使用以上方式判断前端返回,微信团队郑重提示:
          // res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
          // TODO add query after payed
        }
      }
    );
  };
  
if (typeof WeixinJSBridge === 'undefined') {
                if (document.addEventListener) {
                  document.addEventListener(
                    'WeixinJSBridgeReady',
                    this.wechatMobilePay(res),
                    false
                  );
                } else if (document.attachEvent) {
                  document.attachEvent('WeixinJSBridgeReady', this.wechatMobilePay(res));
                  document.attachEvent('onWeixinJSBridgeReady', this.wechatMobilePay(res));
                }
              } else {
                this.wechatMobilePay(res);
              }

参考官方文档: 微信内H5调起支付
*: 此时调用预支付接口的 trade_type 应该是JSAPI,如果使用NATIVE会出现 支付场景非法 的错误信息,且无法唤起微信支付;

非微信浏览器支付(H5支付):

首先确保此浏览器非支付宝内置浏览器,此时需要调用统一下单接口,借助于后端发起下单请求,需要注意的是 trade_type 应该是MWEB;
同时需要配置一个名为 mweb_url 的url,以唤起微信支付中间页,中间页将进行H5权限校验和安全检查;

参考官方文档:H5支付

支付宝支付

支付宝支付必须在非微信浏览器内进行,随后需要调用API 手机网站支付接口 alipay.trade.wap.pay,前端通过Form表单的形式进行请求,如果手机安装有支付宝会自动唤起,如果手机未安装支付宝需要进行友好交互提示。

网站支付时需要执行接口返回的部分代码:

const divForm = document.getElementsByTagName('divform');
        if (divForm.length) {
          document.body.removeChild(divForm[0]);
        }
        const div = document.createElement('divform');
        div.innerHTML = res; // res里的data就是接口返回的form 表单字符串
        document.body.appendChild(div);
        document.forms[0].setAttribute('target', ''); // 新开窗口跳转
        document.forms[0].submit();

*:注意区分后台下单时接口的不同,PC端使用 alipay.trade.page.pay ,移动端使用 alipay.trade.wap.pay

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值