周亚博的个人博客

  • 首页
  • 盛夏光年
  • 陪风去荡
  • 布响丸啦
我频繁记录着 因为生活值得
  1. 首页
  2. 盛夏光年
  3. 正文

支付宝沙箱实现支付功能

2022-09-18 97点热度 1人点赞 0条评论

对接支付宝沙箱实现网页支付

一、基本步骤

支付有四种状态:待支付、未支付、支付成功、支付失败

1、点击结算购物车

  • 生成一个待支付的订单,后端会返回一个订单号,可以查询订单状态
  • 跳转到提交订单页面

2、点击提交订单

  • 发送一次请求,将订单号传递给后端,后端记录订单状态的改变
  • 发送支付请求,后端返回一个url,打开这个支付链接进行支付

3、支付成功/失败

  • 支付完整会跳转页一个页面,前端再请求一次,获取支付结果状态

二、对接支付宝沙箱

发送支付请求,需要携带请求头

'Content-Type': 'application/x-www-form-urlencoded'

1、进入支付宝沙箱网站

沙箱环境 - 支付宝文档中心

2、填写个人信息,入驻开放平台

3、下载支付宝开放平台开发助手

4、打开开发助手工具,设置

image-202209171842464945、生成密钥后回到页面进行配置,设置应用公钥

沙箱环境

image-20220917184744350

image-20220917200403359

6、node环境的SDK

Github地址/支付宝开放平台 Alipay SDK for Node.js

语雀地址/SDK 配置

三、项目使用

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)
      /**
       * 这里的返回结果就包含支付的结果信息
       所以需要根据结果不同对数据库的状态进行不同的操作 
      */
    })
  })
})

返回结果中包含状态码 | 支付金额 | 时间等信息

image-20220917220741910

在前端跳转后页面的created生命周期中调用该接口

以地址中out_trade_no 和 trade_no两条数据作为参数

得到返回的支付状态在页面展示不同的提示


| responseCode.trade_status有四种不同的状态

  • WAIT_BUYER_PAY —— 支付宝有交易记录,没有付款
  • TRADE_CLOSED —— 交易关闭
  • TRADE_FINISHED —— 交易完成
  • TRADE_SUCCESS —— 交易完成

不同responseCode.code也表示不同的状态

  • 40004 —— 交易不存在
  • 10000 —— 表示正常进行交易

标签: SDK 支付 支付宝 沙箱
最后更新:2022-09-18

粥呀Bo

所谓惊喜,就是苦苦等候的兔子来了,后面却跟着狼

点赞
< 上一篇
下一篇 >

文章评论

取消回复
目录
  • 一、基本步骤
  • 二、对接支付宝沙箱
  • 三、项目使用
    • 1、后端配置
    • 2、后端支付接口
    • 3、前端跳转
    • 4、后端验证结果

COPYRIGHT © 2022 zhouyaker.cn. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

陕ICP备2022009272号