h5网页调用支付宝支付

1,调用依赖

支付宝开放平台官方api说的比较清楚,地址为下,还有联调
https://opendocs.alipay.com/open/29ae8cb6_alipay.trade.wap.pay?pathHash=0a6313c7&ref=api&scene=21
pom文件调用

      <dependency>
            <groupId>com.alipay.sdk</groupId>
            <artifactId>alipay-sdk-java</artifactId>
            <version>4.10.0.ALL</version>
        </dependency>

2,调用代码

  package com.java.sdk.demo;
  
  import com.alipay.api.AlipayApiException;
  import com.alipay.api.AlipayClient;
  import com.alipay.api.DefaultAlipayClient;
  import com.alipay.api.CertAlipayRequest;
  import com.alipay.api.AlipayConfig;
  import com.alipay.api.response.AlipayTradeWapPayResponse;
  import com.alipay.api.domain.AlipayTradeWapPayModel;
  import com.alipay.api.request.AlipayTradeWapPayRequest;
  import com.alipay.api.FileItem;
  import java.util.Base64;
  import java.util.ArrayList;
  import java.util.List;
  
  public class AlipayTradeWapPay {
  
      public Object alipay throws AlipayApiException {
          String privateKey = "<-- 当前帐号未登录,登录后会自动填充当前沙箱帐号的应用私钥 -->";
          String alipayPublicKey = "<-- 当前帐号未登录,登录后会自动填充当前沙箱帐号的支付宝公钥 -->";
          AlipayConfig alipayConfig = new AlipayConfig();
          alipayConfig.setServerUrl("https://openapi-sandbox.dl.alipaydev.com/gateway.do");
          alipayConfig.setAppId("<-- 当前帐号未登录,登录后会自动填充当前沙箱帐号的AppId -->");
          alipayConfig.setPrivateKey(privateKey);
          alipayConfig.setFormat("json");
          alipayConfig.setAlipayPublicKey(alipayPublicKey);
          alipayConfig.setCharset("UTF-8");
          alipayConfig.setSignType("RSA2");
          AlipayClient alipayClient = new DefaultAlipayClient(alipayConfig);
          AlipayTradeWapPayRequest request = new AlipayTradeWapPayRequest();
          AlipayTradeWapPayModel model = new AlipayTradeWapPayModel();
          model.setOutTradeNo("70501111111S001111119");
          model.setTotalAmount("9.00");
          model.setSubject("大乐透");
          model.setProductCode("QUICK_WAP_WAY");
          model.setSellerId("2088102147948060");
          request.setBizModel(model);
          AlipayTradeWapPayResponse response = alipayClient.pageExecute(request, "POST");
          // 如果需要返回GET请求,请使用
          // AlipayTradeWapPayResponse response = alipayClient.pageExecute(request, "GET");
          String pageRedirectionData = response.getBody();
          System.out.println(pageRedirectionData);
          if (response.isSuccess()) {
              System.out.println("调用成功");
              return response
          } else {
              System.out.println("调用失败");
              // sdk版本是"4.38.0.ALL"及以上,可以参考下面的示例获取诊断链接
              // String diagnosisUrl = DiagnosisUtils.getDiagnosisUrl(response);
              // System.out.println(diagnosisUrl);
              
          }
          return null;
      }
  }

response为一个form标签,提交给前端,前端做处理
返回的form标签代码

<form name="punchout_form" method="post" action="https://openapi-sandbox.dl.alipaydev.com/gateway.do?charset=UTF8&method=alipay.trade.wap.pay&sign=fj4PFFSGlRbwlAnnVq8RNg%2Fcbu86TXGa2f782xp2DEYZZeuZewyHke8vjXXjn5Cx4GSjcTMh6UiRROgx1oVB2SdtjcewIO4PVSGCapVP302lUzT0u3sDBpSdqqz73wM3JYDZgWLh0blLgccO2uSCcW2jbcABY8i02ff%2BOtuhMU7pGiZ989hs18rwF67B1vZveReRisUdlQezmMCHWqrADmKgIReVzw1t8rGqzZQ2vGYUrF4kRtpFpqk861A4dg01XJPjg4TCeMRELlguA6z03dN0Jm3BmH78t7mw5qQ8CD%2Fg97wD%2F3BsPm8BcVmMBNvGYR8fzrT8AN16rXtM9EeIsA%3D%3D&app_id=9021000133624051&sign_type=RSA2&timestamp=2023-12-25+15%3A27%3A04&alipay_sdk=alipay-sdk-java-4.35.171.ALL&format=json"> <input type="hidden" name="biz_content" value="{&quot;out_trade_no&quot;:&quot;70501111111S001111119&quot;,&quot;total_amount&quot;:&quot;9.00&quot;,&quot;subject&quot;:&quot;大乐透&quot;,&quot;product_code&quot;:&quot;QUICK_WAP_WAY&quot;,&quot;seller_id&quot;:&quot;2088102147948060&quot;}"> <input type="submit" value="立即支付" style="display:none" > </form> <script>document.forms[0].submit();</script>

3,前端处理

 $.ajax({
                       type: 'get',
                       url: 'localhost:8080/h5alipay',//后端的url
                       success: function (res) {
                            const div = document.createElement('formdiv');
                            div.innerHTML = res.body;
                            document.body.appendChild(div);
                            document.forms[0].setAttribute('target', '_self');
                            document.forms[0].submit();
                            div.remove();

                       }
                })
  • 9
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在uniapp H5实现支付宝支付,可以使用支付宝的JS API。以下是实现步骤: 1. 首先在支付宝开放平台创建一个应用,并获取到AppID和商户私钥。 2. 在uniapp项目安装 `uni-simple-router` 和 `uni-app-plus` 插件,用于页面路由和网络请求。 3. 在支付页面引入支付宝JS API的SDK,可以通过以下代码引入: ```html <script src="https://appx/web-view.min.js"></script> <script src="https://appx/alipayjsapi.min.js"></script> ``` 4. 在页面编写支付宝支付的代码,可以参考以下代码: ```javascript // 封装支付宝支付函数 function aliPay(orderInfo) { return new Promise((resolve, reject) => { // 调用支付宝JS API的支付接口 ap.tradePay({ orderStr: orderInfo, }, (res) => { if (res.resultCode === '9000') { resolve(res); } else { reject(res); } }); }); } // 点击支付按钮时调用支付宝支付函数 async function pay() { try { // 从服务器获取订单信息 const orderInfo = await uni.request({ url: 'http://your-server.com/get-order-info', method: 'POST', dataType: 'json', }); // 调用支付宝支付函数 const result = await aliPay(orderInfo); console.log('支付成功', result); } catch (error) { console.error('支付失败', error); } } ``` 注意,上述代码的 `orderInfo` 是从服务器获取的订单信息,需要根据实际情况进行修改。 5. 最后,在支付页面添加支付按钮,并绑定点击事件: ```html <button @tap="pay">支付</button> ``` 以上就是在uniapp H5实现支付宝支付的基本步骤,希望对你有帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值