Vue 项目中集成微信支付和支付宝支付

• 实现在 Vue 项目中接入微信和支付宝支付功能,是很多业务场景会碰到的需求。本文将通过示例介绍如何使用相关 SDK 实现支付接口的对接。

准备工作

首先需要在后台申请微信支付和支付宝支付所需的参数,包括商户 ID、密钥、回调地址等。并在服务端实现支付结果的校验接口。

• 前端主要负责调用支付 SDK 发起支付,这需要安装相关依赖:

# 微信支付
yarn add wechat-pay

# 支付宝支付
yarn add alipay-sdk

实现微信支付

• 导入依赖,调用相关 API 进行发起支付:

// 微信支付
import wxpay from 'wechat-pay';

let payment = await wxpay.wx.unifiedOrder(); 

if(payment.return_code === 'SUCCESS') {
  location.href = payment.mweb_url // 跳转到微信内置浏览器  
}

实现支付宝支付

• 支付宝支付的对接类似,也是通过调用 SDK 提供的方法:

// 支付宝支付
import AlipaySdk from 'alipay-sdk';

let result = await AlipaySdk.pay({
  // 支付参数
});

if(result.msg === 'success') {
  // 支付成功
}

支付宝也会提供支付链接,可以通过 URL Scheme 唤起支付。

测试与运营

收款等功能我们封装了组件…
详情请见：封装 Vue 支付组件 - 收付一体

以上就是在 Vue 项目中实现微信和支付宝支付对接的主要步骤,其他扩展功能可继续迭代优化。

欢迎留言交流和提问!