小程序之云开发支付实现

小程序之云开发支付实现

官网地址:小程序之支付
在这里插入图片描述

支付配置信息

1、小程序的appid
2、微信商户号
3、商品密钥(注意企业级才可以做小程序)

支付步骤

1、发起订单,获取订单号 makeOrder()
2、预支付,获取支付的5个参数 pay()
3、发送支付 wx.requestPayment()
4、更新支付状态 ,未支付改为已支付 updateStatus()

 // 支付
  payMoney(){
    // 1、发起订单 => 获取订单号
    wx.cloud.callFunction({
      name:'makeOrder',
      // 支付对应的购物车商品数据
      data:{
        // 把对应订单数据传进去
        carts:this.data.carts
      }
    })
    // 2、预支付 => 获取支付需要的5个参数
    wx.cloud.callFunction({
      name:'pay',
      data:{
        // 当前订单号
        order_number
      }
    })
    // 3、发起支付 5个参数
    wx.requestPayment({
      nonceStr: 'nonceStr',
      package: 'package',
      signType:'sinType',
      paySign: 'paySign',
      timeStamp: 'timeStamp',
    })
    // 4、更新支付状态 => 已支付
    wx.cloud.callFunction({
      name:'updateStatus',
      data:{
        // 当前订单号
        order_number
      }
    })
  },

发起订单

1、创建云函数 makeOrder(
2、创建集合 orders
3、调用 makeOrder

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 数据库 注意这里要绑定 env 才行
const db = cloud.database({
  env:'mini-app-5gy03md80c1d80cc'
})
const orders_col = db.collection('orders')

// 云函数入口函数
exports.main = async (event, context) => {
  // 1、创建一个随机订单号,组成一个对象
  let obj = {
    order_number:Date.now(), // 时间戳 保证不一样
    carts:event.carts,
    status:0  // 0-未支付 1-已支付
  }
  // 2、添加到orders集合中
  let res = await orders_col.add({
    data:obj
  })
  // 注意返回 res 和 订单号
  return  {
    res,
    order_number:obj.order_number
  }
}

1、发起订单 => 获取订单号

 	// 1、发起订单 => 获取订单号
    let res1 =  await wx.cloud.callFunction({
      name:'makeOrder',
      // 支付对应的购物车商品数据
      data:{
        // 把对应订单数据传进去
        carts:this.data.carts
      }
    })
    console.log('发送订单=',res1);

在这里插入图片描述

在这里插入图片描述
微信npm 包 tenpay
在这里插入图片描述
新建pay 云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
// 1、引入 tenpay
const tenpay = require('tenpay');
// 2、配置 里面的内容对应修改
const config = {
  appid: '公众号ID',  // 例如 wx3594fxxxe260cxxxea
  mchid: '微信商户号', // 例如 150088080308
  partnerKey: '微信支付安全密钥', 
  // pfx: require('fs').readFileSync('证书文件路径'),
  notify_url: '支付回调网址', //例如 http://xxx.xx.xx/orders/notifiy
  spbill_create_ip: 'IP地址' //例如 127.0.0.1
};

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
 
  // 3、初始化
  const api = tenpay.init(config);
  // 4、获取支付参数
  let result = await api.getPayParams({
    // out_trade_no: '商户内部订单号',
    out_trade_no: event.order_num + '',
    body: '这是一次支付',
    total_fee: 1,
    // openid: '付款用户的openid'
    openid:  wxContext.OPENID
  });
  return result
}

2、预支付 => 获取支付需要的5个参数

 	// 2、预支付 => 获取支付需要的5个参数
    let res2 = wx.cloud.callFunction({
      name:'pay',
      data:{
        // 当前订单号
        order_number
      }
    })
    console.log('预支付',res2);

在这里插入图片描述
封装发起支付函数

/**
 * 发起支付
 * 
*/
export const ml_payment = (pay) =>{
  return new Promise((resolve,reject) =>{
    wx.requestPayment({
      // nonceStr: '',
      // package: '',
      // paySign: '',
      // timeStamp: '',
      // signType:'',
      // 这里用 ... 把pay展开
      ...pay,
      success:resolve,
      fail:reject
    })
  })
}

在这里插入图片描述
3、发起支付 5个参数

	import {ml_payment} from '../../utils/asyncWX'

    // 3、发起支付 5个参数
    // wx.requestPayment({
    //   nonceStr: 'nonceStr',
    //   package: 'package',
    //   signType:'sinType',
    //   paySign: 'paySign',
    //   timeStamp: 'timeStamp',
    // })
    // 用封装的实现支付 把res2生成的5个参数传入进去
    await ml_payment(res2.result)

在这里插入图片描述
4、更新支付状态 => 已支付

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

const db  = cloud.database({
  env:'mini-app-5gy03md80c1d80cc'
})
const orders_col = db.collection('orders')

