支付方式收录

支付功能是一个很常用且很重要的功能。可以用于支付的支付平台也有很多，比较常见的有微信支付、支付宝支付以及各大银行的支付方式。

本篇文章仅说明微信支付和支付宝支付在前端方面需要做的一些常见的工作。在支付功能的实现过程中，前端需要做的工作比后端来说要少一些。支付功能的具体业务实现的重点在后端，前端需要做的就是把后端处理后的数据通过各大支付平台的api发送请求即可。

本文所介绍的支付功能都需要在对应的支付开放平台申请之后才能使用具体请看对应的平台的说明。

微信支付

微信支付中比较常见的就是在小程序和微信公众号以及引入了微信支付的一般网页应用。
微信支付详情请看微信支付平台

微信小程序支付

微信小程序支付中前端的流程如下：

1. 前端先调用后端的接口得到支付数据
2. 前端得到数据后，通过微信小程序提供的支付api发送请求即可。

wx.requestPayment({
nonceStr, //随机字符串
			package, // prepay_id= 统一下单接口返回的prepay_id
			paySign, // MD5签名 appid、timeStamp、nonceStr、package
			signType, // 签名算法
			timeStamp, // 时间戳
});

微信公众号网页支付

微信公众号网页支付中前端的流程如下：

1. 前端先调用后端的接口得到支付数据
2. 前端得到数据后，通过调用微信提供的支付接口即可

微信公众号网页的支付方式有两种

1. jssdk
   使用jssdk需要在项目中引入jssdk才能使用，在支付时调用chooseWeiXinPay()

   jWeiXin.choosePay({
   // 请求参数
   });
   

2. 使用微信浏览器自带的接口
   在微信浏览器中可以通过WXJSBridge对象调用支付接口

   WXJSBridge.invoke('getBrandWCPayRequest',{
   // 请求参数 
   });
   

非微信客户端的微信支付

在非微信浏览器中如果需要使用微信支付，需要现在微信支付开放平台申请权限，并配置相关商户信息，然后才能使用。
这种支付方式前端需要做的工作很少，只需要调用后端的接口即可，后端的接口会返回一个url前端只需要重定向页面到返回的url即可。

支付宝支付

支付宝支付主要为支付宝小程序支付和支付宝生活号网页支付。支付宝支付详情请看支付宝开放平台

支付宝生活号网页支付

支付宝生活号网页支付的前端流程：

1. 前端先调用后端的接口，得到后端返回的formData
2. 前端使用js模拟表单提交，把formData提交到指定的支付宝url上，这个url也是后端返回

const form = document.createElement('form');
		const html = '';
		Obbject.keys(payInfo).forEach(item => {
			html = html + `${item}" value="${payInfo[item]}" />`;
		});
		form.innerHTML = html;
		form.setAttribute('action', '后端返回的url');
		form.submit();

支付宝小程序支付

支付宝小程序支付的前端流程：

1. 前端调用后端接口，得到支付的数据
2. 前端调用支付宝小程序提供的支付接口即可，在调用支付接口之前需要调用授权接口

my.getAuthCode({
scoped:'auth_base',
success:(res)=>{
my.tradePay({
tradeNO:'后端返回的数据'
});
},
fail:()=>{}

});