小程序开发实战案例之二｜如何实现小程序支付

盐焗代码虾2023-12-06 13:43

上一章讲完如何获取用户信息授权 后，下一步就可以进行小程序支付了。

本期就来介绍下支付宝小程序支付如何实现。

PS：接入前的准备工作可以参考：接入准备；接入指南可参考：接入指南～

获取小程序支付权限

获取权限分为三步：分别是 账号开通 JSAPI 支付 、账号与小程序账号绑定 以及 小程序绑定 JSAPI 产品

账号开通 JSAPI 支付

需要用收款主体账号去签约，账号要求必须是企业或者是个体工商户。

可以直接通过 👉 签约直通车 进行开通

账号与小程序账号绑定

开通成功之后，要去 小程序 AppID 管理 页面关联小程序，将开发的小程序关联到账号下。

⚠ 注意：哪个小程序开发就绑哪个小程序，不绑的话后面无法支付成功。

小程序绑定JSAPI产品

要到小程序详情界面的【产品绑定】去绑 JSAPI 支付产品。

可以参考 👉 [应用如何实现产品绑定] 进行操作：

签约过程中可能遇到的问题也给大家列在这里了，大家可以参考下～：

  • [小程序功能列表中没有支付能力](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2Fcc0c840f-aa7e-4862-bbea-125cf8d6915f "https://opensupport.alipay.com/support/FAQ/cc0c840f-aa7e-4862-bbea-125cf8d6915f")

  • [个人小程序是否支持支付功能](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2Fbc49be8a-09a4-4d0c-9f1f-f6c6c84eea37 "https://opensupport.alipay.com/support/FAQ/bc49be8a-09a4-4d0c-9f1f-f6c6c84eea37")

  • [小程序支付签约要求](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2Fd0b588c7-2937-4c35-a4b9-205a80a10647 "https://opensupport.alipay.com/support/FAQ/d0b588c7-2937-4c35-a4b9-205a80a10647")

小贴士 📖 ： 账号不符合要求的也可以通过沙箱环境去测试下，可以参考之前写的这篇~

支付宝沙箱超详细教程+避雷经验，看这篇就够了

支付调用整体流程

获取到权限之后我们就可以进行接口调用了，主要步骤分为 ：

  • （前端+后端）获取用户的授权信息
  • （前端）将订单信息传到服务端
  • （后端）服务端创建支付单
  • （前端）唤起支付

第一步、获取用户的授权信息

目的： 这一步是为了能够获取到用户的 user_id（openid）

注意： user_id 和 openid 都是可以的，新老账号可能获取到的信息不一样，我之前老的账号获取到的是user_id，新申请的账号获取到的是 openid，根据大家的自己账号实际情况来看~

对此内容感兴趣的小伙伴也可以查看 👉[openid 和 userid 的区别]

方法一：通过用户授权获取（用户端有弹窗）

大家可以参考我之前写的获取用户信息的 my.getAuthCode 步骤，下面简单概括下就是：

  • 前端通过 my.getAuthCode 方法获取到用户的授权 authCode
  • 将 authCode 传到后端通过 alipay.system.oauth.token 接口获取 access_token 参数
  • 后端用 access_token 参数传入 alipay.user.info.share 接口中获取到 user_id（openid）

方法二：通过静默授权获取（用户端无弹窗）

静默授权与用户授权同样是使用的 my.getAuthCode 方法，但是 scopes 传参不同，获取到的信息 只有 uid（openid） ，调用步骤为：

  • 前端通过 my.getAuthCode 方法（scopes 入参 auth_base ）获取到用户的授权 authCode
  • 将 authCode 传到后端通过 alipay.system.oauth.token 接口到 user_id（openid）

代码示例

