评论

借助小程序云开发实现小程序支付功能(含源码)

借助小程序云开发实现小程序支付功能,微信支付回调(含源码)

我们在做小程序支付相关的开发时,总会遇到这些难题。小程序调用微信支付时,必须要有自己的服务器,有自己的备案域名,有自己的后台开发。这就导致我们做小程序支付时的成本很大。本节就来教大家如何使用小程序云开发实现小程序支付功能的开发。不用搭建自己的服务器,不用有自己的备案域名。只需要简简单单的使用小程序云开发。

老规矩先看效果图:

本节知识点

1,云开发的部署和使用
2,支付相关的云函数开发
3,商品列表
4,订单列表
5,微信支付与支付成功回调

支付成功给用户发送推送消息的功能会在后面讲解。

下面就来教大家如何借助云开发使用小程序支付功能。

支付所需要用到的配置信息

1,小程序appid
2,云开发环境id
3,微信商户号
4,商户密匙

一,准备工作

1,已经申请小程序,获取小程序 AppID 和 Secret 在小程序管理后台中,【设置】 →【开发设置】 下可以获取微信小程序 AppID 和 Secret。

2,微信支付商户号,获取商户号和商户密钥在微信支付商户管理平台中,【账户中心】→【商户信息】 下可以获取微信支付商户号。

在【账户中心】 ‒> 【API安全】 下可以设置商户密钥。

这里特殊说明下,个人小程序是没有办法使用微信支付的。所以如果想使用微信支付功能,必须是非个人账号(当然个人可以办个体户工商执照来注册非个人小程序账号)

3,微信开发者 IDE https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
4,开通小程序云开发功能:https://edu.csdn.net/course/play/9604/204526

二,商品列表的实现

效果图如下,由于本节重点是支付的实现,所以这里只简单贴出关键代码。

wxml布局如下:

<view class="container">
  <view class="good-item" wx:for="{{goods}}" wx:key="*this" ontap="getDetail" data-goodid="{{item._id}}">
    <view class="good-image">
      <image src="{{pic}}"></image>
    </view>
    <view class="good-detail">
      <view class="title">商品: {{item.name}}</view>
      <view class="content">价格: {{item.price / 100}} 元 </view>
      <button
        class="button"
        type="primary"
        bindtap="makeOrder"
        data-goodid="{{item._id}}"
      >下单</button>
    </view>
  </view>
</view>

我们所需要做的就是借助云开发获取云数据库里的商品信息,然后展示到商品列表,关于云开发获取商品列表并展示本节不做讲解(感兴趣的同学可以翻看我的历史博客,有写过的)
也有视频讲解: https://edu.csdn.net/course/detail/9604

三,支付云函数的创建

首先看下我们支付云函数都包含那些内容

简单先讲解下每个的用处
config下的index.js是做支付配置用的,主要配置支付相关的账号信息
lib是用的第三方的支付库,这里不做讲解。
重点讲解的是云函数入口 index.js

下面就来教大家如何去配置

1,配置config下的index.js,
这一步所需要做的就是把小程序appid,云开发环境ID,商户id,商户密匙。填进去。

2,配置入口云函数

详细代码如下,代码里注释很清除了,这里不再做单独讲解:

const cloud = require('wx-server-sdk')
cloud.init()

const app = require('tcb-admin-node');
const pay = require('./lib/pay');
const {
 mpAppId,
 KEY
} = require('./config/index');
const {
 WXPayConstants,
 WXPayUtil
} = require('wx-js-utils');
const Res = require('./lib/res');
const ip = require('ip');

/**
 *
 * @param {obj} event
 * @param {string} event.type 功能类型
 * @param {} userInfo.openId 用户的openid
 */
