对接支付宝沙箱实现网页支付
一、基本步骤
支付有四种状态:待支付、未支付、支付成功、支付失败
1、点击结算购物车
- 生成一个待支付的订单,后端会返回一个订单号,可以查询订单状态
- 跳转到提交订单页面
2、点击提交订单
- 发送一次请求,将订单号传递给后端,后端记录订单状态的改变
- 发送支付请求,后端返回一个url,打开这个支付链接进行支付
3、支付成功/失败
- 支付完整会跳转页一个页面,前端再请求一次,获取支付结果状态
二、对接支付宝沙箱
发送支付请求,需要携带请求头
'Content-Type': 'application/x-www-form-urlencoded'
1、进入支付宝沙箱网站
2、填写个人信息,入驻开放平台
3、下载支付宝开放平台开发助手
4、打开开发助手工具,设置
5、生成密钥后回到页面进行配置,设置
应用公钥
6、node环境的SDK
Github地址/支付宝开放平台 Alipay SDK for Node.js
三、项目使用
1、后端配置
安装SDK
npm i alipay-sdk -S
创建一个配置文件,内容自行填写
/**
* alipay.js
*/
// 引入sdk
const AlipaySdk = require('alipay-sdk').default
// sdk相关配置
const alipaySdk = new AlipaySdk({
// AppID
appId: '',
// 签名算法
signType: 'RSA2',
// 支付宝网关
gateway: '',
// 支付宝公钥
alipayPublicKey: '',
// 应用私钥
privateKey: ''
})
module.exports = alipaySdk
2、后端支付接口
// 支付宝配置文件
const alipaySdk = require('../db/alipay.js')
// 这个也必须引入,注意要添加default
const AlipayFormData = reqire('alipay-sdk/lib/form').default
// 发起支付
router.post('/api/payment', function (req, res, next) {
// 接收相关参数
let { orderId, name, price } = req.body
// 开始对接支付宝API
const formData = new AlipayFormData()
// 调用 setMethod 并传入 get,会返回可以跳转到支付页面的 url
formData.setMethod('get')
// 支付时的信息
formData.addField('bizContent', {
// 订单号
outTradeNo: orderId,
productCode: 'FAST_INSTANT_TRADE_PAY',
// 总价
totalAmount: price,
// 商品名称
subject: name,
// 描述,可选
// body: '商品详情'
})
// 支付成功或者失败跳转的链接
formData.addField('returnUrl', 'http://localhost:8080/payment')
const result = alipaySdk.exec(
'alipay.trade.page.pay',
{},
{ formData: formData },
)
// 对接支付宝成功返回数据
result.then(r => {
res.send({
data: {
code: 200,
success: true,
msg: '支付中',
// 这就是返回的支付链接,前端使用window.location.href=paymentUrl打开链接
paymentUrl: r
}
})
})
})
3、前端跳转
前端打开后端返回的地址,地址会包含一些参数,可以得到支付信息
http://localhost:8080/payment?charset=utf-8
&out_trade_no=2022091722331727 这是一个重要参数
&method=alipay.trade.page.pay.return
&total_amount=238.00&sign=c26kfIyyvltJUXNHxUyAlklIKf%2BxSdAvzHC4pi1I3OuU8hFSaliiIzPKVXtDS6lWk6KVyEONtHh1TZ%2Bpg531NvZcHwfzSHGRdydbsAbbNiI258lby5E5M7lHWZFALdsfrFtxrF3IPKgqF%2BjG2l1%2BjjLkW%2BGrw0mwpO4HbkZASNTMqlqYKqsE9%2Baha5U4K4l5SvFZpVW5HYQpRW2uyv%2F3LoUrf9WFRWVsFW%2BgHLQ5wqtJUD2ARXOO5wjmHvU9k4ycvn8Vu9M7%2FNcAblw06THfBiE34GQ9Zysj3%2FMYPOA7Ma9OfDkNQiU1Gx%2Bg%3D%3D
&trade_no=2022091200147228050672455 这是一个重要参数
&auth_app_id=202100011667351&version=1.0
&app_id=202100012167351&sign_type=RSA2
&seller_id=2088621993217390
×tamp=2022-09-17%2021%42%3A24
4、后端验证结果
验证支付结果是成功还是失败
router.post('/api/successPayment', function (req, res, next) {
let token = req.headers.token
let tokenObj = jwt.decode(token)
let { out_trade_no, trade_no } = req.body
//支付宝配置
const formData = new AlipayFormData()
// 后端校验,是否支付成功
formData.setMethod('get')
//支付时信息
formData.addField('bizContent', {
out_trade_no,
trade_no
})
//返回promise
const result = alipaySdk.exec(
'alipay.trade.query',
{},
{ formData: formData },
)
//后端请求支付宝进行验证
result.then(resData => {
axios({
method: 'GET',
url: resData
}).then(result => {
console.log(result)
/**
* 这里的返回结果就包含支付的结果信息
所以需要根据结果不同对数据库的状态进行不同的操作
*/
})
})
})
返回结果中包含状态码 | 支付金额 | 时间
等信息
在前端跳转后页面的created生命周期中调用该接口
以地址中out_trade_no 和 trade_no
两条数据作为参数
得到返回的支付状态在页面展示不同的提示
| responseCode.trade_status有四种不同的状态
- WAIT_BUYER_PAY —— 支付宝有交易记录,没有付款
- TRADE_CLOSED —— 交易关闭
- TRADE_FINISHED —— 交易完成
- TRADE_SUCCESS —— 交易完成
不同responseCode.code也表示不同的状态
- 40004 —— 交易不存在
- 10000 —— 表示正常进行交易
文章评论