当前位置：首页 > HTML

h5实现支付

2026-03-06 14:07:28HTML

H5实现支付的方法

H5支付通常指在移动端网页（H5页面）中集成支付功能，允许用户直接通过浏览器完成支付。以下是几种常见的H5支付实现方式：

微信H5支付

微信H5支付适用于在手机浏览器请求微信支付的场景。需要商户在微信支付商户平台申请开通H5支付权限。

开发步骤：

在商户平台配置支付域名（需备案）。
调用统一下单接口，设置trade_type为MWEB。
获取mweb_url后跳转到该URL完成支付。
通过异步通知或主动查询接口确认支付结果。

关键参数示例：

{
  "mch_id": "商户号",
  "out_trade_no": "订单号",
  "total_fee": 100,
  "spbill_create_ip": "用户IP",
  "notify_url": "回调地址",
  "trade_type": "MWEB",
  "scene_info": {"h5_info": {"type":"Wap","wap_url":"域名","wap_name":"名称"}}
}

支付宝手机网站支付

支付宝的手机网站支付（WAP支付）适用于H5页面调用支付宝完成支付。

实现流程：

在支付宝开放平台创建应用并申请手机网站支付功能。
使用AlipayTradeWapPayRequest接口生成支付表单。
前端自动提交表单跳转到支付宝支付页面。
通过异步通知或同步返回处理支付结果。

示例代码（PHP）：

$config = [
    'app_id' => 'APPID',
    'alipay_public_key' => '公钥',
    'merchant_private_key' => '私钥'
];

$builder = new \AlipayTradeWapPayContentBuilder();
$builder->setSubject('商品名称');
$builder->setOutTradeNo('订单号');
$builder->setTotalAmount('0.01');
$builder->setTimeExpress('10m');

$request = new \AlipayTradeWapPayRequest();
$request->setReturnUrl('同步回调地址');
$request->setNotifyUrl('异步回调地址');
$request->setBizContent($builder->getBizContent());

银联H5支付

银联云闪付提供H5支付解决方案，支持在移动浏览器中调起支付。

接入流程：

在银联商户平台申请开通移动网页支付功能。
通过前端引入UPMP.js或后端生成支付表单。
用户提交支付请求后跳转到银联支付页面。
处理支付结果通知。

前端示例：

<script src="https://xxx.com/UPMP.js"></script>
<script>
UPMP.pay({
    tn: '交易流水号',
    mode: '00' // 00生产环境
}, function(result){
    console.log(result);
});
</script>