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

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

1. 前提条件

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

2. 支付方式概述

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

1. 创建订单

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

2. 跳转到支付页

前端带着跳转到支付页，支付页获取（通过获取）。

3. 发送支付请求

将和发送给后端，后端解析获取，并生成支付所需的数据（如），包括和接口的数据。

4. 调用支付接口

前端先调用配置JS-SDK，然后调用拉起支付页面。

5. 支付结果处理

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

1. 创建订单

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

2. 获取支付数据

小程序端通过获取，然后带着和请求后端接口，获取支付所需的数据（如）。

3. 调用支付接口

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

4. 支付结果处理

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

1. 创建订单

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

2. 获取支付URL

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

3. 跳转到微信支付

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

4. 支付结果处理

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

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