支付宝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;
    }


相关文章
|
2月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
60 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
移动开发 前端开发 JavaScript
|
3月前
|
存储 移动开发 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;
|
2月前
|
移动开发 JavaScript 开发工具
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
|
4月前
|
移动开发 小程序 开发工具
微信支付的类型分析(JSAPI+APP+H5+NATIVE+付款码+合单)
微信支付的类型分析(JSAPI+APP+H5+NATIVE+付款码+合单)
322 1
|
测试技术 开发工具 Android开发
Android版-支付宝APP支付
此项目已开源欢迎Start、PR、发起Issues一起讨论交流共同进步 【客户端开源地址-JPay】 https://github.
1686 0
|
4天前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
|
7天前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
7天前
|
存储 开发工具 Android开发
使用.NET MAUI开发第一个安卓APP
【9月更文挑战第24天】使用.NET MAUI开发首个安卓APP需完成以下步骤:首先,安装Visual Studio 2022并勾选“.NET Multi-platform App UI development”工作负载;接着,安装Android SDK。然后,创建新项目时选择“.NET Multi-platform App (MAUI)”模板,并仅针对Android平台进行配置。了解项目结构,包括`.csproj`配置文件、`Properties`配置文件夹、平台特定代码及共享代码等。
|
1月前
|
Web App开发 Java 视频直播
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
对于软件、计算机等专业的毕业生,毕业设计需实现实用软件或APP。新颖的设计应结合最新技术,如5G时代的音视频技术。示例包括: 1. **短视频分享APP**: 集成FFmpeg实现视频剪辑功能,如添加字幕、转场特效等。 2. **电商购物APP**: 具备直播带货功能,使用RTMP/SRT协议支持流畅直播体验。 3. **同城生活APP**: 引入WebRTC技术实现可信的视频通话功能。这些应用不仅实用,还能展示开发者紧跟技术潮流的能力。
68 4
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
下一篇
无影云桌面