第三方h5网页，支付宝Scheme App支付和微信Scheme App支付，需要怎么配置scheme 链接参数

在第三方App内嵌的H5网页中，通过 Scheme URL 调起支付宝或微信的App支付，需要正确配置Scheme链接参数，并处理兼容性问题（如未安装App时的降级逻辑）。以下是详细配置方法：

---

一、支付宝Scheme App支付

支付宝支持通过 alipay:// Scheme 直接唤醒App并跳转支付页面。

1. Scheme 链接格式

alipay://platformapi/startapp?appId=20000067&url=<encoded_pay_url>

• 参数说明：
  • appId=20000067：固定值，表示支付宝支付功能。
  • url=<encoded_pay_url>：支付参数的URL编码字符串（由支付宝支付接口返回）。

2. 获取 encoded_pay_url

调用支付宝的 APP支付接口（alipay.trade.app.pay），后端返回的支付参数格式如下：

{
  "orderStr": "alipay_sdk=xxx&app_id=xxx&method=alipay.trade.app.pay&charset=utf-8..."
}

前端需要对 orderStr 进行 URL编码（encodeURIComponent）后拼接至Scheme：

const orderStr = 'alipay_sdk=xxx...'; // 后端返回的支付参数字符串
const encodedPayUrl = encodeURIComponent(orderStr);
const alipayScheme = `alipay://platformapi/startapp?appId=20000067&url=${encodedPayUrl}`;

// 尝试跳转支付宝App
window.location.href = alipayScheme;

// 检测是否跳转成功（超时则降级到H5支付）
setTimeout(() => {
  if (!document.hidden) {
    window.location.href = 'https://m.alipay.com/...'; // 支付宝H5支付页
  }
}, 1000);

3. 注意事项

1. 必须由用户主动触发（如点击按钮），否则浏览器可能拦截自动跳转。
2. 未安装支付宝时的降级：
   • 检测跳转是否成功，失败则跳转支付宝H5支付页。
3. iOS Universal Link（可选）：
   • 支付宝支持更稳定的Universal Link唤醒方式（需配置Associated Domains）。

---

二、微信Scheme App支付

微信的Scheme支付限制严格，仅支持在已注册的App内使用（包名和签名匹配），否则会被拦截。

1. Scheme 链接格式

weixin://wap/pay?<payment_params>

• 参数说明：
  • prepayid=xxxx：微信支付预支付订单号（后端调用微信统一下单接口获取）。
  • package=Sign=WXPay：固定值。
  • noncestr=xxx：随机字符串。
  • timestamp=xxx：时间戳。
  • sign=xxx：签名（由后端生成）。

2. 完整Scheme示例

const wechatScheme = `weixin://wap/pay?prepayid=wx123456789&package=Sign%3DWXPay&noncestr=abc123×tamp=1630000000&sign=XXXXXX`;

// 尝试跳转微信
window.location.href = wechatScheme;

// 检测是否跳转成功
setTimeout(() => {
  if (!document.hidden) {
    alert('未安装微信，请使用其他支付方式');
    // 降级到H5支付或二维码支付
  }
}, 1000);

3. 关键限制

1. 包名和签名校验：
   • Scheme支付仅适用于在 微信开放平台注册的App（包名和签名一致）。
   • 第三方App内嵌H5无法绕过此限制（微信会拦截非白名单请求）。
2. iOS限制更严格：
   • iOS 9+ 可能要求配置 LSApplicationQueriesSchemes（在宿主App的Info.plist中添加weixin）。
3. 替代方案：
   • 如果无法满足包名匹配，改用 微信H5支付 或 支付二维码。

---

三、通用最佳实践

1. 支付流程优化

1. 用户主动触发：

   <button onclick="launchAlipay()">支付宝支付</button>
   <button onclick="launchWechatPay()">微信支付</button>
   

2. 降级策略：
   • 检测是否跳转成功，失败则降级到H5支付页。
   • 示例（支付宝）：

     function launchAlipay() {
       const alipayScheme = 'alipay://...';
       window.location.href = alipayScheme;
       
       setTimeout(() => {
         if (!document.hidden) {
           window.location.href = 'https://m.alipay.com/...'; // H5支付
         }
       }, 1000);
     }
     

2. 兼容性测试

• Android：测试主流浏览器（Chrome、UC、QQ浏览器）是否允许Scheme跳转。
• iOS：检查Universal Link（支付宝）或LSApplicationQueriesSchemes（微信）是否配置。

3. 微信支付的替代方案

如果Scheme支付被拦截，可改用：

• 微信H5支付（需申请商户H5支付权限）。
• 生成支付二维码，用户扫码后跳转微信支付。

---

四、总结

支付方式	Scheme 格式	关键限制	降级方案
支付宝App支付	alipay://platformapi/startapp?...	需用户手动触发	跳转H5支付页
微信App支付	weixin://wap/pay?...	包名/签名校验，仅限白名单App	H5支付或二维码

推荐方案：

• 支付宝：优先使用Scheme跳转 + H5降级。
• 微信：若包名不匹配，直接使用H5支付或二维码，避免Scheme被拦截。