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();

                       }
                })
移动端H5调用微信支付宝支付是一种简单方便的支付方式。用户在网页中选择微信或支付宝支付后,会被引导到微信或支付宝支付页面,输入支付密码或确认支付即可完成支付。对于商家来说,只需在网页中添加相应的支付接口和配置相关信息,就可以实现H5调用微信支付宝支付功能。这种支付方式适用于各类移动端应用,如电商平台、小程序、线下商户等。 在实现H5调用微信支付宝支付的过程中,需要注意保障支付安全和用户隐私。商家需要通过微信支付宝的官方平台获得相关权限和密钥,确保支付接口的可信性和安全性。同时,还需要遵守相关的法律法规和隐私政策,保护用户的个人信息和支付数据。另外,商家还可以通过设置不同的支付方式、优惠券等方式来吸引用户,提高支付转化率和用户满意度。 在移动端H5调用微信支付宝支付的过程中,还需要考虑支付的实时性和用户体验。商家需要保证支付的及时性和可靠性,避免因网络延迟或其他原因导致支付失败或出现异常情况。同时,还需要考虑用户的支付习惯和支付环境,提供简洁明了的支付流程和友好的界面设计,提高用户支付的便捷性和舒适度。通过合理规划和技术实现,移动端H5调用微信支付宝支付可以成为一种便捷、安全、高效的支付方式,为用户和商家带来更好的支付体验和商业价值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值