微信小程序 实现支付流程

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

一、背景

开发微信小程序时,涉及到微信支付的开发环节,特此记录一下

二、前提

2.1、注册微信支付商户号

官方注册地址👉👉:接入微信支付 - 微信商户平台

备注:此商户号为超级管理员,一般由更上级领导进行注册(   非前端人员注册  ),会成为公司收款账户,主要填写超管信息并上传企业资料(如:营业执照,对公银行账户信息,法人身份证)

微信小程序支付,微信小程序,微信小程序,小程序

2.2、小程序关联商户号

微信公众平台地址👉👉:微信公众平台

已注册的小程序,登录微信公众平台,在左侧功能项找到微信支付,选择商户号管理,将小程序与商户号关联

微信小程序支付,微信小程序,微信小程序,小程序

如果已经关联了,就会显示已关联的商户号信息👇

微信小程序支付,微信小程序,微信小程序,小程序

三、微信支付流程

3.1、微信官方支付流程图

官网地址👉👉:pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3

微信小程序支付,微信小程序,微信小程序,小程序

说明:

1、小程序内调用登录接口,获取到用户的openid,api参见公共api【小程序登录API】

2、商户server调用支付统一下单,api参见公共api【统一下单API】

3、商户server调用再次签名,api参见公共api【再次签名】

4、商户server接收支付通知,api参见公共api【支付结果通知API】

5、商户server查询支付结果,如未收到支付通知的情况,商户后台系统可调用【查询订单API】 (查单实现可参考:支付回调和查单实现指引)

6、商户小程序内使用小程序调起支付API(wx.requestPayment)发起微信支付,详见小程序API文档

四、具体实现

4.1、获取OpenID

OpenID是用户唯一标识,通过临时登录凭证 code 换取的(登录凭证code,5分钟有效期),通过code向后端接口获取OpenID

<script>
  import {
  	getBindSocial,wxLogin_api
  } from "@/action/action";
  import {
    MINITYPE
	} from '@/constants/hostConfig';
export default{
	data() {
		return {
			phone: '', 
		}
	},
	methods: {
		wexin_login(){
			wx.login({
				success: (res) =>{
					console.log(res.code,'code')
					let userCode = res.code
					//将code传递给服务器
					getBindSocial({
						jscode: userCode,
          				type: MINITYPE,
					}).then(res =>{
						console.log('res',res);
                        //将code传递给接口会返回openid,unionid,phone
					})
				}
			})
		}
	},
}
</script>

备注:

getBindSocial()是封装的api接口,将code传递给接口之后,会得到openid,unionid,phone等。如下图👇

微信小程序支付,微信小程序,微信小程序,小程序

4.2、调用预支付接口获取支付核心数据

将获取的openid与接口需要携带的参数,调用接口,获取支付核心数据

微信小程序支付,微信小程序,微信小程序,小程序

备注:

wx_advance_pay()是封装的api接口, openid在登录的时候直接本地存储在loginInfo对象中,参数wxOpenId是从本地存储的loginInfo对象中获取的openid,同时也包含接口需要携带的其他参数;以下为接口返回的支付核心数据,如下图👇

微信小程序支付,微信小程序,微信小程序,小程序

4.3、调用微信官方支付接口 wx.requestPayment(),弹出支付界面

微信支付接口地址👉👉:wx.requestPayment(Object object) | 微信开放文档

微信小程序支付,微信小程序,微信小程序,小程序

将 wx_advance_pay()接口返回的数据对象,作为wx.requestPayment()参数值,得到支付结果👇

微信小程序支付,微信小程序,微信小程序,小程序

调用后,会弹出付款界面,微信开发者工具需要扫码支付

微信小程序支付,微信小程序,微信小程序,小程序

如果是手机支付会弹出微信付款界面,支付完成后会收到账单信息

微信小程序支付,微信小程序,微信小程序,小程序

4.4、微信支付流程总结

1、获取OpenID:通过wx.login()获得code,将code传给接口获得OpenID

2、获取预支付核心数据:调用预支付接口,将OpenID与接口需要携带的其他参数,得到预支付核心数据;