javascript 复制代码 
Page({
  getAuthCode() {
    my.getAuthCode({
      scopes: 'auth_base',//静默授权
      success: res => {
        const authCode = res.authCode;
      fail: err => {
        console.log('my.getAuthCode 调用失败', err)
      }
    });
  }
})

授权这块的问题在上一篇 ****已经说过很多了，这次再补充两个关于静默授权的问题：

  • [小程序静默授权是否可以拿到用户头像昵称](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2Fc768fd63-45bd-4b04-8e6d-3cd829dbab05 "https://opensupport.alipay.com/support/FAQ/c768fd63-45bd-4b04-8e6d-3cd829dbab05")

  • [支付宝小程序可以在首页获取到user_id吗](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2F1f380b05-e5fd-4836-90f5-4022bea85755 "https://opensupport.alipay.com/support/FAQ/1f380b05-e5fd-4836-90f5-4022bea85755")

第二步、将订单信息传到服务端

用户信息获取到之后，我们就可以将订单信息和用户信息一起再打包，通过 my.request 传回服务端

css 复制代码 
//.js页面
Page({
  pay(){
    my.request({
      url: '商家服务端地址',//须加httpRequest域白名单
      method: 'POST',
      data: {//data里的key、value是开发者自定义的
        from: '支付宝',
        order: 'XXXXX',//订单信息
      },
      dataType: 'json',
      success: function(res) {
        my.alert({content: 'success'});
      },
      fail: function(res) {
        my.alert({content: 'fail'});
      },
      complete: function(res) {
        my.hideLoading();
        my.alert({content: 'complete'});
      }
    });
  }
});

如果是在本地测试的话记得在 IDE 的【详情】里面把下面这两个校验勾选上，不然IDE会去校验域名的合法性的。

这边给大家汇总一些 my.request 调用过程中的常见问题：

  • [my.request API 可以使用 ip 地址访问吗](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2Ffcc52e5d-b9ee-4735-b16a-ac36dc375c08 "https://opensupport.alipay.com/support/FAQ/fcc52e5d-b9ee-4735-b16a-ac36dc375c08")

  • [my.request 的 url 参数的域名是否需要配置白名单](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2F1ab5771a-eda9-4f58-a877-024316321c26 "https://opensupport.alipay.com/support/FAQ/1ab5771a-eda9-4f58-a877-024316321c26")

  • [my.request 默认请求头](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2F65a06cf1-a681-4d52-a6f0-f8c7a5b29ff6 "https://opensupport.alipay.com/support/FAQ/65a06cf1-a681-4d52-a6f0-f8c7a5b29ff6")

  • [my.request 默认请求超时是多久](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2Fae5267bf-6f0c-4ad1-a3d7-7e49b637c153 "https://opensupport.alipay.com/support/FAQ/ae5267bf-6f0c-4ad1-a3d7-7e49b637c153")

第三步、服务端创建支付单

目的： 获取 trade_no（支付宝交易号）

接收到前端传过来的订单信息之后，需要将信息传入 alipay.trade.create 接口中获取 trade_no。

服务端的代码大家可以直接参考：👉 [alipay.trade.create 代码示例]

📌下面简单列一下后端几个必传的参数：

  • out_trade_no： 商户端自定义订单号，需保证在商户端的唯一性。
  • total_amount： 订单金额，单位元，精确到两位小数。
  • subject： 订单标题，会在账单界面展示。
  • product_code： 产品码，固定值 JSAPI_PAY。
  • op_app_id： 传小程序appid。

如果获取到的是user_id，传入

  • buyer_id： 传入之前获取到的user_id。

如果获取到的是openid，传入

  • buyer_open_id： 传入之前获取到的openid。

后端接口调用成功之后就可以获取到 trade_no 参数了：

服务端接口报错的常见问题如下：

  • [小程序支付报错：ACCESS_FORBIDDEN](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2F633dc166-ef85-4c57-ad27-d2e2ce079d33 "https://opensupport.alipay.com/support/FAQ/633dc166-ef85-4c57-ad27-d2e2ce079d33")

  • [小程序支付报错：本笔交易不支持在本小程序内支付请联系商户完成小程序 APPID 的绑定后再重新发起支付](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2Ff4c7a737-c70e-4f52-8e2b-b92eb00ba7eb "https://opensupport.alipay.com/support/FAQ/f4c7a737-c70e-4f52-8e2b-b92eb00ba7eb")

  • [ACQ.UNBOUND_APPLICATION（指定小程序主体未完成关联绑定）](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2F8b9d0341-a6a3-443c-a94b-266e4c578c80 "https://opensupport.alipay.com/support/FAQ/8b9d0341-a6a3-443c-a94b-266e4c578c80")

  • [小程序支付报错：支付失败，商家支付唤起方式不正确，请联系商家解决](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2Ffa2a77a1-ecb1-41f9-81ff-b60e92614128 "https://opensupport.alipay.com/support/FAQ/fa2a77a1-ecb1-41f9-81ff-b60e92614128")

第四步、唤起支付

前端获取到 trade_no 之后，我们就可以通过 my.tradePay（发起支付） 方法在小程序上唤起收银台了。

css 复制代码 
// .js
my.tradePay({
  // 传入支付宝交易号trade_no
  tradeNO: '201711152100110410533667792',
  success: (res) => {
    my.alert({
      content: JSON.stringify(res),
    });
  },
  fail: (res) => {
    my.alert({
      content: JSON.stringify(res),
    });
  }
});

如果是 IDE 上测试的话，需要用支付宝扫码进行支付：

真机测试可以直接唤起收银台进行支付：

大家也可以看下支付过程中可能会遇到的一些问题～：

  • [小程序前端跳转是否可以判断支付成功](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2F13f1a0ae-79a3-4c62-80f2-1c76f7170736 "https://opensupport.alipay.com/support/FAQ/13f1a0ae-79a3-4c62-80f2-1c76f7170736")

  • [小程序开发者工具是否在支持测试小程序支付功能](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2F6d98657b-8bfd-4dcc-8398-493ee6cf6603 "https://opensupport.alipay.com/support/FAQ/6d98657b-8bfd-4dcc-8398-493ee6cf6603")

  • [小程序支付如何设置同步](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2F4490303c-1b31-4d47-b7cb-6c8bbe7aebce "https://opensupport.alipay.com/support/FAQ/4490303c-1b31-4d47-b7cb-6c8bbe7aebce")

  • [小程序支付报错：当面付等产品不支持在小程序场景内使用，请联系商户更换收单产品后再重新发起支付](https://link.juejin.cn?target=https%3A%2F%2Fopensupport.alipay.com%2Fsupport%2FFAQ%2F387292fb-ea33-4192-9821-e4bb0651d2d7 "https://opensupport.alipay.com/support/FAQ/387292fb-ea33-4192-9821-e4bb0651d2d7")

以上就是小程序支付的所有内容了，希望能够帮助到你*★,°* :.☆(￣▽￣)/$:.°★ 。

相关推荐
赣州云智科技的技术铺子3 天前
【一步步开发AI运动APP】七、自定义姿态动作识别检测——之规则配置检测
微信小程序·小程序·云开发·智能小程序
悟空码字2 个月前
手机放兜里，支付宝“碰一下”被盗刷？
支付宝·碰一下
Java个体户3 个月前
抖音支付-通用交易支付
支付宝
未来之窗软件服务4 个月前
AlipayHK支付宝HK接入-商户收款（PHP）
支付宝
yidiancaijing5 个月前
华为新手机和支付宝碰一下 带来更便捷支付体验
华为·支付宝
悟空码字5 个月前
支付宝直付通，电商资金管理的得力助手，让分账更简单
支付宝·直付通
悟空码字6 个月前
支付宝与华为终端联手，移动支付即将进入“碰时代”
华为·鸿蒙·支付宝
newxtc6 个月前
【支付行业-支付系统架构及总结】
安全·支付宝·第三方支付·风控系统·财付通
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04✨分享我在飞书多维表格中使用DeepSeek的经历✨05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06苍穹外卖面试总结07Coze扣子平台完整体验和实践（附国内和国际版对比）08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09DeepSeek各版本说明与优缺点分析10如何在WPS和Word/Excel中直接使用DeepSeek功能