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

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

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


老规矩先看效果图:

本节知识点

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>

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



三,支付云函数的创建


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

简单先讲解下每个的用处

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
    });
   }
 }
}

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


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


上图就涉及到了我们的订单列表,支付状态,支付成功后的回调。

今天就先讲到这里,后面会继续给大家讲解支付的其他功能。比如支付成功后的消息推送,也是可以借助云开发实现的。

相关文章
|
4天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
11天前
|
移动开发 小程序 前端开发
几千怎么部署搭建校园服务平台,校园圈子论坛系统小程序搭建,校园系统源码,多种功能一体的综合性校园平台
校园圈子论坛是一款集交友、二手市场、聊天等多功能于一体的校园社交平台,支持App、小程序和H5三端交付。学生可处理闲置物品、结识新朋友,通过算法匹配兴趣相投的用户。平台提供分享邀请机制,支持自动绑定推荐关系,并设有奖励机制。开发过程中需注重数据安全与系统稳定性,确保功能兼容及性能优化。
53 5
|
11天前
|
移动开发 小程序 前端开发
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
79 3
|
14天前
|
小程序 安全 搜索推荐
陪玩小程序的搭建解析与功能需求
陪玩小程序是为玩家提供专业陪玩服务的应用,嵌入社交或游戏平台,具备智能匹配、实时聊天、预约服务等功能,支持便捷高效的游戏体验。源码交付时需提供详细文档、技术支持及定制开发服务,确保客户能顺利维护和升级。选择陪玩小程序时应关注功能需求、用户体验、安全性和成本效益,以确保最佳使用效果。
37 0
|
11天前
|
小程序 安全 网络安全
清晰易懂!陪玩系统源码搭建的核心功能,陪玩小程序、陪玩app的搭建步骤!
陪玩系统源码包含多种约单方式、实时语音互动、直播间与聊天室、大神申请与抢单、动态互动与社交及在线支付与评价等核心功能。搭建步骤包括环境准备、源码上传与解压、数据库配置、域名与SSL证书绑定、伪静态配置及后台管理。注意事项涵盖源码安全性、二次开发、合规性和技术支持。确保平台安全、合规并提供良好用户体验是关键。
|
2月前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
66 3
|
2月前
|
监控 小程序 前端开发
排队免单小程序开发源码案例
“排队免单小程序”旨在通过用户排队行为结合特定规则为用户提供免单或优惠机会,提升用户体验及商家流量。核心功能包括用户注册登录、排队管理、免单规则设置、支付与结算、商家管理和通知提醒等。技术上采用微信小程序开发框架,前后端分离架构,集成微信支付等服务,确保高效安全的数据处理与传输。项目开发过程涵盖需求分析、设计开发、集成测试和上线发布,后期注重数据监控、用户反馈和运营推广,以持续优化用户体验。
|
2月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
43 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
3月前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
119 0
微信小程序多语言切换神器:简繁体切换功能完全指南