Introducción al escenario empresarial
El terminal móvil H5 admite el pago de WeChat [el pago de WeChat se divide en pago interno de WeChat (API oficial de pago JSAPI) y pago externo de WeChat (API oficial de pago H5)] && Alipay
[Pago del sitio web móvil a la API oficial de pago de la aplicación]
Lógica de generación de pedidos: el front-end solicita al back-end que envíe el pedido y el back-end se conecta con WeChat o Alipay para generar el pedido (todos los pagos posteriores están conectados por esta lógica
1. pago de vue WeChat
El pago de WeChat se divide en el pago interno de WeChat y el proceso de pago externo de WeChat de la siguiente manera
- Después de seleccionar el método de pago en el componente de pedido, primero juzgue si está en WeChat en la página de pago
//判断是在微信内
is_weixn(){
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
} else {
return false;
}
},
-
Active el método de pago inmediato, solicite diferentes interfaces de back-end de acuerdo con diferentes WeChat internos y externos, si es un pago fuera de WeChat, es muy simple ~
-
[Pago fuera de WeChat] Primero veamos el pago fuera de WeChat. El documento oficial también es muy claro. El backend devuelve una dirección de URL. El trabajo de front-end es obtener esta dirección de URL y saltar a ella. Mire el 2 -Código de 3 pasos.:
handelPay() {
if
(this.wechatpayType == 'wxpay'){
// console.log("微信内支付")
let data={
amount:this.number,
}
this.$http.insideWeChatPay(data).then( res => {
if(res.data.code === 200){
this.weChatParameter=res.data.data
// console.log(this.weChatParameter,"微信内支付需要参数")
this.weixinPay()
}else{
Toast({
message: res.data.msg,
position: 'middle',
duration: 1000
});
}
});
} else if(this.wechatpayType == 'wxpay_php'){
// console.log("微信外支付")
let data={
amount:this.number,
}
this.$http.outsideWeChatPay(data).then( res => {
if(res.data.code === 200){
let url=res.data.data
window.location.replace(url) //这里是后端返回的URL直接进行跳转即可完成微信外支付
}else{
Toast({
message: res.data.msg,
position: 'middle',
duration: 1000
});
}
});
}
},
- En la página que llama al pago, escuche los eventos devueltos desde otras páginas e implemente una lógica comercial refrescante Hasta ahora, el pago fuera de WeChat se ha completado.
document.addEventListener("返回的事件", function() {
//需要的操作
});
- [Pagar dentro de WeChat] Pagar dentro de WeChat es un poco más complicado que fuera de WeChat, pero no es difícil. (La interfaz del método de pago se solicitó en el código de 3 pasos para obtener los parámetros requeridos para el pago interno de WeChat). API oficial
WeChat objeto js incorporado WeixinJSBridge, Para el desarrollo, hasta ahora, se ha completado el pago en el navegador WeChat
//解决微信内置对象报错
weixinPay(data){
var vm= this;
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
}
}else{
vm.onBridgeReady();
}
},
//微信内置浏览器类，weChatParameter对象中的参数是3.步骤代码中从后端获取的数据
onBridgeReady(){
var vm = this;
var timestamp=Math.round(vm.weChatParameter.timeStamp).toString();
WeixinJSBridge.invoke(
'getBrandWCPayRequest',{
debug:true,
"appId":vm.weChatParameter.appId, //公众号名称，由商户传入
"timeStamp":timestamp, //时间戳，自1970年以来的秒数
"nonceStr":vm.weChatParameter.nonceStr, //随机串
"package":vm.weChatParameter.package,
"signType":vm.weChatParameter.signType, //微信签名方式：
"paySign":vm.weChatParameter.paySign, //微信签名
jsApiList: [
'chooseWXPay'
]
},
function(res){
// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
if(res.err_msg == "get_brand_wcpay_request:ok" ){
Toast({
message: '支付成功',
position: 'middle',
duration: 3000
});
vm.number=null
vm.$router.go(-1)
//window.location.href = vm.BASE_URL + 'index.html#/depositResult'
}else{
Toast({
message: '支付失败',
position: 'middle',
duration: 3000
});
}
}
);
},
- El pago del navegador interno de WeChat también se puede encapsular, y se puede llamar directamente a nivel mundial:
//微信浏览器支付
function wxpay(params,callback){
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady(params,callback), false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady(params,callback));
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(params,callback));
}
}else{
onBridgeReady(params,callback);
}
}
function onBridgeReady(params,callback){
var that = this
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":params.appId,
"timeStamp":params.timeStamp,
"nonceStr":params.nonceStr,
"package":params.package,
"signType":params.signType,
"paySign":params.paySign
},
function(res){
callback(res)
}
);
}
- Llame al pago de WeChat en el componente:
this.commonUtils.wxpay(res.data.data,function(payResult){
if(payResult.err_msg == "get_brand_wcpay_request:ok" ){
//执行
}
})
2. Proceso de pago de Vue Alipay
De hecho, el pago de Alipay también tiene el pago H5 y el pago del navegador Alipay, aquí solo se realiza el pago H5.
- El pago H5 en Alipay es el mismo que en el lado de la PC. Es principalmente la carga de trabajo del back-end. Una vez que el back-end completa la generación del pedido, el formulario se devuelve al front-end. -end solo necesita ser responsable del salto de página:
//立即支付按钮
onSubmit() {
if (this.payWay == 1) {
//支付宝支付
this.$router.push({
path: '/aliPay', query: {
orderId: this.orderId}});
} else if (this.payWay == 2) {
//微信支付，这里跳转到本文的微信支付模块的3.步骤handelPay方法
}
},
- Después de elegir el método Alipay, ingrese a la página del portador de Alipay:
<template>
<div v-html="html"></div>
</template>
<script>
export default {
data(){
return{
html:''
}
},
methods:{
fetchVideoPay(){
let param={
orderId: this.$route.query.orderId
};
this.$api.orderpage.videoAliPay(param).then( res => {
this.html = res.data;
this.$nextTick(() => {
document.forms[0].submit() //渲染支付宝支付页面
})
})
}
},
mounted(){
this.fetchVideoPay()
}
}
</script>
Por supuesto, si no quieres escribir la página al portador, existen otras formas de transferir el pago, se analiza en detalle la lógica específica y la adaptación se basa en diferentes tipos de negocios.
const div = document.createElement('div');
div.innerHTML = (res.data); //res.data是返回的表单
document.body.appendChild(div);
document.forms.alipaysubmit.submit();
- Ingrese a la página de pago de Alipay para pagar