微信小程序支付完整流程

这篇具有很好参考价值的文章主要介绍了微信小程序支付完整流程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、注册微信支付商户号(由上级或法人注册)

注册链接:https://pay.weixin.qq.com/index.php/apply/applyment_home/guide_normal#none
此商户号,需要由主管及更上级领导进行注册,会成为公司收款账户
企业注册需要材料:营业执照,对公银行账户信息,法人身份证

2、注册小程序账号(由上级或者领导注册)

企业一般注册为企业小程序,非个人,需要上传营业执照等。注册地址

3、登录商户号绑定小程序

登录之前注册好的商户账号,将当前小程序ID绑定至此商户,表明此小程序可以调用此商户支付相关接口。

4、后端工程师书写接口

后端书写接口,根据前端传入数据,返回微信支付核心数据,后端需要什么数据,前端调用此接口时,传给后端即可。
小程序支付,uniapp,微信小程序,小程序,javascript

返回核心数据如下:

"appId": "xxxx",
"nonceStr": "xxxx",
"packageValue": "prepay_id=xxxxx",
"paySign": "xxxxxx",
"signType": "MD5",
"timeStamp": "xxxxxx"

5、前端工程师调用接口

5.1 获取openid(当前用户真实id)

openid为当前用户真实id,无法直接用任何接口获得,需要先调用微信login接口登录,获取登录凭证code,在通过此code(登录凭证,5分钟有效),向微信服务器换取用户openid。
原生小程序登录:

wx.login({
  success (res) {
    if (res.code) {
     //code: 用户登录凭证(有效期五分钟)使用 code 可以换取 openid、unionid、session_key 等核心信息
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})

uniapp登录:

uni.login({
  provider: 'weixin',
  success (res) {
    if (res.code) {
     //code: 用户登录凭证(有效期五分钟)使用 code 可以换取 openid、unionid、session_key 等核心信息
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})

发送请求调用微信官方接口,用code凭证换取用户openid(真实用户id)
原生小程序:wx.request uniapp: uni.request, 流程无差别

uni.request({
  url: `https://api.weixin.qq.com/sns/jscode2session`, //微信官方接口
  data: {
    appid: '小程序appId',
    secret: '小程序密钥,在小程序appId下一行,放一块在',
    js_code: '刚才获取的code', 
    grant_type: 'authorization_code' //固定值
  },
  success: (res) => {
    //获取openid:用户真实唯一id
    console.log(res.data.openid);
  }
})
5.2 调用公司后端接口,获取支付核心数据
// 调用后端接口
uni.request({
  url: '你们公司的后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },
  success(obj) {
    console.log(obj)
  }
})

此接口必须返回以下6个核心数据,都是由后台计算生成。

"appId": "xxxx",
"nonceStr": "xxxx",
"packageValue": "prepay_id=xxxxx",
"paySign": "xxxxxx",
"signType": "MD5",
"timeStamp": "xxxxxx"
5.3 调用微信官方支付接口,弹出支付界面
uni.request({
  url: '你们公司的后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },
  success(obj) {
    

    //调用微信官方支付接口弹出付款界面,输入密码扣款
    wx.requestPayment({
      timeStamp: obj.xxxx.timeStamp,  //后端返回的时间戳
      nonceStr:  obj.xxxx.nonceStr,   //后端返回的随机字符串
      package:  obj.xxxx.packageValue, //后端返回的prepay_id
      signType: 'MD5', //后端签名算法,根据后端来,后端MD5这里即为MD5
      paySign:  obj.xxxx.paySign,  //后端返回的签名
      success (res) {
        console.log('用户支付扣款成功', res)
      },
      fail (res) { 
        console.log('用户支付扣款失败', res)
      }
     })

  }
})

调用后,弹出付款界面,模拟器需要扫码支付。
点击真机调试会直接弹出微信付款界面。

总结

小程序支付,uniapp,微信小程序,小程序,javascript文章来源地址https://www.toymoban.com/news/detail-688797.html

到了这里,关于微信小程序支付完整流程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序支付流程

    申请微信支付,配置小程序秘钥,设置秘钥和下载证书,配置HTTPS服务器即可。 具体步骤 1、申请微信支付。小程序认证以后,可以在小程序后台,微信支付菜单栏,申请微信支付。填写企业信息和对公账户,微信支付会打一笔随机金额到对公账户,输入金额完成验证后,在

    2024年02月13日
    浏览(35)
  • 微信小程序的支付流程

    微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能 在小程序内可调用微信的 API 完成支付功能,方便、快捷 场景如下图所示: 用户通过分享或扫描二维码进入商户小程序,用户选择购买,完成选购流程 调起微信支付控件,用户开始输入支付密码 密码验证

    2024年02月02日
    浏览(43)
  • 微信小程序 实现支付流程

    开发微信小程序时,涉及到微信支付的开发环节,特此记录一下 官方注册地址👉👉:接入微信支付 - 微信商户平台 备注:此商户号为超级管理员,一般由更上级领导进行注册(     非前端人员注册    ),会成为公司收款账户,主要填写超管信息并上传企业资料(如:营业执

    2024年04月14日
    浏览(47)
  • 微信小程序支付流程(前端)

    微信小程序的支付只要用到官方的支付API : wx.requestPayment(Object object) 官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/payment/wx.requestPayment.html 1、总体流程 一般情况下,前端接触到的支付流程是这样的:商品页选择商品 —— 提交商品订单(跳转到确认订单页) ——

    2024年02月11日
    浏览(42)
  • 微信小程序完整实现微信支付功能(SpringBoot和小程序)

    1.前言 不久前给公司实现支付功能,折腾了一阵子,终于实现了,微信支付对于小白来说真的很困难,特别是没有接触过企业级别开发的大学生更不用说,因此尝试写一篇我如何从小白实现微信小程序支付功能的吧,使用的后端是 SpringBoot 。 2.准备工作 首先,要实现支付功能

    2024年02月04日
    浏览(48)
  • 微信小程序接入微信支付流程

    1、支付场景:点击支付按钮唤起微信支付弹窗,输入正确密码后完成支付。 2、基本流程:点击支付按钮首先生成一个订单,然后在后端调用微信api接口进行统一下单,将接口返回的数据回传到前端拉起支付操作,然后异步通知支付结果。 1、微信公众平台配置 点击功能 –

    2023年04月12日
    浏览(38)
  • uniapp - 微信小程序接入腾讯视频播放器功能插件,uniapp开发微信小程序端调用引入并使用腾讯视频播放组件完整全流程(详细示例源码,一键复制开箱即用)

    在uniapp 微信小程序项目中,集成腾讯视频功能插件,实现播放腾讯视频效果,附带详细示例源码及注释, 你可以跟着步骤一步步来,保证几分钟就能快速在uniapp小程序项目中植入腾讯视频功能!

    2024年02月12日
    浏览(37)
  • Java实现微信小程序V3支付 (完整demo)

    2024年02月07日
    浏览(26)
  • uniapp微信小程序JSAPI支付前端生成签名,并调起微信支付

    签名方式使用的是SHA256withRSA 插件 npm install jsrsasign 使用

    2024年01月17日
    浏览(46)
  • 【面试合集】说说微信小程序的支付流程?

    微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能 在小程序内可调用微信的 API 完成支付功能,方便、快捷 场景如下图所示: 用户通过分享或扫描二维码进入商户小程序,用户选择购买,完成选购流程 调起微信支付控件,用户开始输入支付密码 密码验证

    2024年01月17日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包