微信支付全攻略：前端视角下的小程序、H5与JSAPI支付流程

微信支付全攻略：前端视角下的小程序、H5与JSAPI支付流程

引言

微信支付作为当下最流行的移动支付方式之一，广泛应用于各类应用场景中。对于前端开发者而言，掌握微信支付的流程至关重要。本文将从前端角度，详细梳理小程序支付、H5支付及JSAPI支付的流程，帮助开发者快速上手。

一、微信支付基础

1. 前提条件

• 开通微信商户号：使用微信支付的前提是开通微信商户号，这通常由公司财务负责。
• 服务号/小程序认证：对于JSAPI支付，需要开通微信服务号；对于小程序支付，则需要开通小程序，并通过企业认证。
• 关联商户号：在微信后台进行微信支付菜单的关联设置。

2. 支付方式概述

• JSAPI支付：微信内网页支付，适用于公众号场景。
• 小程序支付：在小程序中直接支付，用户体验流畅。
• H5支付：在外部浏览器中调起微信支付，适用于非微信环境。

二、JSAPI支付流程

1. 创建订单

前端商品页创建订单，后端统一下单后返回orderId。

2. 跳转到支付页

前端带着orderId跳转到支付页，支付页获取code（通过wx.login()获取）。

3. 发送支付请求

将orderId和code发送给后端，后端解析code获取openid，并生成支付所需的数据（如wxData），包括wx.config和wx.chooseWXPay接口的数据。

4. 调用支付接口

前端先调用wx.config()配置JS-SDK，然后调用wx.chooseWXPay()拉起支付页面。

5. 支付结果处理

支付状态通过后端查询，前端根据支付结果进行相应的页面跳转或提示。

三、小程序支付流程

1. 创建订单

小程序端请求创建订单接口，后端统一下单获取orderId并返回。

2. 获取支付数据

小程序端通过wx.login()获取code，然后带着code和orderId请求后端接口，获取支付所需的数据（如prepay_id）。

3. 调用支付接口

小程序端调用wx.requestPayment()接口，传入支付数据，直接拉起支付页面。

4. 支付结果处理

支付完成后，wx.requestPayment()会返回支付结果，前端根据结果进行相应的处理。

四、H5支付流程

1. 创建订单

前端请求创建订单接口，后端统一下单获取orderId并返回。

2. 获取支付URL

前端带着orderId请求支付接口，后端返回支付跳转的URL（mweb_url）。

3. 跳转到微信支付

前端通过location.href跳转到mweb_url，微信自动调用支付页面。

4. 支付结果处理

支付完成后，用户会返回到原页面，前端需要刷新页面获取最新的支付状态，并设置“我已支付”按钮供用户查询。

五、注意事项

1. 支付域名设置：在商户平台设置正确的支付域名，确保支付页面可以正常访问。
2. 调试环境：H5支付调试需要在线上环境进行，可以使用内网穿透工具（如Ngrok或花生壳）辅助调试。
3. 安全性：支付过程中涉及敏感信息，务必确保数据传输的安全性，如使用HTTPS协议。
4. 错误处理：在支付过程中，要妥善处理各种异常情况，如网络错误、支付失败等，并给出明确的提示信息。

六、总结

微信支付作为移动支付的佼佼者，其支付流程涉及前端和后端的紧密配合。本文从前端角度详细梳理了小程序支付、H5支付及JSAPI支付的流程，希望能够帮助开发者快速理解并实现微信支付功能。在实际开发中，还需要根据