1. Lógica principal
1. Lo que podría necesitar pagar
-
Métodos de pago【WeChat】【Alipay】
-
cantidad pagada
-
título de la orden
-
número de orden
-
El período de validez de la orden
-
Paga para completar el enlace de salto
2. Pagar
2.1. Cuando hace clic en Comprar ahora, desea enviar una solicitud ajax al backend y el proceso completo de llevar información en la solicitud
ajax({
url:'xxxx', =====》前端给后端传递的数据
data:{
用户id,
****订单的金额
****订单的商品系类
},
success:function(){ ===》后端给前端返回的数据
if(data.xxx){
data是一个对象，通常含有订单号
然后跳转到确认订单页面
}
}
})2.2 Página de confirmación del pedido ===>Haga clic para enviar el pedido===>Seleccione el método de pago (la solicitud se enviará antes del pago)
2.2.1 Vuelva a verificar si la elección del usuario es consistente con el método devuelto por el backend
````
ajax({
data:{ ===>前端给后端传递数据
appid:'已经准备好的（通常是公司申请的id（用来收钱的）'
订单号
选择了那种支付方式
},
success:function(){
1.后端会返回true，代表可以支付了
2.还会返回一个标示（那种支付方式
if(后端给前端传递的哪种支付方式===用户点击的哪种支付方式){
//成立情况下，则开始发起支付的请求（这时候需要对接支付宝或微信支付官方了）
发起支付
}
}
})
````
2.2.2 Pago oficial de atraque
Pasar algunos de los datos obtenidos al oficial de pagos de Alipay|WeChat
Resumen 1 : cuando el usuario hace clic para comprar, la solicitud de pago no se invoca de inmediato, pero la solicitud se envía al backend y el backend devuelve el número de pedido. El significado de devolver el número de pedido es que cuando el usuario hace clic para enviar el pedido, el número de pedido se pasa al backend para conocer el estado del pedido y, al mismo tiempo, se notifica al backend el método de pago seleccionado por el usuario, y finalmente el backend realiza la verificación de devolución. Finalmente, envíe la solicitud de pago de acuerdo con los datos devueltos por el backend (oficial de acoplamiento); esta solicitud de pago generalmente está empaquetada, solo necesita pasar algunos datos
Después de que el front-end obtiene el número de pedido, envía una solicitud al back-end.
3. Uso en uni-aplicación:
Todo lo que el front-end tiene que hacer es:
- Solicite la interfaz de backend y obtenga la información del pedido (información del pedido).De acuerdo con la información oficial del nuevo pedido, esta información del pedido es una cadena empalmada directamente por el backend, y el frontend no necesita otras operaciones
- API de pago de llamadas: uni.requestPayMent
- manejar devolución de llamada
Presta atención al problema:
- El backend devuelve el formato del pedido, y el frontend no necesita realizar ningún procesamiento. No importa qué tipo de pago, la información del pedido es el hábito de la clase strng
- El ID de pago de WeChat en mainfest.json en uni-app debe agregarse al ID de aplicación aplicado para el pago de la aplicación móvil en la plataforma de desarrollo de WeChat, ya que se pueden encontrar varios ID de aplicación y, por este motivo, tomó mucho tiempo.
- Al solicitar el pago móvil en la plataforma abierta, usted mismo puede elegir el nombre del paquete de la aplicación y la firma de la aplicación debe generarse de acuerdo con las instrucciones de WeChat o un certificado generado en línea (el certificado puede ser una firma generada por md5) , todo en minúsculas sin dos puntos: este paso es similar a llamar a la configuración en el mapa de Gaode
- El único número de orden comercial es para todo el proyecto, puede haber múltiples registros de transacciones y el número de orden no se puede repetir
//微信orderinfo格式
"{\"appid\":\"xxxxxxxx\",\"partnerid\":\"xxxxxxx\",\"prepayid\":\"xxxxxxxxxxxxxxxx\",\"timestamp\":\"1579779903\",\"noncestr\":\"xxxxxxx\",\"package\":\"Sign": "WXPay\",\"sign\":\"xxxxxxxxxxxxxxxxxxxx\"}"
//支付宝orderinfo格式
app_id=xxxxxxxxx&method=xxxxxxxxxx&format=JSON&charset=UTF-8&sign_type=RSA2&version=1.0&return_url=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx¬ify_url=xxxxx×tamp=xxxxxx&sign=xxxxxxx&biz_content=xxxxxxxxxxCódigo principal:
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view style="background:#FFF; padding:50upx 0;">
<view class="uni-hello-text uni-center">支付金额</text></view>
<view class="uni-h1 uni-center uni-common-mt">
<text class="rmbLogo">￥</text>
<input class="price" type="digit" :value="price" maxlength="4" @input="priceChange" />
</view>
</view>
<view class="uni-btn-v uni-common-mt">
<!-- #ifdef APP-PLUS -->
<template v-if="providerList.length > 0">
<button v-for="(item,index) in providerList" :key="index" @click="requestPayment(item,index)"
:loading="item.loading">{
{item.name}}支付</button>
</template>
<!-- #endif -->
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'request-payment',
loading: false,
price: 1,
providerList: []
}
},
onLoad: function() {
// #ifdef APP-PLUS
uni.getProvider({
service: "payment",
success: (e) => {
console.log("payment success:" + JSON.stringify(e));
let providerList = [];
e.provider.map((value) => {
switch (value) {
case 'alipay':
providerList.push({
name: '支付宝',
id: value,
loading: false
});
break;
case 'wxpay':
providerList.push({
name: '微信',
id: value,
loading: false
});
break;
default:
break;
}
})
this.providerList = providerList;
},
fail: (e) => {
console.log("获取支付通道失败：", e);
}
});
// #endif
},
methods: {
async requestPayment(e, index) {
this.providerList[index].loading = true;
let orderInfo = await this.getOrderInfo(e.id);
console.log("得到订单信息", orderInfo);
if (orderInfo.statusCode !== 200) {
console.log("获得订单信息失败", orderInfo);
uni.showModal({
content: "获得订单信息失败",
showCancel: false
})
return;
}
uni.requestPayment({
provider: e.id,
orderInfo: orderInfo.data.data,
success: (e) => {
console.log("success", e);
uni.showToast({
title: "感谢您的赞助!"
})
},
fail: (e) => {
console.log("fail", e);
uni.showModal({
content: "支付失败,原因为: " + e.errMsg,
showCancel: false
})
},
complete: () => {
this.providerList[index].loading = false;
}
})
},
getOrderInfo(e) {
let appid = "";
// #ifdef APP-PLUS
appid = plus.runtime.appid;
// #endif
let url = 'http://10.10.60.200:8070/sc-admin/sales/wx/prepay/?brokerId=shba01';
return new Promise((res) => {
uni.request({
url: url,
success: (result) => {
res(result);
},
fail: (e) => {
res(e);
}
})
})
},
priceChange(e) {
console.log(e.detail.value)
this.price = e.detail.value;
}
}
}
</script>
<style>
.rmbLogo {
font-size: 40upx;
}
button {
background-color: #007aff;
color: #ffffff;
}
.uni-h1.uni-center {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
}
.price {
border-bottom: 1px solid #eee;
width: 200upx;
height: 80upx;
padding-bottom: 4upx;
}
.ipaPayBtn {
margin-top: 30upx;
}
</style>
Una versión concisa del código de comprensión:
uni.requestPayment({
provider: 'alipay',
orderInfo: '后端返回的orderinfo字符串',
success: res => {
// 进入此回调说明支付成功
},
fail: err => {
const message = err.errMsg || '';
if (message.indexOf('[payment支付宝:62001]') !== -1) {
uni.showModal({
content: '您已取消支付。如有需要，您可在我的订单里重新付款。30分钟内有效。',
showCancel: false
});
} else {
uni.showModal({
content: '支付失败,原因为: ' + message,
showCancel: false
});
}
},
complete: () => {
this.submitting = false;
}
});