支付宝支付-手机浏览器H5支付

前言

支付宝支付—沙箱环境使用
支付宝支付-支付宝PC端扫码支付
支付宝支付-手机浏览器H5支付「本文

手机浏览器支付,用户在安装支付宝APP的情况下,调用手机网站支付接口默认会唤起支付宝钱包支付,接下来通过运行官方Demo进行测试。

本文开发环境:IDEA + Tomcat8.5 + 支付宝沙箱环境*

补充:调用沙箱环境接口,需要安装沙箱环境下的支付宝APP,不了解的小伙伴可以参考上方 支付宝支付—沙箱环境使用

下载运行测试Demo

官方Demo下载链接:手机网站支付

下载后导入 IDEA 中后需要调整的参数如下:

AlipayConfig.java

public class AlipayConfig {    // 商户appid    public static String APPID = "2016101700705301";    // 私钥 pkcs8格式的    public static String RSA_PRIVATE_KEY = "";    // 服务器异步通知页面路径 需http://或者https://格式的完整路径,不能加?id=123这类自定义参数,必须外网可以正常访问    public static String notify_url = "http://ngrok.sscai.club/alipay_trade_wap_pay_java_utf_8_war_exploded/notify_url.jsp";    // 页面跳转同步通知页面路径 需http://或者https://格式的完整路径,不能加?id=123这类自定义参数,必须外网可以正常访问 商户可以自定义同步跳转地址    public static String return_url = "http://ngrok.sscai.club/alipay_trade_wap_pay_java_utf_8_war_exploded/return_url.jsp";    // 请求网关地址    public static String URL = "https://openapi.alipaydev.com/gateway.do";    // 编码    public static String CHARSET = "UTF-8";    // 返回格式    public static String FORMAT = "json";    // 支付宝公钥    public static String ALIPAY_PUBLIC_KEY = "";    // 日志记录目录    public static String log_path = "/log";    // RSA2    public static String SIGNTYPE = "RSA2";}

几个主要的参数:

  1. APPID :商户appid
  2. RSA_PRIVATE_KEY:应用私钥
  3. ALIPAY_PUBLIC_KEY:支付宝公钥「注意不是应用公钥」

这几个参数不清楚的,可以看一下 沙箱环境使用,或者看一下官方文档参数说明

项目启动后如下图所示:

Maven项目中的使用

Maven中的使用其实跟上篇 支付宝支付-支付宝PC端扫码支付 代码非常的像,换汤不换药,改几个参数,具体如下:

pom.xml中引入支付宝SDK依赖

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

配置可以单独创建一个类,静态初始化参数:

public class AlipayConfig {

    // [沙箱环境]应用ID,您的APPID,收款账号既是您的APPID对应支付宝账号    public static String app_id = "";

    // [沙箱环境]商户私钥,您的PKCS8格式RSA2私钥    public static String merchant_private_key = "";

    // [沙箱环境]支付宝公钥,查看地址:https://openhome.alipay.com/platform/keyManage.htm 对应APPID下的支付宝公钥。    public static String alipay_public_key = "";

    // [沙箱环境]服务器异步通知页面路径  需http://格式的完整路径,不能加?id=123这类自定义参数,必须外网可以正常访问    public static String notify_url = "http://ngrok.sscai.club/alipay/aliPayNotify_url";

    // [沙箱环境]页面跳转同步通知页面路径 需http://格式的完整路径,不能加?id=123这类自定义参数,必须外网可以正常访问    public static String return_url = "http://ngrok.sscai.club/index.html#/alipay/success";

