Vue项目中如何具体实现微信支付与支付宝支付功能？

本文共计1000个文字，预计阅读时间需要4分钟。

目录项目中的常见支付方式支付宝支付微信支付其他常见支付方式（需支持支付宝或微信充值） 注意：本文仅从前端角度展开讲解支付宝支付。

目录

• 项目中常见的支付方式
• 支付宝支付
• 微信支付

项目中常见的支付方式

• 支付宝支付
• 微信支付
• 余额支付（也需要支付宝或微信充值）

注意：本文仅从前端角度展开讲解

支付宝支付

项目难点：

页面是h5网页，用支付宝支付必须得到支付宝授权，调用支付宝的api。

（如何授权请参照：调用支付宝api）

支付宝支付的一般过程是：

调用订单接口，获得订单号，支付金额等。
传递订单号，金额 至预支付接口
后台会返回来一个form，然后提交form自动跳转到支付宝支付页面

支付过程：

下图为为接口文档，支付接口

当我们选中支付宝，radio=1；
当我们点击支付按钮，pay()方法执行
此时我们调用后端支付接口，传入接口文档要求字段，订单号，金额等。