支付宝/微信手机app混合开发——手机网站H5支付

最新推荐文章于 2025-02-12 16:14:57 发布

jwolf2

最新推荐文章于 2025-02-12 16:14:57 发布

阅读量980

点赞数

分类专栏： thirdpart-alipay&wechatpay

本文链接：https://blog.youkuaiyun.com/qq_39506978/article/details/105404073

版权

thirdpart-alipay&wechatpay 专栏收录该内容

5 篇文章

订阅专栏

1.官方文档

支付宝-文档关键字“手机网站支付“：https://opendocs.alipay.com/apis/api_1/alipay.trade.wap.pay

微信-文档关键字“H5支付“：https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_3

2.流程说明（关键是理清流程）

支付宝流程：点击支付——请求后端接口（创建订单）返回form表单html片段给前端——进入支付宝支付页面拉起支付宝支付(如已安装支付宝会自动拉起进入密码输入页面，如装有沙箱版及正式版需要选择拉起的支付宝版本)——支付完成（异步调用notifyUrl通知商户进行其它逻辑，一般是修改订单状态等）——点击支付宝的“完成“按钮或手机返回键进入returnUrl

微信流程：基本同支付宝，不同点，请求后端接口返回给前端得不是form表单而是一个URL，前端location.href=URL进行跳转微信页面拉起微信支付宝。

3.支付宝后端接口

 public ResultEntity alipayH5(HttpServletRequest request,HttpServletResponse response) throws AlipayApiException {
        ServiceSellSetting setting = settingMapper.selectSettingByType(ServiceTypeConstant.EXAM);
        String orderNo = OrderIdGenerater.genOrderId();
        Map<String, String> alipayH5Params = new HashMap<>();
        alipayH5Params.put("out_trade_no",orderNo);
        alipayH5Params.put("total_amount",new BigDecimal(setting.getPrice()).setScale(2, RoundingMode.HALF_UP).toPlainString());
        alipayH5Params.put("subject","XXXXXX增值服务");
        alipayH5Params.put("quit_url",request.getHeader("origin")); //可选参数,中途退出进入的页面url
        alipayH5Params.put("product_code","QUICK_WAP_PAY");
        alipayH5Params.put("timeout_express","1m");
        AlipayTradeWapPayRequest alipayTradeWapPayRequest = new AlipayTradeWapPayRequest();
        alipayTradeWapPayRequest.setNotifyUrl(alipayNotifyUrl); //支付成功后支付宝异步调用的URL
        alipayTradeWapPayRequest.setReturnUrl(request.getHeader("origin"));//手机h5支付成功点击完成或返回的进入的页面url
        alipayTradeWapPayRequest.setBizContent(JSON.toJSONString(alipayH5Params));
        log.info("阿里H5支付request入参：{}", JSON.toJSONString(alipayTradeWapPayRequest));
        AlipayTradeWapPayResponse aliResponse = alipayClient.pageExecute(alipayTradeWapPayRequest);
        if (aliResponse.isSuccess()) {
            createExamOrderAndOrderItem( CommonUtil.getReqUser(request), setting, orderNo);//创建订单
            return ResultEntity.success(aliResponse.getBody());//将form表单返回给前端，前端自动提交拉起支付宝进行支付，成功后异步回调alipayNotifyUrl,点击完成跳到ReturnUrl
        } else {
            log.error("阿里返回信息:" + JSON.toJSONString(response));
            return ResultEntity.fail(ErrorEnum.UNKNOWN_ERROR);

        }

    }

注意：不能使用AlipayTradeWapPayModel来构造请求参数，新版本请求参数一般是下划线，非驼峰。如上，用map来封装即可。

/* AlipayTradeWapPayModel alipayTradeWapPayModel = new AlipayTradeWapPayModel();
 alipayTradeWapPayModel.setSubject("XXXXXX增值服务");
 alipayTradeWapPayModel.setOutTradeNo(orderNo);
 alipayTradeWapPayModel.setTimeoutExpress("1d");
 alipayTradeWapPayModel.setBody("订单:"+orderNo);
 alipayTradeWapPayModel.setTotalAmount("1");
 alipayTradeWapPayModel.setProductCode("QUICK_WAP_PAY");//固定值QUICK_WAP_PAY*/

4.微信后端接口注意点

个别浏览器无法拉起微信app，如华为自带的UC浏览器，可能有兼容性问题，报错参数格式不正确或存在未配置的参数，
App H5项目地址如果是本地，拉起微信App时报错“商家存在未配置的参数，请联系商家解决”，部署到云服务器（配置域名），即可拉起。该域名一级域名需要在阿里云控制台设置。应该是微信检查了Referer请求头。
spbill_create_ip必须是用户的真实IP，注意使用nginx反向代理后真实IP正确获取；

5.其它参考

支付宝H5支付