    // [沙箱环境]    public static String gatewayUrl = "https://openapi.alipaydev.com/gateway.do";}

至于接口啥的基本就是可以参考上方运行的Demo了。

简单看看生成支付宝订单接口「没有使用开源SDK」。

@Transactionalpublic String alipayOrder(AlipayOrderRequest alipayOrderRequest) throws AlipayApiException {

    //获得初始化的AlipayClient    AlipayClient alipayClient = new DefaultAlipayClient(AlipayConfig.gatewayUrl,            AlipayConfig.app_id,            AlipayConfig.merchant_private_key,            "json",            AlipayConfig.charset,            AlipayConfig.alipay_public_key,            AlipayConfig.sign_type);

    //设置请求参数    String payType = alipayOrderRequest.getPayType();

    // wap    AlipayTradeWapPayRequest alipayWapRequest = new AlipayTradeWapPayRequest();    alipayWapRequest.setReturnUrl(AlipayConfig.return_url);    alipayWapRequest.setNotifyUrl(AlipayConfig.notify_url);

    //商户订单号,商户网站订单系统中唯一订单号,必填    String out_trade_no = alipayOrderRequest.getWidOutTradeNo();    //付款金额,必填    String total_amount = alipayOrderRequest.getWidTotalFee();    //订单名称,必填    String subject = alipayOrderRequest.getWidSubject();    //商品描述,可空    String body = alipayOrderRequest.getWIDbody();

    //拼接参数    alipayWapRequest.setBizContent("{\"out_trade_no\":\""+ out_trade_no +"\","        + "\"total_amount\":\""+ total_amount +"\","        + "\"subject\":\""+ subject +"\","        + "\"body\":\""+ body +"\","        + "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"}");

    // 发起请求    return alipayClient.pageExecute( alipayWapRequest).getBody();}

手机网站支付接口调用后返回的也是一个 Form 表单,也就是 result 实际是一段 Html 代码,然后把 result 传给前段调用即可,下面是返回的 Form 的一个示例:

  <form name="punchout_form" method="post" action="https://openapi.alipaydev.com/gateway.do?charset=UTF-8&method=alipay.trade.wap.pay&sign=xx&return_url=http%3A%2F%2Fngrok.sscai.club%2Falipay_trade_wap_pay_java_utf_8_war_exploded%2Freturn_url.jsp&notify_url=http%3A%2F%2Fngrok.sscai.club%2Falipay_trade_wap_pay_java_utf_8_war_exploded%2Fnotify_url.jsp&version=1.0&app_id=2016101700705301&sign_type=RSA2&timestamp=2020-01-08+14%3A09%3A58&alipay_sdk=alipay-sdk-java-3.3.0&format=json">    <input type="hidden" name="biz_content" value="{&quot;body&quot;:&quot;购买测试商品0.01元&quot;,&quot;out_trade_no&quot;:&quot;20201814955421&quot;,&quot;product_code&quot;:&quot;QUICK_WAP_WAY&quot;,&quot;subject&quot;:&quot;手机网站支付测试商品&quot;,&quot;timeout_express&quot;:&quot;2m&quot;,&quot;total_amount&quot;:&quot;0.01&quot;}" />    <input type="submit" value="立即支付" style="display:none" />   </form>

怎么调用呢?下面是一段我在vue中的测试代码片段,前段接收到后端返回的 Form 表单进行提交:

const div = document.createElement(‘div‘);console.log("我是后端返回的数据:"+res.result)div.innerHTML = res.result;document.body.appendChild(div);console.log("punchout_form:"+document.forms.punchout_form)document.forms.punchout_form.submit();

支付成功后会自动重定向到配置的跳转界面,由后端的的 return_url 参数控制。
再看看支付成功后的回调接口「没有使用开源的SDK演示」:

public String alipaynotify(Model model, HttpServletRequest request) {

    log.info("支付宝异步回调 ------------beg-----------");    String result = "fail";    //获取支付宝POST过来反馈信息    /* *     * 功能:支付宝服务器异步通知页面     * 说明:     * 以下代码只是为了方便商户测试而提供的样例代码,商户可以根据自己网站的需要,按照技术文档编写,并非一定要使用该代码。     * 该代码仅供学习和研究支付宝接口使用,只是提供一个参考。     */    Map<String, String> params=this.getAlipayRequest(request);    if(params == null || params.size()==0){        BufferedReader bufferReader = null;        StringBuilder sb = new StringBuilder();        try {            bufferReader = new BufferedReader(request.getReader());

            String line = null;            while ((line = bufferReader.readLine()) != null) {                sb.append(new String(line.getBytes("ISO-8859-1"), "utf-8"));            }        } catch (IOException e) {            e.printStackTrace();        }        String body= null;        try {            body = URLDecoder.decode(sb.toString(),"UTF-8");        } catch (UnsupportedEncodingException e) {            e.printStackTrace();        }        params=UriComponentsBuilder.newInstance().query(body).build().getQueryParams().toSingleValueMap();    }    boolean signVerified =false;    try {        signVerified = AlipaySignature.rsaCheckV1(params, AlipayConfig.alipay_public_key, AlipayConfig.charset, AlipayConfig.sign_type);    } catch (AlipayApiException e1) {        // TODO Auto-generated catch block        log.error("由于"+e1.getErrMsg()+"返回给支付宝系统的结果result:fail");        model.addAttribute("result", "fail");        return result;    } //调用SDK验证签名

    //——请在这里编写您的程序(以下代码仅作参考)——

        /* 实际验证过程建议商户务必添加以下校验:        1、需要验证该通知数据中的out_trade_no是否为商户系统中创建的订单号,        2、判断total_amount是否确实为该订单的实际金额(即商户订单创建时的金额),        3、校验通知中的seller_id(或者seller_email) 是否为out_trade_no这笔单据的对应的操作方(有的时候,一个商户可能有多个seller_id/seller_email)        4、验证app_id是否为该商户本身。        */    log.error("支付宝验证签名:---------------------------------"+signVerified);    if(signVerified) {//验证成功        //商户订单号        //交易状态        log.info("支付宝异步回调验签成功!");        String trade_status = params.get("trade_status");

        if("TRADE_FINISHED".equals(trade_status)){            //判断该笔订单是否在商户网站中已经做过处理            //如果没有做过处理,根据订单号(out_trade_no)在商户网站的订单系统中查到该笔订单的详细,并执行商户的业务程序            //如果有做过处理,不执行商户的业务程序

            //注意:            //退款日期超过可退款期限后(如三个月可退款),支付宝系统发送该交易状态通知            try {                // 在这里处理支付成功后的操作,比如修改订单状态等等                coding...                result = "success";            } catch (Exception e) {                log.error(e.getMessage());                result = "fail";            }        }else if ("TRADE_SUCCESS".equals(trade_status)){            //判断该笔订单是否在商户网站中已经做过处理            //如果没有做过处理,根据订单号(out_trade_no)在商户网站的订单系统中查到该笔订单的详细,并执行商户的业务程序            //如果有做过处理,不执行商户的业务程序

            //注意:            //付款完成后,支付宝系统发送该交易状态通知            try {                // 在这里处理支付成功后的操作,比如修改订单状态等等                coding...                result = "success";            } catch (Exception e) {                log.error(e.getMessage());                result = "fail";            }        }else{            result = "fail";        }    }else {//验证失败        result = "fail";        //调试用,写文本函数记录程序运行情况是否正常        //String sWord = AlipaySignature.getSignCheckContentV1(params);        //AlipayConfig.logResult(sWord);        log.debug("支付宝异步回调验签失败");    }    log.debug("异步回调返回给支付宝系统的结果result:"+result);

    model.addAttribute("result", result);    log.info("支付宝异步回调  -------------end ------------");    return result;}

该方法返回给支付宝的 resultsuccessfail 两个结果。
从以上看来,其实不难发现支付宝支付是非常简单的,尽管我上边贴了大量的代码,其实采用开源SDK的话可以更加缩减、美化一些,如下是支付成功的截图。

ok,这篇文章就到这结束了,上边并没有详细介绍接口调用、参数说明等,详细介绍请移步官方文档:https://docs.open.alipay.com/60/104790/

本文源码下载

可运行的官方手机网站支付Demohttps://www.lanzous.com/i8oe2sb

求关注,求推荐

博客地址:https://www.cnblogs.com/niceyoo

求关注??,求推荐??,如果觉得这篇文章有点东西,不妨左上角关注一下我。

原文地址:https://www.cnblogs.com/niceyoo/p/12209869.html

时间: 2024-10-07 08:49:53

支付宝支付-手机浏览器H5支付的相关文章

支付宝支付之扫码支付(电脑网站支付)、H5支付(手机网站支付)相关业务流程分析总结

前言 在上一篇文章<微信支付之扫码支付.公众号支付.H5支付.小程序支付相关业务流程分析总结>中,分析和总结了微信支付相关支付类型的业务流程,这里作为与微信支付平起平坐不相伯仲的支付宝支付,当然也是每个公司少不了的第三方支付接入选择. 因此,本篇文章主要分析和总结支付宝支付中的扫码支付.H5支付相关业务流程. 概述 1. 电脑网站支付 电脑网站支付,也称扫码支付,是专门针对电脑而开发的一种支付方式,既在网页展示一个动态生成的支付二维码,用户通过手机支付宝扫码以后可实现支付功能的一种支付方式.

微信h5支付demo微信H5支付demo非微信浏览器支付demo微信wap支付

一.首先先确定H5支付权限已经申请!(需要微信h5支付demo的可以加 851 488 243 备注:h5支付) 二.开发流程 1.用户在商户侧完成下单,使用微信支付进行支付 2.由商户后台向微信支付发起下单请求(调用统一下单接口)注:交易类型trade_type=MWEB 3.统一下单接口返回支付相关参数给商户后台,如支付跳转url(参数名"mweb_url"),商户通过mweb_url调起微信支付中间页 4.中间页进行H5权限的校验,安全性检查(此处常见错误请见下文) 5.如支付成

支付宝支付-支付宝PC端扫码支付

前言 支付宝支付—沙箱环境使用支付宝支付-支付宝PC端扫码支付「本文」支付宝支付-手机浏览器H5支付「待写」 PC端扫码支付,其实就是就是 电脑网站支付,本文基于支付宝沙箱环境,不了解的可以看一下上边的链接. 废话不多说,直接进入主题. 下载运行测试Demo 官方Demo下载链接:电脑网站支付(Java) 下载后导入 IDEA 中运行如下图所示: 如果在导入运行过程遇到错误,请参考这篇文章:IDEA中导入支付宝电脑网站支付测试Demo遇到的错误 进行支付测试,注意付款要用沙箱环境提供的支付宝AP

微信H5支付,从第三方手机浏览器中直接打开支付页面

首先在商户平台通开H5支付功能,然后帮后绑定,支付完成之后需要跳转的地址,开通之后就可以开发H5支付: 首先是签名,卧槽,说到这个就想骂人, 官方文档的解说:文科生哪能看得懂什么是集合: 下面就来签名: <?php //生成随机字符串 function getNonceNum($numLen=16){ $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = "&q

集成支付宝H5支付

支付宝开放平台上有大量文档与API,可以在上面找到所需要的资料. H5支付属于支付宝移动支付功能,可在链接中点击"SDK&DEMO下载",将SDK与DEMO下载到本地. 将客户端的DEMO用Android Studio 2.0以Gradle方式打开(直接import进来失败,小白不清楚是啥情况).然后就可以将DEMO写入手机或者模拟器中了. 一.支付宝SDK的支付方式: DEMO中有两种支付方式: "支付"用于APP内调用(WebView内)支付宝SDK,&

支付宝H5支付demo

支付宝H5支付 首先我们必须注册一个支付宝应用(本案例就直接用支付宝的沙箱环境,这个沙箱也就是支付宝提供给开发者的一个测试环境) 登录地址:https://open.alipay.com/platform/home.htm 1.怎么注册一个支付宝应用?看图(至于应用里面需要的资料你就跟着填就ok了,我就不多讲了,关于公钥秘钥这些,支付宝也有它自己的工具自动生成) 2.怎么获取沙箱环境?(看图) 就这样,支付宝的基本配置我们都能get到了,下面开始写代码吧! 3.思路描述 支付宝的h5支付比微信的

微信支付—微信H5支付「非微信内部浏览器-QQ/UC浏览器等」

前言 微信支付-微信H5外部浏览器支付「本文」微信H5内部浏览器支付「待写」PC端扫码支付「待写」 一直计划着写一写微信支付相关的文章,希望能加深一下自己的印象,拖了一天又一天… 最近终于空出时间来填坑了,我将文章分为微信H5外部浏览器支付.微信H5内部浏览器支付.PC端扫码支付三篇来写. 本篇是微信H5外部浏览器支付:支付时会唤起微信APP进行支付. 扫盲补充:关于微信H5支付,分为内部浏览器支付 + 外部浏览器支付,两者还是稍微有点点区别的,内部浏览器即在微信内打开网页,进行支付,支付调用由

Android通过外部浏览器调用微信H5支付,Android+PHP详解

看了好多关于讲解微信H5支付开发的文章,大多数都是通过微信内部浏览器来调用支付接口(其实就是公众号支付),可能是因为H5支付接口刚开放不久吧. 微信官方体验链接:http://wxpay.wxutil.com/mch/pay/h5.v2.php,请在微信外浏览器打开. 看了上面的体验链接,如果感兴趣,可以接着往下看,希望对你有所帮助. 一.Android端 Android端代码相对来说比较简单一些,我这边直接调用系统浏览器打开H5支付页面 Intent intent = new Intent()

微信支付—微信H5支付「微信内部浏览器」

前言 微信支付-微信H5外部浏览器支付微信支付-微信H5内部浏览器支付「本文」微信支付-PC端扫码支付「待写」 本篇是微信支付系列的第二篇.微信H5内部浏览器支付,关于微信H5外部浏览器唤起微信APP支付,请参考上一篇文章. 开发环境:Java + SpringBoot + Vue +WxJava(开源SDK) 扫盲补充:关于微信内部浏览器支付,支付时会直接调起微信支付,不同于外部浏览器支付,内部浏览器支付首先需要获得当前支付用户对该公众号的唯一标识 openId「是否关注都是唯一的」,拿到 o