心情追忆 - 打造完美支付体验：从零开始的支付功能实现

最新推荐文章于 2025-03-11 11:12:24 发布

Jing_jing_X

最新推荐文章于 2025-03-11 11:12:24 发布

阅读量1.3k

点赞数 29

CC 4.0 BY-SA版权

分类专栏：心情追忆文章标签：小程序个人开发后端前端产品经理盈利产品运营

本文链接：https://blog.youkuaiyun.com/qq_34319145/article/details/144003105

心情追忆专栏收录该内容

17 篇文章

订阅专栏

之前，我独自一人开发了一个名为“心情追忆”的小程序，旨在帮助用户记录日常的心情变化及重要时刻。我从项目的构思、设计、前端（小程序）开发、后端搭建到最终部署。经过一个月的努力，通过群聊分享等方式，用户量也有了将近200人。虽然取得了初步的成绩，但我希望小程序能够持续发展。

在学习了相关的产品课程之后，我开始对小程序进行了一系列的优化。首先是首页的优化，使界面更加简洁友好；其次是增加了核心功能的动态引导，帮助新用户更快上手。最近，我又为“心情追忆”添加了一个重要的功能——支付功能。虽然我之前有过处理支付业务逻辑的经验，但这次是从头开始，包括注册商户号在内的整个流程，让我学到了很多新的知识。

心情追忆-首页“毒“鸡汤AI自动化

心情追忆-产品学习之盈利思维

支付功能实现的要点

实现支付功能看似复杂，实际上可以分解为几个关键步骤：

生成支付订单：首先需要收集用户的必要信息，如订单详情、金额等，然后在服务器端生成一个支付订单。
前端唤起支付：接着，在前端调用支付组件，将生成的支付订单信息传递给支付接口，从而完成支付过程。

生成支付订单实现:

public static PrepayWithRequestPaymentResponse prepay(Integer total, String productTitle, String outTradeNo, String userOpenId) {
        // 使用单例模式获取配置
        Config config = getConfigInstance(merchantId, privateKeyPath, merchantSerialNumber, apiV3key);
        // 构建service
        JsapiServiceExtension service = new JsapiServiceExtension.Builder().config(config).build();
        // request.setXxx(val)设置所需参数，具体参数可见Request定义
        PrepayRequest request = new PrepayRequest();
        Amount amount = new Amount();
        // 金额
        amount.setTotal(total);
        request.setAmount(amount);
        request.setAppid(appId);
        request.setMchid(merchantId);
        // 支付项目名称
        request.setDescription(productTitle);
        // 回调地址
        request.setNotifyUrl(notifyUrl);
        // 交易编号
        request.setOutTradeNo(outTradeNo);
        Payer payer = new Payer();
        // 用户openid
        payer.setOpenid(userOpenId);
        request.setPayer(payer);
        // 调用下单方法，得到应答
        PrepayWithRequestPaymentResponse prepayWithRequestPaymentResponse = service.prepayWithRequestPayment(request);
        return prepayWithRequestPaymentResponse;
    }

引入微信支付sdk, 这个代码在官网有demo, 重点需要: 金额(单位分), 回调地址, 交易编号(全局唯一), 用户openId(微信登录获取), 其他的参数都能通过注册小程序和微信支付找到, 挺简单.

这个代码的重点在JsapiServiceExtension, 官方文档用的是JsapiService, 会返回一个prepayId, 然后前端通过prepayId去唤醒支付组件(如下)

唤起这个组件前端需要拿到prepayId, 加上appid, timestamp, signType, paysign等等参数去请求wx.requestPayment

console.log('支付请求响应:', response);
    // 处理支付成功的逻辑
    // 使用预支付订单信息调用微信支付
    const payParams = response; // 假设后端返回的支付参数
    console.log('支付参数:', payParams);
    // 使用预支付订单信息调用微信支付
    await Taro.requestPayment({
      timeStamp: payParams.timeStamp,
      nonceStr: payParams.nonceStr,
      package: payParams.packageVal,
      signType: payParams.signType, // 注意这里的签名类型是 "RSA"
      paySign: payParams.paySign,
      success: function (res) {
        Taro.showToast({
          title: '支付成功',
          icon: 'success',
        });
      },
      fail: function (err) {
        Taro.showToast({
          title: err.errMsg || '支付失败',
          icon: 'none',
        });
      }
    });

后来我觉得其中有几个参数比较私密, 不应该在前端去做加密操作, 就想到在后端把参数和加密都做好了, 直接反给前端比较安全, 于是找到JsapiServiceExtension这个类, 他是请求拿到prepayId后, 自动帮你把参数和加密完成, 并且PrepayWithRequestPaymentResponse返回值全是唤起支付需要的值.

也就是说支付功能, 把企业主体小程序申请完和微信支付商户申请完后, 前端和后端只需要上面这两段代码就能实现支付.

当然支付功能不仅仅是让用户能够付费这么简单，除了性能, 数据安全等技术问题, 它还涉及到订单查询和退款等一系列用户层面的后续操作。接下来，我将继续完善这些功能，确保“心情追忆”能够提供一个完整且安全的支付体验。