前端移动支付（微信、支付宝）

微信支付

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

微信浏览器内支付（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。

前端使用支付宝和微信进行移动支付相关推荐

银联支付java代码实现_[VIP源码]【S008】Java实现支付宝、微信、银联支付项目实例项目源码百度云网盘...
java源码项目名称:Java实现支付宝.微信.银联支付项目实例项目源码支付项目源码& X3 U' W# h0 z# K 百度网盘下载链接: ( y! x% n" V9 F9 s ...
ios 支付宝、微信、银联支付集成
一 .支付宝集成支付宝官方集成文档 1.下载支付宝官方demo,将AlipaySDK.bundle.AlipaySDK.framework两个框架导入到项目中,如下图: 2.选择工程中 Build ...
JAVA支付宝和微信（APP支付，提现，退款）
公共参数图表: 接口需要参数通知方式支付宝APP支付应用公钥,应用私钥异步支付宝APP提现应用公钥,应用私钥,支付宝公钥同步支付宝APP退款应用公钥,应用私钥,支付宝公钥同步微 ...
java对接支付宝微信银联_经典设计模式之策略模式【如何重构聚合支付平台，对接【支付宝，微信，银联支付】】(示例代码)...
写在前面:设计模式源于生活,而又高于生活! 为什么要使用设计模式重构代码使用设计模式可以重构整体架构代码.提高代码复用性.扩展性.减少代码冗余问题. Java高级工程师装逼的技能! 什么是策略模式 ...
支付宝、微信免接口支付方案
title: 支付宝.微信免签约接口支付方案 tags: 支付宝.微信背景相信很多开发者或者运营者,在为网站(博彩.棋牌 )即时到账充值发愁.还在为无法申请支付宝即时到账接口而担忧. 在这里我将为 ...
微擎支付返回商户单号_支付宝，微信，银联支付
https://open.unionpay.com/tjweb/index 银联支付统一支付接口接口描述用于线下刷卡交易.生物特征识别(例如人脸).被扫支付等后台交易. 对于被扫支付,收银员使用 ...
支付宝、微信(pc+h5)支付
//支付宝支付(pc端是一个二维码,移动端是唤起app进行支付) function aliipay(order) {let orderList = {orderId: order}; //订单号wai ...
web版收银系统，支持支付宝，微信扫描枪支付，数字输入
Web版收银系统这是一款web版的系统,可以在PC,平板,手机等多平台使用,支持微信,支付宝扫码支付,对接小程序订单,界面简洁明了,而且支持键盘输入. 在线测试地址:https://admin.zj ...
支付宝和微信的发起支付/h5支付
//拿到后台返回的支付信息,调用onBridgeReady onBridgeReady: function (response) {this.initWeixinReady(response);},i ...

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