Node.js实现支付宝H5支付

本文详细介绍了如何创建支付宝支付应用,包括选择接口类型、签约支付方式、配置SDK及调用API的方法。涵盖从创建应用到H5支付的全过程,适合初学者及开发者快速上手。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

1、      创建支付应用

1.1、根据需要选择接口类型,这里选择支付应用。

 

1.2、选择使用环境

 

1.3、签约当面付(线下支付)

 

2、      使用alipay-sdk

2.1、 引入服务端SDK模块

npm i alipay-sdk

 

2.2、 配置app信息

var AlipaySdk = require('alipay-sdk').default;

var aliService = require("../service/aliPay");

 

var alipaySdk = new AlipaySdk({

    appId: payConfig.ali.appId,

    privateKey: payConfig.ali.privateKey,

    alipayPublicKey: payConfig.ali.publicKey,

});

 

  • appId: String 开放平台上创建应用时生成的 appId
  • privateKey: String 应用私钥
  • alipayPublicKey: String 支付宝公钥,用于开放平台返回值的验签

 

2.3、 使用exec方法调用接口

alipaySdk.exec(method, params, options).then(result => {

    // console.log(result);

  })

参数说明:

  • 必选
    • method: String 调用的 Api,比如 alipay.system.oauth.token
  • 可选
    • params: Object Api 的请求参数(包含部分“公共请求参数”和“请求参数”)
      • bizContent: Object 可选项
        • 注意: 仅当 Api 文档的“公共请求参数”列表中存在 biz_content时,才需要通过 bizContent 设置请求参数,否则应该通过 params 传递请求参数
      • options: Object 可选项
        • validateSign: Boolean 是否对返回值验签(依赖实例化时配置的”支付宝公钥“),默认 false
        • formData: Object 文件上传类接口的请求参数,,默认 null
        • log: Log 对象,存在时会调用 info、error 方法写日志,默认 null 即不写日志
  • exec 返回值类型: Promise

例子:

let params = {bizContent: {

       outTradeNo: aliService.getRandomOrder(),

       subject:'水侠后付费取水',//交易标题

       totalAmount:money,//订单金额    

       buyerId:req.session.user.openid,

}};

 

alipaySdk.exec(payConfig.ali.orderCreate,params).then(orderResult=>{                                               

show("订单号"+order.tradeNo);                                           

 });

 

注意:

若接口文档中公共参数中有biz_content参数,那业务参数全部放在biz_content中,详见具体接口。

3、      H5支付

前端JS代码

$(document).ready(function(){

        // 页面载入完成后即唤起收银台

        // 此处${tradeNO}为模板语言语法,要用字符串代替

        tradePay("${tradeNO}");

        // 点击payButton按钮后唤起收银台

        $("#payButton").click(function() {

            tradePay("${tradeNO}");

        });

 

        // 通过jsapi关闭当前窗口,仅供参考,更多jsapi请访问

        $("#closeButton").click(function() {

           AlipayJSBridge.call('closeWebview');

        });

     });

 

    // 由于js的载入是异步的,所以可以通过该方法,当AlipayJSBridgeReady事件发生后,再执行callback方法

    function ready(callback) {

         if (window.AlipayJSBridge) {

             callback && callback();

         } else {

             document.addEventListener('AlipayJSBridgeReady', callback, false);

         }

    }

 

    function tradePay(tradeNO) {

        ready(function(){

             // 通过传入交易号唤起快捷调用方式

             AlipayJSBridge.call("tradePay", {

                  tradeNO: tradeNO

             }, function (data) {

                 if ("9000" == data.resultCode) {

                     alert("支付成功");

                 }

             });

        });

    }

 

响应说明:

 

 

4、      附录

node.js配置服务端sdk教程:https://www.npmjs.com/package/alipay-sdk

 

当面付接入教程:https://docs.open.alipay.com/194

 

 

 

名词解释:

应用网关:用于接收支付宝异步通知,例如口碑开店中,需要配置此网关来接收 开发者门店被动通知。 
授权回调地址:第三方授权或用户信息授权后回调地址。授权链接中配置的red...

 

 

 

 

 

转载于:https://www.cnblogs.com/YannYao/p/9717486.html

### 如何在 Vue 项目中集成支付宝 H5 支付功能 #### 准备工作 为了能够在 Vue 项目中顺利集成支付宝 H5 支付,开发者需先完成必要的准备工作。这包括但不限于注册成为支付宝开放平台的开发者并创建应用获取 `AppID` 和其他必要参数[^1]。 #### 创建支付请求接口 通过服务器端发起支付请求是安全的做法之一。下面是一个简单的 Node.js Express 后端服务例子用于生成预订单: ```javascript const axios = require('axios'); app.post('/createOrder', async (req, res) => { const { total_amount, subject } = req.body; try { let response = await axios({ method: 'post', url: 'https://openapi.alipay.com/gateway.do', params: { app_id: APP_ID, method: 'alipay.trade.wap.pay', format: 'JSON', charset: 'utf-8', sign_type: 'RSA2', timestamp: new Date().toISOString(), version: '1.0', notify_url: NOTIFY_URL, biz_content: JSON.stringify({ out_trade_no: generateOutTradeNo(), // 自定义交易号 total_amount, subject, product_code: "QUICK_WAP_PAY" }) } }); res.json(response.data); } catch(error){ console.error(error); res.status(500).send('Error creating order.'); } }); ``` 此代码片段展示了如何构建一个 POST 请求来调用支付宝 API 并返回响应数据给前端[^2]。 #### 前端处理逻辑 一旦获得了来自后端的服务链接,在 Vue 组件内部可以通过 JavaScript 的 `window.location.href` 或者使用 `<a>` 标签重定向至该 URL 来启动支付流程。这里给出一段简化版的前端实现方式: ```html <template> <!-- ... --> </template> <script> export default { methods: { payWithAlipay() { this.$http.post('/createOrder', { total_amount: this.totalAmount, subject: this.subject }).then((response) => { window.location.href = response.data; // 跳转到支付宝支付页面 }).catch(() => alert('Failed to create payment.')); }, } } </script> ``` 这段脚本说明了怎样发送 HTTP 请求去创建一笔新的支付记录,并依据收到的结果跳转向指定地址以继续后续操作[^3]。 #### 处理支付回调 对于支付完成后的行为控制,通常有两种方法:一是监听客户端上的支付状态变化;二是配置好通知网址让支付宝主动推送消息过来更新数据库中的订单信息。具体实施细节取决于业务需求和技术栈的选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值