exports.main = async function(event, context) {
 const {
  type,
  data,
  userInfo
 } = event;
 const wxContext = cloud.getWXContext()
 const openid = userInfo.openId;
 
 app.init();
 const db = app.database();
 const goodCollection = db.collection('goods');
 const orderCollection = db.collection('order');

 // 订单文档的status 0 未支付 1 已支付 2 已关闭
 switch (type) {
  // [在此处放置 unifiedorder 的相关代码]
  case 'unifiedorder':
   {
    // 查询该商品 ID 是否存在于数据库中,并将数据提取出来
    const goodId = data.goodId
    let goods = await goodCollection.doc(goodId).get();

    if (!goods.data.length) {
     return new Res({
      code: 1,
      message: '找不到商品'
     });
    }

    // 在云函数中提取数据,包括名称、价格才更合理安全,
    // 因为从端里传过来的商品数据都是不可靠的
    let good = goods.data[0];

    // 拼凑微信支付统一下单的参数
    const curTime = Date.now();
    const tradeNo = `${goodId}-${curTime}`;
    const body = good.name;
    const spbill_create_ip = ip.address() || '127.0.0.1';
    // 云函数暂不支付 http 触发器,因此这里回调 notify_url 可以先随便填。
    const notify_url = 'http://www.qq.com'; //'127.0.0.1';
    const total_fee = good.price;
    const time_stamp = '' + Math.ceil(Date.now() / 1000);
    const out_trade_no = `${tradeNo}`;
    const sign_type = WXPayConstants.SIGN_TYPE_MD5;

    let orderParam = {
     body,
     spbill_create_ip,
     notify_url,
     out_trade_no,
     total_fee,
     openid,
     trade_type: 'JSAPI',
     timeStamp: time_stamp,
    };

    // 调用 wx-js-utils 中的统一下单方法
    const {
     return_code,
     ...restData
    } = await pay.unifiedOrder(orderParam);

    let order_id = null;

    if (return_code === 'SUCCESS' && restData.result_code === 'SUCCESS') {
     const {
      prepay_id,
      nonce_str
     } = restData;

     // 微信小程序支付要单独进地签名,并返回给小程序端
     const sign = WXPayUtil.generateSignature({
      appId: mpAppId,
      nonceStr: nonce_str,
      package: `prepay_id=${prepay_id}`,
      signType: 'MD5',
      timeStamp: time_stamp
     }, KEY);

     let orderData = {
      out_trade_no,
      time_stamp,
      nonce_str,
      sign,
      sign_type,
      body,
      total_fee,
      prepay_id,
      sign,
      status: 0, // 订单文档的status 0 未支付 1 已支付 2 已关闭
      _openid: openid,
     };

     let order = await orderCollection.add(orderData);

     order_id = order.id;
    }

    return new Res({
     code: return_code === 'SUCCESS' ? 0 : 1,
     data: {
      out_trade_no,
      time_stamp,
      order_id,
      ...restData
     }
    });
   }
   // [在此处放置 payorder 的相关代码]
  case 'payorder':
   {
    // 从端里出来相关的订单相信
    const {
     out_trade_no,
     prepay_id,
     body,
     total_fee
    } = data;

    // 到微信支付侧查询是否存在该订单,并查询订单状态,看看是否已经支付成功了。
    const {
     return_code,
     ...restData
    } = await pay.orderQuery({
     out_trade_no
    });

    // 若订单存在并支付成功,则开始处理支付
    if (restData.trade_state === 'SUCCESS') {
     let result = await orderCollection
      .where({
       out_trade_no
      })
      .update({
       status: 1,
       trade_state: restData.trade_state,
       trade_state_desc: restData.trade_state_desc
      });


     let curDate = new Date();
     let time = `${curDate.getFullYear()}-${curDate.getMonth() +
          1}-${curDate.getDate()} ${curDate.getHours()}:${curDate.getMinutes()}:${curDate.getSeconds()}`;

   

    }

    return new Res({
     code: return_code === 'SUCCESS' ? 0 : 1,
     data: restData
    });
   }
  case 'orderquery':
   {
    const {
     transaction_id,
     out_trade_no
    } = data;
    // 查询订单

    const {
     data: dbData
    } = await orderCollection
    .where({
     out_trade_no
    })
    .get();

    const {
     return_code,
     ...restData
    } = await pay.orderQuery({
     transaction_id,
     out_trade_no
    });

    return new Res({
     code: return_code === 'SUCCESS' ? 0 : 1,
     data: { ...restData,
      ...dbData[0]
     }
    });
   }

  case 'closeorder':
   {
    // 关闭订单
    const {
     out_trade_no
    } = data;
    const {
     return_code,
     ...restData
    } = await pay.closeOrder({
     out_trade_no
    });
    if (return_code === 'SUCCESS' &&
     restData.result_code === 'SUCCESS') {
     await orderCollection
      .where({
       out_trade_no
      })
      .update({
       status: 2,
       trade_state: 'CLOSED',
       trade_state_desc: '订单已关闭'
      });
    }

    return new Res({
     code: return_code === 'SUCCESS' ? 0 : 1,
     data: restData
    });
   }
 }
}

