H5页面，跳转到支付宝app,调起jsapi支付

灼灼桃花夭

已于 2024-10-25 10:52:42 修改

阅读量1.8k

点赞数 3

文章标签： javascript

于 2024-10-21 14:26:43 首次发布

本文链接：https://blog.csdn.net/qq_39835505/article/details/143111389

版权

参考网址
https://blog.csdn.net/sun5769675/article/details/89634633
支付宝官方文档
http://myjsapi.alipay.com/jsapi/h5app-lifecycle.html

支付宝的红包功能让一批人先富了起来，很多大大小小的网站都嵌入了领红包的脚本一点就直接唤起了支付宝，并且打开领红包的页面，那么这个功能是怎么实现的呢？

支付宝提供了专门的接口通过scheme启动，scheme可以理解为一种特殊的URI，格式与URI相同，具体使用如下：

支付宝客户端的标准scheme为：alipays://platformapi/startapp?appId=

如果是某些运营页之类的单独页面，没有自己的appId，可以使用Nebula容器的通用浏览器模式appId=20000067 来启动，同时将需要打开的H5页面url经过encode编码后设置到url参数内。

例如：alipays://platformapi/startapp?appId=20000067&url=http%3A%2F%2Fm.taobao.com

在scheme中配置的启动参数需要与appId同级，如果启动参数的值包含特殊字符，必须注意需要经过encode后再传递。

直接将这端代码放到html的标签的href属性中就可以了，支持标准scheme的浏览器都支持该功能。

例如： < a href=“alipays://platformapi/startapp?appId=20000067&url=http%3A%2F%2Fm.taobao.com”>点击</ a>

	< a href="alipays://platformapi/startapp?appId=20000067&url=https://www.baidu.com">点击百度</ a>

然后在打开的页面内使用，AlipayJSBridge 调起

  // 调起支付宝支付
  if (typeof AlipayJSBridge !== 'undefined') {
       AlipayJSBridge.call('tradePay', {
           tradeNO: data.data.chlRetParam.trade_no // 这里填写真实的交易号
       }, function(result) {
           // 处理支付结果
           if (result.resultCode === '9000') {
               alert('支付成功');
           } else {
               alert('支付失败: ' + result.resultCode);
           }
       });
   } else {
       alert('当前环境不支持 AlipayJSBridge，请确保在支付宝客户端中打开此页面');
   }

例如

<!DOCTYPE html><html>  <head> 
<style>
    * {
        font-size: 60px;
    }
</style>

<script src="/index_files/jquery.js"></script>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
</head>
<body>
</body>
</html>
	<script type="text/javascript">


    // VConsole 默认会挂载到 `window.VConsole` 上
    var vConsole = new window.VConsole();
  
    const url = window.location.href;
    var temp1 = url.split('=');
    var outorder = temp1[1];     // 获取到的订单号
       
        
	console.log('接收参数');
	
	console.log(outorder);

		 // 调起支付宝支付
        if (typeof AlipayJSBridge !== 'undefined') {
            AlipayJSBridge.call('tradePay', {
                tradeNO: outorder // 这里填写真实的交易号
                // tradeNO: '202410212200144209144078087'
            }, function(result) {
                
                alert('订单号: ' + outorder);
                alert(JSON.stringify(result));
                
                // 处理支付结果
                if (result.resultCode === '9000') {
                    alert('支付成功');
                } else if (result.resultCode === '6001') {
                    alert('用户取消支付');
                } else {
                    alert('支付失败: ' + result.resultCode);
                }
            });
        } else {
            alert('当前环境不支持 AlipayJSBridge，请确保在支付宝客户端中打开此页面');
        }

</script>