uni-app calls WeChat payment and Alipay payment

This article explains how uniapp uses third-party services, WeChat and Alipay payments

The payment function api method uni.requestPayment in uniapp
uni.requestPayment is a client payment API that unifies all platforms. Whether in a certain applet or in an app, the client uses this API to call payment.

The main difficulty in implementing this function lies in the back-end, while the front-end is relatively simple. Let’s see how the front-end implements it. If
needed, you can just copy and paste and change the data.

//在需要用到发方法里调用这个api,provider是服务类型，可由uni.getProvider获取。orderInfo则是后端返回的数据
//1.調用后端的下单接口,获取到支付所[必要]的参数:
Pay(this.form).then(res => {
    
    
	console.log( '套餐购买'，res)
	if (res.code === 200 )
	let paymentData = res.data.Parameters
	//調用[uni-app]的支付功能-客戸端会唤起支付
	
	//微信支付数据类型
	paymentData:{
    
    //支付宝订单数据 后台返回的数据  
		timeStamp: paymentData.timeStamp,
		nonceStr: paymentData.nonceStr,
		package: paymentData.package,
		signType: paymentData.signType ,
		paysign: paymentData.paysign,
	},
	//支付宝支付数据类型
	paymentData="alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=2021002105670765&biz_content=%7B%22body%22%3A%22%E4%B8%98%E6%AF%94%E7%89%B9%E5%95%86%E5%9F%8E%E8%B4%AD%E7%89%A9%E6%94%AF%E4%BB%98%22%2C%22out_trade_no%22%3A%2285717089645522944%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%2C%22subject%22%3A%22%E4%B8%98%E6%AF%94%E7%89%B9%E5%95%86%E5%9F%8E%E8%B4%AD%E7%89%A9%E6%94%AF%E4%BB%98%22%2C%22total_amount%22%3A%220%22%7D&charset=utf-8&format=json&method=alipay.trade.app.pay&notify_url=https%3A%2F%2Fqiubite.cbitlove.cn%2FcupidApp%2Forder%2Fapi%2Fpayback%2FaliPayCallback&sign=TLE2kXEjreiMXgdu42NH640RsrTd%2FmhAqMu%2BWrlsJurMZP3bR6jPH5OtgvfRQCg2cdmudnjnAk%2FadAWNSE9H7hC0eOF2azja42vQ1RgoQkWM0x%2BBZY0JueztyJfaefg%2FRLl0gSjXuVydcKmHGKLAQ3TdxYcVTbbQm0x0bYrjz7m3egyKqADyhyPa2q0fCtUYo5GkOc0w3mEuLgHMQq3rS1lm3KJhgnmjv72sOaJy852gbMIktUhOmfzv1y01SzchIp81Nl%2BWf64GVJzD8UQZELMonoVJ1LCW97uaJa2lvdjMCO6Q5fU34UV8LVHtY87LMIJIoO1gi0d9oFJapoRYhQ%3D%3D&sign_type=RSA2&timestamp=2021-02-08+10%3A03%3A41&version=1.0"
	uni.requestPayment({
    
    
		provider: 'alipay',//wxpay微信 alipay支付宝
		orderInfo: paymentData, //订单数据 后台返回的数据  
		success: function(res) {
    
    
			uni.showToast({
    
    title: '支付成功'})
		},
		// 参数有问题则抛出错误
		fail: function(err) {
    
    
			uni.showToast({
    
    title: '支付失败'})
		},
	})
}	

The commonly used values ​​​​of provider are as follows. For detailed information, you can check the official website https://uniapp.dcloud.io/api/plugins/provider

. One last thing to mention: orderinfo is completely returned by the backend, and the frontend does not do any processing. If during the development process When payment errors, exceptions, etc. occur, there is a problem with the data orderinfo returned by the backend. It is pushed to the backend, so the frontend does not waste time.
If you have any questions or additions, please leave a message in the comment area, thank you all