其实我们支付的关键功能都在上面这些代码里面了。

再来看下,支付的相关流程截图

上图就涉及到了我们的订单列表,支付状态,支付成功后的回调。
今天就先讲到这里,后面会继续给大家讲解支付的其他功能。比如支付成功后的消息推送,也是可以借助云开发实现的。

由于源码里涉及到一些私密信息,这里就不单独贴出源码下载链接了,大家感兴趣的话,可以私信我,或者在底部留言。单独找我要源码也行(微信2501902696)

视频讲解地址:https://edu.csdn.net/course/detail/24770

最后一次编辑于  2019-06-11  
点赞 18
收藏
评论

17 个评论

  • 远方
    远方
    2020-09-05

    花20块钱买了小程序,不回复也不发货,还有没有一点信用了??????????

    2020-09-05
    赞同 2
    回复 1
    • 编程小石头
      编程小石头
      发表于移动端
      2021-05-27
      有时候比较忙,发货比较慢,望理解。你的货已经发给你了吧。。。。
      2021-05-27
      回复
  • 茂$。$
    茂$。$
    2019-05-17

    有用,赞

    2019-05-17
    赞同 2
    回复 1
    • 编程小石头
      编程小石头
      2019-05-17

      谢谢支持。

      2019-05-17
      2
      回复
  • 长沙繁科科技有限公司
    长沙繁科科技有限公司
    03-04

    -

    微信小程序的制作流程一般是:注册小程序-设计小程序-授权小程序-发布小程序。

    -

    1、选择自助搭建平台,直接使用免费小程序模板

    -

    想要快速制作小程序,当然是直接使用免费小程序模板啦!

    400+行业精美小程序模板任您选择!

    精美小程序模板戳:https://qz.fkw.com/model/?_ta=9279

    -

    -

    进入自助搭建小程序平台的模板预览页面,根据自己的偏好以及所处的行业来选择小程序模板。在看中了合适的小程序模板后,直接点击【马上创建】,即可完成小程序模板的应用。

    -

    2、进入搭建页面,通过拖拽式完成搭建

    -

    选好模板完成创建后,接下来要做的就是设计小程序啦!

    -

    你只需要用鼠标拖拽左侧工具栏中的模块按钮至小程序页面中,再通过上传图片或是输入文本的方式,就能够完成微信小程序的内容填充啦。

    -

    -

    3、完成微信小程序的发布

    -

    在完成了免费小程序的全部内容制作后,点击右上方的【审核发布】按钮,并根据自己的实际情况来选择授权小程序的方式,紧跟着审核流程中的提示完成相关步骤。

    -

    等待微信官方审核就可以发布小程序啦!

    一般1-7天就能搞定!

    -

    -

    此外,如果你需要开通支付功能,需要每年缴纳300元认证费给官方。小程序从注册到发布,其实并不难,小程序也给我们带来越来越多的便利。

    -

    如果你也想制作一个小程序,可以参照上面的教程哦!小程序自助搭建平台:https://qz.fkw.com/?_ta=9279

    -


    03-04
    赞同 1
    回复
  • 繁可(珠海)网络科技
    繁可(珠海)网络科技
    2021-11-24

    微信小程序商城开发含支付功能的怎么做?需要多少费用?

    首先,我们先来看看微信小程序商城分为哪两类?

    一是商家自用类的微信小程序商城,归属于b2c类,也就是商家卖产品给消费者,大部分是o2o模式。线下有一个店面,想要再做一个微信小程序商城。

    另一种就是归属于b2b类,多用户商家入驻的微信小程序商城,很有可能本身不卖产品,经营模式主要是邀请商家入驻到这一小程序流程里面,依据商家交易佣金或者入驻收年费的方法。


    一、商家自用类——B2C类

    商家自用类的小程序,重要一点是看用哪一种方法去运作。

    现如今,很多传统商家都想转型升级或尝试做微信小程序商城,但倘若您建立微信小程序商城,仅仅让客户方便快捷购买或者单纯的是买与卖的关系,随后您会发现,总产量成本费用将远远高过线上平台的盈利。因而,微信小程序商城,一定要充分考虑分销或者其他推广营销功能进行开发设计。

    在这个平台上,就可以进行结合传统分销、万人分销、社区拼团、会员储值等功能。

    一般来说,那样种类的小程序开发设计耗费是2-3万。具体根据规定功能而定。

    二、多用户商家入驻的微信小程序——B2B类

    多用户商家入驻类的微信小程序商城,一般对于新手,不建议去做。为什么?

    商家入驻您服务平台的本质事实上是您服务平台能够帮助商家售出产品。那对于一般商家来讲,您做那般的服务平台就意味着不断为服务平台引入总流量,总流量成本费用的资金分配,很有可能会远远高过您从商家那里获得的提成附加的费用。

    一般来说,多用户商家入驻初期的设计开发耗费也会高过上面说的B2C(商家自用类)方法,因为这儿边还涉及到商家管理,交易管理,资金管理等方面。设计开发耗费大概在5-6W,具体因功能界定。


    当然无论是做哪种类型的微信小程序商城,我们都应该找到靠谱的开发公司。

    这里给大家推荐这家在线商城建站平台:(https://mall.fkw.com/?_ta=9266),能够低成本搭建自己的小程序商城!在这里你不需要懂得编程知识,直接挑选适合自己的商城模板,通过简单的替换修改操作,十几分钟就能搭建出自己的商城小程序、网店商城。快来试一试吧!


    2021-11-24
    赞同 1
    回复
  • 彭五湖
    彭五湖
    2019-08-06

    源码呢,怎么下载?

    2019-08-06
    赞同 1
    回复 1
    • 编程小石头
      编程小石头
      2019-08-06
      加我微信获取吧。
      2019-08-06
      回复
  • ,,,
    ,,,
    2019-05-19

    大神收徒弟不

    2019-05-19
    赞同 1
    回复 1
    • 编程小石头
      编程小石头
      2019-05-21

      哈哈,收的,可以加我微信:2501902696

      2019-05-21
      回复
  • 老左
    老左
    2019-05-18

    邀请楼主入驻应用市场(http://market.zhenzikj.com)

    2019-05-18
    赞同 1
    回复 3
    • 编程小石头
      编程小石头
      2019-05-21

      入住你们这个市场,有什么好处呢

      2019-05-21
      回复
    • 老左
      老左
      2019-05-21回复编程小石头

      可以销售您的应用挣钱呀,至少没有任何的坏处和损失,不收取任何入驻费用的

      2019-05-21
      回复
    • ❀抽抽
      ❀抽抽
      2021-11-01
      你这个市场买东西如果安装有问题可以退款么
      2021-11-01
      回复
  • Carlos
    Carlos
    2019-05-17

    图全挂了

    2019-05-17
    赞同 1
    回复 1
    • 编程小石头
      编程小石头
      2019-05-18

      图片需要自己导入下

      2019-05-18
      回复
  • 李旺仔¹⁹⁹⁵
    李旺仔¹⁹⁹⁵
    2021-04-16

    垃圾东西还贴出来??我闭着眼都能写个完整的好吗

    2021-04-16
    赞同
    回复
  • Ox38AA8603F祥
    Ox38AA8603F祥
    2020-03-24

    你这回调太不严谨了,我看了一下你这是要求支付完成后点击完成按钮回到到前端再通过前端去请求接口修改订单状态,要是用户没有点完成就会出现订单支付了,但是状态还是未支付状态。你这要写清楚啊,不然坑死人。

    2020-03-24
    赞同
    回复 1
    • 拾忆
      拾忆
      2021-12-28
      你的有好的源码吗
      2021-12-28
      回复

正在加载...

登录 后发表内容