- 申请公众号:
首先需要拥有一个微信公众号或小程序账号,并完成相关的认证和设置。
公众号设置:在公众号后台进行相关配置,包括JS接口安全域名、网页授权域名等,这些域名应与前端应用的域名一致。
- 商户平台配置:
在微信商户平台申请商户号,并开通Native/JSAPI/H5 支付功能。同时,将公众号与商户号进行关联,确保双方能够正常通信。
场景不同有三种支付方式:
对于Native支付方式(PC端),商户平台前端将prepay_id转换为二维码供用户扫描。
对于H5支付方式(移动端非微信浏览器),商户平台前端将prepay_id和其他参数添加到URL中,并跳转到该URL以唤起微信支付。
对于JSAPI支付方式(移动端微信浏览器),商户平台前端直接调用微信的JSAPI接口进行支付。
微信小程序支付的流程:
- 用户下单:用户首先通过分享或扫描二维码等方式进入微信小程序,并在小程序内浏览商品或服务,完成选购流程。当用户决定购买某商品或服务时,会触发下单操作。在这一步,小程序会将用户选择的商品信息(如商品ID、数量等)以及用户的OpenID(用户唯一标识)发送到服务器。
- 获取OpenID:在发起支付请求之前,小程序需要获取用户的OpenID。OpenID是通过小程序的登录功能获取的,具体步骤如下:用户登录:用户在小程序内点击登录按钮,小程序调用wx.login()方法,向微信服务器发送登录请求,获取到用户的临时登录凭证code。code换openid:小程序将code发送到开发者服务器,服务器通过code向微信服务器请求用户的openid和session_key等信息。这些信息将被用于后续的支付请求中。
- 调用预支付接口:开发者服务器在收到用户的订单信息和OpenID后,会调用微信支付的预支付接口(统一下单API),向微信支付系统请求创建支付订单。这一过程中,服务器需要向微信支付系统传递一系列参数,包括appid(小程序ID)、mchid(微信支付商户号)、nonce_str(随机字符串)、body(商品描述)、out_trade_no(商户订单号)、total_fee(订单总金额)、spbill_create_ip(用户端实际ip)、notify_url(接收支付结果通知的回调地址)、trade_type(交易类型,JSAPI表示小程序支付)和openid(用户的OpenID)。微信支付系统在收到这些参数后,会生成预支付交易会话标识(prepay_id),并将相关信息返回给开发者服务器。
- 发起支付请求:开发者服务器将预支付交易会话标识(prepay_id)及其他必要的支付参数(如时间戳、随机字符串、签名等)返回给小程序前端。小程序前端在收到这些参数后,调用wx.requestPayment()方法,向微信支付系统发起支付请求。用户需要在微信支付界面输入支付密码或使用指纹等验证方式完成支付。
- 处理支付结果:支付完成后,微信支付系统会将支付结果通知发送给开发者服务器配置的回调地址(notify_url)。开发者服务器需要验证支付结果的真实性,并根据支付结果更新订单状态。同时,小程序前端也会收到支付结果的回调,根据支付结果进行相应的页面跳转或提示。
微信h5支付的流程:
- 申请微信公众号和商户号:
- 首先,需要有一个认证过的微信公众号(服务号),因为微信H5支付需要借助微信的JSSDK来实现。
- 在微信公众平台上申请微信商户号,这是用于接收支付款项和管理支付相关事务的账号。
- 配置公众号:
- 登录微信公众平台,进入“公众号设置”-“功能设置”,记录下AppID、AppSecret等信息,这些信息后续开发过程中会用到。
- 在“JS接口安全域名”中添加你的网站域名,注意这个域名必须是经过ICP备案的。
- 前端集成微信JSSDK:
- 引入微信JSSDK,可以通过CDN方式或者直接下载js文件到本地。
- 通过后端接口获取access_token,然后使用该token向微信服务器请求jsapi_ticket。
- 将jsapi_ticket、noncestr(随机字符串)、timestamp(时间戳)以及url(当前页面的URL)进行签名,得到signature。
- 用户点击支付按钮:
- 当用户在H5页面上选择商品并点击支付时,前端会调用统一下单接口(如/api/OrderProgram/CreateTheOrder),将订单信息发送给后端。
- 后端收到请求后,会调用微信支付的统一下单接口,传入必要的参数(如商品描述、商户号、用户OpenID等),返回预支付交易会话标识(prepay_id)。
- 生成支付链接并跳转:
- 前端拿到orderId后,再带着orderId请求支付接口(如/api/OrderProgram/WxH5Pay),获取mweb_url。
- 前端将location.href设置为mweb_url,从而跳转到微信支付页面。
- 用户完成支付:
- 用户在微信支付页面完成支付操作。
- 支付完成后,微信服务器会主动发送支付结果通知到商户在申请H5支付时配置的通知地址(notify_url)上。同时,也会将用户重定向回商户在前端设置的redirect_url页面。
- 处理支付结果:
- 商户服务器收到微信支付结果通知后,需要验证签名以确保消息的真实性。
- 根据支付结果更新订单状态(如标记为已支付)。
- 如果前端被重定向到了redirect_url页面,可以通过查询订单状态等方式让用户确认支付结果。
JSAPI支付的流程:
获取用户code:
- 在前端页面中,通过微信JS-SDK中的wx.login接口获取用户的临时登录凭证code。这个code是后端用来换取openid和session_key的关键。
- 具体来说,当用户进入需要支付的页面时,前端会调用wx.login接口,并监听其成功回调。在回调函数中,可以获取到微信返回的code。
发送code给后端:
- 前端将获取到的code发送给后端服务器。这一步通常通过Ajax请求或其他HTTP请求方式实现。
后端处理并返回支付参数:
- 后端接收到code后,会将其与小程序的AppID、AppSecret等凭据一起发送给微信服务器,以换取用户的openid和session_key。
- 接着,后端会根据业务需求生成预支付订单,并通过微信支付的统一下单接口(如/v3/pay/transactions/jsapi)向微信服务器发起请求。
- 微信服务器响应统一下单请求后,会返回一个包含支付相关信息的JSON对象,其中最重要的字段是prepay_id。
- 后端将这个prepay_id以及其他必要的支付参数(如时间戳、nonceStr等)进行签名打包,生成最终的支付请求参数。
前端调用支付接口:
- 前端接收到后端返回的支付请求参数后,首先需要调用微信JS-SDK的wx.config接口进行配置,注入必要的权限验证配置。
- 然后,前端调用wx.chooseWXPay接口并传入支付请求参数,即可调起微信支付界面。
处理支付结果:
- 用户在微信支付界面完成支付后,微信服务器会主动向后端发送支付结果通知。
- 同时,前端也会接收到一个支付结果的回调,但需要注意的是,前端接收到的支付结果并不可靠,因为用户可能会在支付过程中关闭页面或网络异常等原因导致回调未能正常触发。因此,前端通常会提示用户前往订单列表查看支付状态,或者设置一个“查询”按钮让用户手动查询支付状态。
查询支付状态:
- 如果前端需要主动查询支付状态,可以通过调用微信支付提供的查询接口(如/v3/pay/transactions/out-trade-no/{out-trade-no})来实现。
- 查询接口需要后端配合提供相关的订单号等信息。