// 云函数入口函数
exports.main = async (event, context) => {
  // 更新状态 status ,注意这里的where是为了更新哪个订单
  let res = await orders_col.where({
    order_number:event.order_number
  }).update({
    data:{
      status:1
    }
  })  
  return res
}
 	// 4、更新支付状态 => 已支付
    let res4 = await wx.cloud.callFunction({
      name:'updateStatus',
      data:{
        // 当前订单号
        order_number
      }
    })
    console.log('更新状态',res4);

5、清空购物车(清空carts里面的数据)

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 数据库
const db = cloud.database({
  env:'mini-app-5gy03md80c1d80cc'
})
const carts_col = db.collection('carts')

// 云函数入口函数
exports.main = async (event, context) => {
  // 清空购物车
  let res = await carts_col.where({
    selected:true
  }).remove()  
  return res
}
 	// 5、清空购物车
    let res5 = wx.cloud.callFunction({
      name:'clearCarts'
    })
    console.log("清空购物车",res5);
    this.setData({
      // 注意 购物车选中的才能删除 一般情况会有选中按钮
      carts:[],
      totalCount:0,
      totalPrice:0
    })

carts中最终的代码部分

// miniprogram/pages/cart/cart.js
const db = wx.cloud.database()
const carts_col = db.collection('cart')
import {ml_payment} from '../../utils/asyncWX'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    carts:[], // 购物车数据
    totalCount:0, // 总数量
    totalPrice:0, // 总价格
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.loadCartData()
  },
  async loadCartData(){
    let res = await carts_col.get()
    console.log(res);
    this.setData({
      carts:res.data
    })
    // 统计总价格和总数量
    this.setCart(res.data)

  },
  setCart(carts){
    let totalCount = 0
    let totalPrice = 0
    carts.forEach(v=>{
      totalCount += v.num
      totalPrice +=v.num*v.count
    })
    this.setData({
      totalCount:totalCount,
      totalPrice:totalPrice,
    })
  },
  // 点击加 1
  async addCount(e){
    // 1、获取id
    let id = e.currentTarget.dataset.id
    console.log(id);
    // 2、修改num
    let res = await carts_col.doc(id).update({
      data:{
        num:db.command.inc(1)
      }
    })
    // 3、+1成功后 再次重新刷新
    // this.loadCartData()
    // 3.1、+1 成功后,修改当前data里面的carts数据
    let newCart = this.data.carts
    console.log(newCart);
    let goods = newCart.find(v=>{
      return v._id == id
    })
    console.log(goods);
    goods.num +=1
    this.setData({
      carts: newCart
    })
    // 4、再次统计
    this.setCart(newCart)
  },

  // 点击减 1
  async subtractCount(e){
    // 1、获取id
    let id = e.currentTarget.dataset.id
    // 2、修改num -1
    let  res = await carts_col.doc(id).update({
      data:{
        num:db.command.inc(-1)
      }
    })
     // 3、-1成功后 再次重新刷新
    // this.loadCartData()
    // 3.1、-1成功后,修改当前data里面的carts数据
    let newCart = this.data.carts
    console.log(newCart);
    let goods = newCart.find(v=>{
      return v._id == id
    })
    console.log(goods);
    goods.num -=1
    // 判断为1时,数量不能少于1
    if(goods.num <= 1) goods.num = 1
    this.setData({
      carts: newCart
    })
    // 4、再次统计
    this.setCart(newCart)
  },
  /**
   * 点击 当前页面对应的tab 钩子函数
   * 
   * */ 
  onTabItemTap(){
    wx.setTabBarBadge({
      index: 1,
      text: '',
    })
  },
  // 支付
  async payMoney(){
    // 1、发起订单 => 获取订单号
    let res1 =  await wx.cloud.callFunction({
      name:'makeOrder',
      // 支付对应的购物车商品数据
      data:{
        // 把对应订单数据传进去
        carts:this.data.carts
      }
    })
    console.log('发送订单=',res1);

    // 2、预支付 => 获取支付需要的5个参数
    let res2 = wx.cloud.callFunction({
      name:'pay',
      data:{
        // 当前订单号
        order_number
      }
    })
    console.log('预支付',res2);

    // 3、发起支付 5个参数
    // wx.requestPayment({
    //   nonceStr: 'nonceStr',
    //   package: 'package',
    //   signType:'sinType',
    //   paySign: 'paySign',
    //   timeStamp: 'timeStamp',
    // })
    // 用封装的实现支付 把res2生成的5个参数传入进去
    await ml_payment(res2.result)

    // 4、更新支付状态 => 已支付
    let res4 = await wx.cloud.callFunction({
      name:'updateStatus',
      data:{
        // 当前订单号
        order_number
      }
    })
    console.log('更新状态',res4);

    // 5、清空购物车
    let res5 = wx.cloud.callFunction({
      name:'clearCarts'
    })
    console.log("清空购物车",res5);
    this.setData({
      // 注意 购物车选中的才能删除 一般情况会有选中按钮
      carts:[],
      totalCount:0,
      totalPrice:0
    })

    // 跳转到订单页面
    wx.navigateTo({
      url: '/pages/index/index',
    })
  },
})
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值