微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全、便捷、专业的在线支付服务。以“微信支付,不止支付”为核心理念,为个人用户创造了多种便民服务和应用场景。微信支付为各类企业以及小微商户提供专业的收款能力,运营能力,资金结算解决方案,以及安全保障。用户可以使用微信支付来购物、吃饭、旅游、就医、交水电费等。企业、商品、门店、用户已经通过微信连在了一起,让智慧生活,变成了现实。
小程序实现微信支付主要有两种方式:
统一下单接口地址: URL地址:https://api.mch.weixin.qq.com/pay/unifiedorder URL地址:https://api2.mch.weixin.qq.com/pay/unifiedorder
// miniprogram/pages/confirm-order/index.js
Page({
/**
* 页面的初始数据
*/
data: {
carts:[],
userMessage:'',
totalPrice:0,
address:{
userName:'选择'
},
submchPayParams: {},
submchPayorderResult:{},
prepareSubmchPay: false
},
/**
* 确认订单
*/
onSubmit(e){
wx.showActionSheet({
itemList: ['默认支付', '小微商户'],
success:(res)=> {
console.log(res.tapIndex)
let index = res.tapIndex
if (index == 0){// 默认支付
this.startNormalPay(e)
}
},
fail (res) {
console.log(res.errMsg)
}
})
},
// 发起支付
async startNormalPay(e) {
if (!this.data.address.id) {
wx.showModal({
title: '没有选择收货地址',
showCancel: false
})
return
}
let address = this.data.address
let addressDesc = `${address.userName},${address.telNumber},${address.region.join('')}${address.detailInfo}`
let carts = this.data.carts
let goodsCartsIds = carts.map(item => item.id)
let goodsNameDesc = carts.map(item => `${item.goods_name}(${item.sku_desc})x${item.num}`).join(',')
if (goodsNameDesc.length > 200) goodsNameDesc = goodsNameDesc.substr(0, 200) + ".."
let data = {
totalFee: this.data.totalPrice,
addressId: address.id,
addressDesc,
goodsCartsIds,
goodsNameDesc
}
let res = await wx.wxp.request4({
url: 'http://localhost:3000/user/my/order2',
method: 'post',
data
})
console.log(res);
let payArgs = res.data.data.params
wx.requestPayment({
timeStamp: payArgs.timeStamp,
nonceStr: payArgs.nonceStr,
package: payArgs.package,
signType: 'MD5',
paySign: payArgs.paySign,
success:async res1=> {
console.log('success', res1);
// requestPayment:ok
if (res1.errMsg == 'requestPayment:ok') {
// 微信支付成功
await wx.wxp.showModal({
title: '支付成功',
showCancel: false
})
this.removeCartsGoods(goodsCartsIds)
} else {
// {errMsg: "requestPayment:fail cancel"}
wx.showModal({
title: '支付取消或失败了,请稍后得试',
showCancel: false,
})
}
},
fail:(err1)=> {
console.log('fail', err1);
}
})
},
// 将已经下单的商品从购物车中移除
async removeCartsGoods(goodsCartsIds) {
let data = {
ids: goodsCartsIds
}
let res2 = await wx.wxp.request4({
url: 'http://localhost:3000/user/my/carts',
method: 'delete',
data
})
console.log('res2', res2);
if (res2.data.msg == 'ok') {
wx.switchTab({
url: '/pages/cart/index',
})
} else {
wx.showModal({
title: '更新购物车数据失败',
showCancel: false
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const eventChannel = this.getOpenerEventChannel()
eventChannel.on('cartData', (res)=> {
// console.log(res)
this.setData({
carts:res.data
})
this.calcTotalPrice()
})
},
// 准备跳转地址列表表,选取地址
toSelectAddress(){
wx.navigateTo({
url: '/pages/address-list/index',
success:res=>{
res.eventChannel.on('selectAddress', address=>{
address.addressInfo = address.region.join('')+address.detailInfo
this.setData({
address
})
})
}
})
},
// 重新计算总价
calcTotalPrice(){
let totalPrice = 0
let carts = this.data.carts
carts.forEach(item=>{
totalPrice += item.price * item.num
})
this.setData({
totalPrice
})
},
})
<van-cell-group>
<van-cell bind:click="toSelectAddress" is-link icon="location-o" size="large" title="{{address.userName}}" value="{{address.telNumber}}" label="{{address.addressInfo}}" />
</van-cell-group>
<view style="padding:10px;">
<block wx:for="{{carts}}" wx:key="id">
<van-card custom-class="goods-card" price="{{item.price*item.num/100}}元" desc="{{item.sku_desc}}"
title="{{item.goods_name}}" thumb="{{item.goods_image}}">
<view slot="footer">
<text>x{{item.num}}</text>
</view>
</van-card>
</block>
</view>
<van-cell-group title=" ">
<van-cell title="优惠" value="暂无可用" is-link />
</van-cell-group>
<van-cell-group title=" ">
<van-cell title="配置方式" value="快递免运费" />
<van-field model:value="{{ userMessage }}" label="买家留言" border="{{ false }}" placeholder="留言建议提前协商" />
</van-cell-group>
<van-cell-group title=" ">
<van-cell title="商品金额" value="¥900" />
<van-cell title="运费" value="+¥200" />
<van-cell custom-class="total-price" title="" value="合计:¥900" />
</van-cell-group>
<van-submit-bar
price="{{ totalPrice }}"
button-text="提交订单"
bind:submit="onSubmit"
/>
<!-- 小微商户支付 -->
<pay wx:if="{{ prepareSubmchPay }}" params="{{ submchPayParams }}" bindsuccess="bindPaySuccess" bindfail="bindPayFail" bindcomplete="bindPayComplete" />
{
"navigationBarTitleText": "确认订单",
"usingComponents": {
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index",
"van-checkbox": "@vant/weapp/checkbox/index",
"van-checkbox-group": "@vant/weapp/checkbox-group/index",
"van-card": "@vant/weapp/card/index",
"van-stepper": "@vant/weapp/stepper/index",
"van-field": "@vant/weapp/field/index",
"van-submit-bar": "@vant/weapp/submit-bar/index",
"pay": "../../components/pay/index"
}
}
/* miniprogram/pages/confirm-order/index.wxss */
.goods-card{
background-color: #fefefe !important;
}
.goods-card .van-card__title{
margin-top: 10px;
}
.goods-card .van-card__img {
border-radius: 10px;
}
.goods-card-container {
display:flex;margin:10px;background:#fefefe;
}
.goods-card-container + .goods-card-container{
padding-top: 10px;
}
.total-price .van-cell__value{
color: rgb(236, 176, 98);
}
page{
padding-bottom: 100px;
}
// componenets/xunhupay/xunhupay.js
Component({
/**
* 组件的属性列表
*/
properties: {
params: { // 支付订单参数
type: Object,
value: null
},
envVersion: {
type: String,
value: "release"
}
},
/**
* 组件的初始数据
*/
data: {
showPayModal: false,
paying: false
},
/**
* 组件的方法列表
*/
methods: {
setPaying(newPayingData) {
this.setData({
paying: newPayingData
})
this.triggerEvent('dataChange', { paying: newPayingData })
},
onTapCancel () {
// 用户点击了支付组件外的地方(灰色地方)
console.log(' 跳转到 xunhupay 小程序失败 - 用户点击了提醒窗体以外的地方')
this.triggerEvent('fail', { navigateSuccess: false })
this.triggerEvent('complete')
},
navigateSuccess () {
console.log(' 跳转到 xunhupay 小程序成功')
// 成功跳转:标记支付中状态
this.setPaying(true)
},
navigateFail (e) {
// 跳转失败
console.log(' 跳转到 xunhupay 小程序失败 - 失败回调', e)
this.triggerEvent('fail', { navigateSuccess: false, info: e })
this.triggerEvent('complete')
}
},
/**
* 组件生命周期
*/
lifetimes: {
// 组件显示时,自动触发小程序跳转
attached() {
this.setPaying(false)
if (!this.data.params) {
console.error(' 跳转到 xunhupay 小程序失败 - 错误:没有传递跳转参数', r)
this.triggerEvent('fail', { error: true, navigateSuccess: false })
this.triggerEvent('complete')
}
// 监听 app.onShow 事件
wx.onAppShow(appOptions => {
if (!this.data.paying) return;
// 恢复支付前状态
this.setPaying(false)
if (appOptions.scene === 1038 && appOptions.referrerInfo.appId === 'wx2574b5c5ee8da56b') {
// 来源于 xunhupay 小程序返回
console.log('确认来源于 xunhupay 回调返回', appOptions)
let extraData = appOptions.referrerInfo.extraData
// if (extraData.success) { 这个地方demo中有错误,字段已经更改了,但是代码没有更新
if (extraData.paySuccess) {
this.triggerEvent('success', { navigateSuccess: true, info: extraData })
this.triggerEvent('complete')
} else {
this.triggerEvent('fail', { navigateSuccess: true, info: extraData })
this.triggerEvent('complete')
}
}
})
// 尝试直接跳转到 xunhupay 发起小程序支付
wx.navigateToMiniProgram({
appId: 'wx2574b5c5ee8da56b',
path: 'pages/cashier/cashier',
extraData: this.data.params,
envVersion: this.data.envVersion,
success: r => {
console.log('跳转到 xunhupay 小程序成功', r)
// 成功跳转:标记支付中状态
this.setPaying(true)
},
fail: e => {
// 跳转失败:弹出提示组件引导用户跳转
console.log('跳转到 xunhupay 小程序失败 - 准备弹窗提醒跳转', e)
this.setData({
showPayModal: true
})
}
})
}
}
})
{
"component": true,
"usingComponents": {}
}
<view class="bg" catchtap="onTapCancel"></view>
<view wx:if="{{ showPayModal }}" class="modal">
<view class="content">支付需要跳转到第三方平台进行支付</view>
<navigator class="button" target="miniProgram" app-id="wx2574b5c5ee8da56b" path="pages/cashier/cashier" extra-data="{{ params }}" version="{{ envVersion }}" bindsuccess="navigateSuccess" bindfail="navigateFail">确认跳转</navigator>
</view>
.bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: black;
opacity: 0.5;
}
.button {
background: none;
}
.button::after {
border: none;
}
.modal {
position: fixed;
left: 10vw;
top: 30vh;
width: 80vw;
height: 20vh;
background-color: white;
border-radius: 5rpx;
text-align: center;
line-height: 10vh;
}
.modal .content {
height: 10vh;
color: #9d9d9d;
font-size: 28rpx;
}
.modal .button {
height: 10vh;
color: #3cc51f;
font-size: 36rpx;
}