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


相关文章
|
4月前
|
存储 人工智能 移动开发
uni-app+vue3接入deepseek-v3搭建跨端ai流式(小程序+app+h5)
基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天大模型,支持编译到H5+小程序+App端。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。
797 12
|
9月前
|
XML 移动开发 开发者
京东商品详情数据接口(H5、APP 端)
京东商品详情数据接口是为H5和APP开发者提供的工具,支持获取商品名称、价格、库存、销量、评价、图片等详细信息,优化应用功能。接口返回JSON或XML格式数据,方便解析处理。适用于电商导购、社交媒体分享、活动推广、价格监控等场景,提升用户体验和购物决策效率。示例代码展示了使用Python发送GET请求的方法。
|
8月前
|
移动开发 JSON API
1688 商品详情数据接口(H5、APP 端)
1688商品详情数据接口是1688平台提供的数据交互通道,支持H5和APP端,提供商品的全面信息(如标题、价格、库存、销量等),并实时更新。开发者可通过HTTP/HTTPS协议调用接口,使用GET或POST方法获取数据。示例代码展示了如何用Python请求该接口,需替换API密钥和商品ID。
|
8月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
270 0
|
2月前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料?不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案,重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具,分析其适用场景与实际应用逻辑,为一线旅游从业者提供高效、低成本的执行参考。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
3月前
|
IDE 开发工具 开发者
使用DevEcoStudio 开发、编译鸿蒙 NEXT_APP 以及使用中文插件
# 使用DevEcoStudio 开发、编译鸿蒙 NEXT_APP 以及使用中文插件 #鸿蒙开发工具 #DevEco Studio
283 1
|
3月前
|
人工智能 小程序 JavaScript
【一步步开发AI运动APP】十、微调优化内置运动分析器,灵活适配不同的应用场景
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用`ISportOptimizer`对内置运动分析器进行微调优化。相比小程序,APP框架(如uni-app)因技术差异,无法直接修改运动分析器参数,因此提供了统一的优化机制。开发者可通过`ISportOptimizer`获取和更新检测规则、动作样本等,灵活适应不同场景需求,如全民运动赛事的宽松模式或学生体测的严格模式。文中还提供了示例代码,展示如何对具体运动项目(如仰卧起坐)进行优化。需要注意的是,微调优化适用于标准动作的小范围调整,若动作变化过大(如花式跳绳),可期待后续自定义扩展功能。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。