数据包含:【时间戳--timeStamp,随机字符串--nonceStr,预支付id--package,签名算法--signType,签名--paySign】

3、发起微信支付:调用wx.requestPayment(),传递上一步获取的5个预支付核心数据,得到支付结果

最后,👏👏 😀😀😀 👍👍     文章来源地址https://www.toymoban.com/news/detail-851146.html

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

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

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

相关文章

  • 微信小程序接入微信支付流程

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

    2023年04月12日
    浏览(51)
  • 【面试合集】说说微信小程序的支付流程?

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

    2024年01月17日
    浏览(49)
  • 微信公众号程序或微信小程序接入微信支付流程(前后端程序示例)

      微信公众号程序或微信小程序项目中基本都要有微信支付。支付场景基本就是点击支付,然后手机底部拉起输入微信支付密码弹窗,密码输入正确后,支付完成。但是无论是微信小程序或微信公众号程序都是在后端调用微信api接口进行统一下单,将接口返回数据回传前端

    2024年02月09日
    浏览(65)
  • 使用uniapp开发微信小程序的微信支付流程

    在我们做一些购物车的结算功能时是一定会有支付功能的,那我们如何去做微信支付这个功能呢,首先我们先要理清思路,并且要了解到接口需要哪些数据以及会返回哪些数据 注意:一定要先看接口文档! 创建订单。 ○ 请求创建订单的 API 接口:把(订单金额、收货地址、

    2024年02月09日
    浏览(76)
  • 【微信小程序支付功能】uniapp实现微信小程序支付功能

    场景 :要实现公司微信小程序的电商模块微信支付功能 一.实现步骤和思路 在登录状态,登录的时候获取到code,利用code获取到 openid: https://blog.csdn.net/weixin_45308405/article/details/128868377?spm=1001.2014.3001.5501 在manifest.json文件“App模块配置”项的“Payment(支付)”下,勾选“微信支付

    2024年02月11日
    浏览(61)
  • 微信小程序实现支付宝支付——web-view实现

    由于使用到的微信小程序需要实现支付功能,而微信支付的申请手续较为繁琐,所以使用了支付宝支付,但是微信小程序正常情况不支持支付宝支付,所以我使用了web-view内嵌了支付宝的h5支付。 不会使用支付宝沙箱支付的同学可以看这篇文章Springboot支付宝沙箱支付 代码如下

    2024年02月11日
    浏览(59)
  • 微信小程序中如何实现微信支付

    微信支付是微信公众平台提供的一种在线支付服务,可以为用户提供快速、方便、安全的支付体验。而在微信小程序中实现微信支付,则可以为应用程序提供更多的功能和服务,提高用户体验和商业价值。因此,在本文中,我们将介绍如何在微信小程序中实现微信支付。 在使

    2024年02月05日
    浏览(49)
  • 微信H5页面实现微信小程序支付

    背景: 在微信H5页面已经实现了微信JSAPI的网页支付,老板要求把整个业务线快速转移到微信小程序中,作为懒惰的程序员来说,直接把页面嵌套到小程序不就行了。说干就干,在小程序中设置好基本信息后,一预览居然成功了,一切看来是那么顺利,可到了系统的支付环节

    2024年02月14日
    浏览(53)
  • 前端实现微信支付(H5,微信小程序)

    通常一些电商项目使用到微信支付操作,所以简单地介绍一下微信支付的具体流程。 微信支付是微信内置微信浏览器(其他浏览器不支持)或者微信小程序的支付接口,主要负责用户对商家执行支付操作的流程。 例如常见的电商在下单环节,就需要通过使用微信支付接口,

    2024年02月08日
    浏览(55)
  • 微信小程序支付V3版本接口实现

    特别说明:遇到 java.security.InvalidKeyException: Illegal key size ******* getValidator的错误 参考添加链接描述 JDK7的下载地址 JDK8的下载地址: 下载后解压,可以看到local_policy.jar和US_export_policy.jar以及readme.txt 如果安装了JRE,将两个jar文件放到%JRE_HOME%libsecurity目录下覆盖原来的文件 如果安

    2024年02月09日
    浏览(52)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包