支付宝支付

年纪轻轻只想躺平

已于 2024-04-12 17:46:16 修改

阅读量422

点赞数 5

文章标签： uni-app javascript 前端 vue.js

于 2024-04-06 23:23:03 首次发布

本文链接：https://blog.csdn.net/chen_jigang/article/details/137441488

版权

本文详细描述了在电商应用中，从选择商品到完成支付的流程，包括商品价格计算、订单确认、后端接口调用、支付宝支付接口使用以及沙箱模式设置的过程，重点介绍了如何使用AlipaySDK在Express框架中实现支付功能。

摘要由CSDN通过智能技术生成

注：选择商品–点击结算–进入订单页–确认订单–向后端发送请求–唤起付款方式–选择付款方式–去付款–输入密码–付款成功

购物车
- 选择商品，计算出商品的价格，点击【结算】，跳转订单页
订单页
- 查看订单详情，点击【支付】
- 判断收货地址
- 发送请求，后端返回订单号
- 请求成功
  - 清空购物车
  - 获取订单信息
  - 进入待支付页
待支付页
- 获得：订单ID，订单号（状态：待支付，已支付，过期，取消订单）
- 选择支付方式（或者默认选择一种，但用户可以修改），后端对接

支付过程

后端对接支付平台（支付宝、微信等）

后端对接（支付宝沙箱模式）：
1. 支付宝扫码登录：https://openhome.alipay.com/platform/appDaily.htm
2. 进入沙箱环境==》沙箱应用==》填写信息（公钥）
3. 下载工具（支付宝开放平台开发助手）：https://opendocs.alipay.com/open/291/introduce
4. 工具扫码登录，生成密钥（公钥、私钥），将生成的公钥复制粘贴到【2】
5. 对接完毕

后端sdk对接（Express框架、支付宝开放平台 Alipay SDK for Node.js）

官网（对接流程）
- github：https://github.com/alipay/alipay-sdk-nodejs-all
- 语雀：https://www.yuque.com/chenqiu/alipay-node-sdk/config-sdk

代码相关

npm install alipay-sdk

// 以下信息从【https://openhome.alipay.com/platform/appDaily.htm】获取
// 应用私钥：【支付宝开放平台开发助手】获取
// 期间确保【工具】应用公钥和【网站】的应用公钥一致

const AlipaySdk = require( 'alipay-sdk' ).default;
const alipaySdk = new AlipaySdk({
	// appid
	appId: '2021000117667979',
	//签名算法
	signType: 'RSA2' ,
	//支付宝网关
	gateway : 'https://openapi.alipaydev.com/ gateway.do',
	//支付宝公钥
	alipayPublicKey: 'xxx',
	//应用私钥
	privateKey : 'xxx'
});
module.exports = alipaySdk;

//引入支付宝沙箱配置
const alipaySdk = require('../db/alipay.js');
const AlipayFormData = require('alipay-sdk/lib/form').default;

router.post('/api/payment', (req, res, next)=>{
	// 接收前端传递的订单号
	let orderId = req.body.orderId;
	// 总价
    let price = req.body.price;

	const formData = new AlipayFormData()
	// 调用get方法
	formData.setMethod ('get'),
	// 支付时的信息
	formData.addField( 'bizContent', {
		outTradeNo: 'xxx', //订单号
		productCode: 'FAST_INSTANT__TRADE_PAY', // 固定，写死的
		totalAmount: 'xxx', //金额
		subject: 'xxx', //商品名称
		body: 'xxx', //商品描述，可选
	})
	
	// 支付成功或者失败打开的页面
	// 当前端收到下方【result】的返回后，根据网址去支付，支付后跳转的页面
	// 想要跳转去App【微信、支付宝】支付，需要企业支付而非沙箱支付
    formData.addField( 'returnUrl', '页面地址xxx' );
    
    // paymentUrl 该地址携带 商品价格 等相关参数
    const result = alipaySdk.exec(
    	'alipay.trade.page.pay',
    	{},
    	{ fromData: fromData }
    );
	result.then(resp=>{
		res.send({
			data:{
				code: 200,
				success: true,
				paymentUrl: resp
			}
		})
	})
	
})

// uniapp前端函数
goPayment(){
	uni.request({
		url: 'xxx/api/payment',
		method: 'POST',
		data: {
			// 订单号
			orderId: this.orderId,
			// 总价
            price：this.price
		},
		success: res=>{
			// 就能收到后端返回的url地址了
			// uniapp不支持沙箱的唤醒支付，可以去浏览器打开,打开失败可开启【无痕】
			console.log(res.data.paymentUrl)
		}
	})
}