支付宝H5嵌入APP内部支付

简介: 前景:由于苹果支付收取手续费太高,决定采用APP内嵌套H5进行微信和支付宝进行支付。安卓手机可以直接使用APP支付功能(APP支付和H5支付,只有两个参数不同而已,以及返回的参数格式不同,仅此而已)

前景:由于苹果支付收取手续费太高,决定采用APP内嵌套H5进行微信和支付宝进行支付。安卓手机可以直接使用APP支付功能(APP支付和H5支付,只有两个参数不同而已,以及返回的参数格式不同,仅此而已)


H5支付流程


用户添加商品生成订单,选择支付宝支付方式,点击购买按钮,前端发送ajax请求到后端,后端调用支付宝统一下单接口生成预付单。对于H5支付返回的是一个表单的字符串(APP内支付是序列号的字符串),前端接收到直接复制给页面某个div,会自动调起支付宝APP进行支付,如下图:


网络异常,图片无法展示
|


网络异常,图片无法展示
|


H5统一下单接口


/**
     * 支付宝H5下单支付
     * @validate('OrderForm')
     * @throws \app\lib\exception\OrderException
     */
    public function aliH5Pay(Request $request)
    {
        $params = $request->param();
        //统一下单(进行调用订单模型创建订单表订单)
        $orderInfo = OrderModel::createOrder($params);
        //获取唤醒支付表单的字符串   (这里调用的是支付类,调用的则下面的方法)
        $sHtml = (new AliPay())->aliH5Pay($orderInfo);
        $result = [
            'order_info' => $orderInfo,
            'order_form' => $sHtml
        ];
        return writeJson(201, $result, '下单成功');
    }
     /**AliPay 类代码
     * 如果支付来源是h5,则进行生成h5代码
     * @param $params
     * @return array
     */
    public function aliH5Pay($params)
    {
        $this->signType = 'RSA2';//签名算法类型,支持RSA2和RSA,推荐使用RSA2
        $this->appId = config('alipay.app_id');
        $this->returnUrl = config('alipay.return_url');
        $this->notifyUrl = config('alipay.notify_url');
        $this->charset = 'UTF-8';
        $this->rsaPrivateKey = config('alipay.merchant_private_key');
        $this->totalFee = $params['pay_amount']; //付款金额,单位:元
        $this->orderNo = $params['order_no'];  //你自己的商品订单号,不能重复
        $this->orderName = '番鱼-' . $params['order_name'];  //订单标题
        //如果支付来源是h5,则进行生成h5代码
        $sHtml = $this->getOrderH5Str();
        return $sHtml;
    }
   /***AliPay 类代码
     *  如果支付来源是h5,则进行生成h5支付表单字符串代码
     * @return array
     */
    public function getOrderH5Str()
    {
        //请求参数
        $requestConfigs = array(
            'body' => $this->orderName,
            'out_trade_no' => $this->orderNo,
            'total_amount' => $this->totalFee, //单位 元
            'subject' => $this->orderName,  //订单标题
            'product_code' => 'QUICK_WAP_WAY', //销售产品码,商家和支付宝签约的产品码,为固定值QUICK_MSECURITY_PAY
            'timeout_express' => '2h',       //该笔订单允许的最晚付款时间,逾期将关闭交易。取值范围:1m~15d。m-分钟,h-小时,d-天,1c-当天(1c-当天的情况下,无论交易何时创建,都在0点关闭)。 该参数数值不接受小数点, 如 1.5h,可转换为 90m。
        );
        $commonConfigs = array(
            //公共参数
            'app_id' => $this->appId,
            'method' => 'alipay.trade.wap.pay',             //接口名称
            'format' => 'JSON',
            'charset' => $this->charset,
            'sign_type' => 'RSA2',
            'timestamp' => date('Y-m-d H:i:s'),
            'version' => '1.0',
            'notify_url' => $this->notifyUrl,
            'biz_content' => json_encode($requestConfigs),
        );
        $commonConfigs["sign"] = $this->generateSign($commonConfigs, $commonConfigs['sign_type']);
        $sHtml = $this->buildRequestForm($commonConfigs);
        return $sHtml;
    }
    public function generateSign($params)
    {
        return $this->sign($this->getSignContent($params), $this->signType);
    }
    /***AliPay 类代码
     * 建立请求,以表单HTML形式构造(默认)
     * @param $para_temp 请求参数数组
     * @return 提交表单HTML文本
     */
    public function buildRequestForm($para_temp)
    {
        $sHtml = "<form id='alipaysubmit' name='alipaysubmit' action='https://openapi.alipay.com/gateway.do?charset=".$this->charset."' method='POST'>";
        foreach($para_temp as $key=>$val){
            if (false === $this->checkEmpty($val)) {
                $val = str_replace("'","&apos;",$val);
                $sHtml.= "<input type='hidden' name='".$key."' value='".$val."'/>";
            }
        }
        //submit按钮控件请不要含有name属性
        $sHtml = $sHtml."<input type='submit' value='ok' style='display:none;''></form>";
        $sHtml = $sHtml."<script>document.forms['alipaysubmit'].submit();</script>";
        return $sHtml;
    }


相关文章
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
222 3
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
106 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
3月前
|
移动开发 前端开发 JavaScript
|
4月前
|
存储 移动开发 Android开发
使用kotlin Jetpack Compose框架开发安卓app, webview中h5如何访问手机存储上传文件
在Kotlin和Jetpack Compose中,集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤:1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限,考虑Android 11的分区存储;2) 配置WebView允许JavaScript和文件访问,启用`javaScriptEnabled`、`allowFileAccess`等设置;3) HTML5页面使用`<input type="file">`让用户选择文件,利用File API;
|
3月前
|
移动开发 JavaScript 开发工具
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
|
移动开发 JavaScript Windows
uni-app的H5适配全面屏
记录一下如何在用uni-app开发h5时适配全面屏
964 0
uni-app的H5适配全面屏
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
501 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
592 1
|
20天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
1月前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
125 1
uniapp一个人开发APP关键步骤和考虑因素

热门文章

最新文章

下一篇
无影云桌面