支付面板拉起指引 | 腾讯微卡 Wiki

背景

腾讯微卡收付通具备多渠道、多场景的收单能力。在不同的支付场景下，客户使用的方式也是不同的，只有正确的搭配使用支付类型和支付要素，才能兼容各种支付场景。

目标

本文旨在帮助客户正确使用支付类型和支付要素，构建自己的多元化支付系统，进而提高用户的支付效率和支付体验。

PayInfoType 使用对照表

腾讯微卡收付通支持多场景收单，每种收单场景都有对应的支付方式，常用支付场景和支付方式对应关系如下。

支付场景	支付类型
MINI_PROGRAM	JSAPI, MINIJUMPTOMINI
PUBLIC	JSAPI
APP	APPSDK，APPJUMPTOMINI
H5	JUMPURL，HTML
PC	QRCODE

PayInfoType 枚举表

PayInfoType	PayInfo 描述	支付渠道	使用场景说明
JSAPI	JSON对象或字符串	ALIPAY, WXPAY	使用 JSAPI 拉起支付页面
MINIPROGRAM	JSON对象	ALIPAY, WXPAY	拉起原生小程序进行支付
APPSDK	JSON对象或字符串	ALIPAY, WXPAY, UNIONPAY	使用 APP SDK 拉起支付
QRCODE	二维码链接	ALIPAY, WXPAY, UNIONPAY	渲染二维码扫码支付
MINIJUMPTOMINI	JSON对象	WXPAY	跳转到第三方小程序
APPJUMPTOMINI	跳转链接	ALIPAY, WXPAY	商家APP跳转到原生小程序
JUMPURL	重定向 URL	ALIPAY, WXPAY	重定向到 URL 进行支付
HTML	HTML表单	ALIPAY, WXPAY	浏览器渲染 HTML 表单进行支付
B2BBANK	JSON对象	CMBPAY	线下打款
B2BTRANSFER	转账链接	ENTPAY	使用该链接进行支付
DIRECTPAY	无	PINGANJZB	直接支付，比如余额支付
MINIPROGRAMB2B	JSON对象	WXPAY	拉起原生小程序进行支付

PayInfo示例

调用收付通下单接口，都会返回 PayInfoType, PayInfo 和 PayChannel 三个字段，通过这三个字段的组合，可以唯一确定一种处理方式。

PayInfoType: 唯一确定拉起支付的方式
PayInfo: 唯一确定拉起支付所需要的参数
PayChannel: 唯一确定拉起支付所在的环境

HTML

返回 PayInfo 格式为一个 HTML 表单
返回示例

<form name=\"punchout_form\" method=\"post\" action=\"https://openapi-sandbox.dl.alipaydev.com/gateway.do?charset=UTF8&method=alipay.trade.wap.pay&sign=qR8NaE%2B5Fdchf7W1dfEXxrjEOuUanCdIGQsQQiFjMaEh9zdW8T46u0NhMPSiIOSrTp%2BZVqssWIg4wYoPPX07y3%2BRPruCgdAhhnm2AwGBxh0v0kxciO06%2BeEKQT7hNs03yedNpzqJDf1nlzg%2F4HMUniQ8oniE%2BohLjeudMhlnjoOuYKeIEqX%2BPn6ZFuAzvmy5XOan%2Bu3jI1m7YrRXGfyBdee9nu3YUhauaV97dLQBHJJ%2BwxWTdr3poFkHb%2F00uJnkCIsBY7Aj0oNYi5dDlUirZpFmiq82E%2BmgvAW9XC63sp4syQqzJf7e65%2BzeCogV30zRU55U009iGRJzgan9IRQBw%3D%3D&app_id=9021000129656387&sign_type=RSA2&timestamp=2023-10-17+18%3A11%3A24&alipay_sdk=alipay-sdk-java-4.35.171.ALL&format=json\"> <input type=\"hidden\" name=\"biz_content\" value=\"{&quot;out_trade_no&quot;:&quot;70501111111S001111119&quot;,&quot;total_amount&quot;:&quot;9.00&quot;,&quot;subject&quot;:&quot;大乐透&quot;,&quot;product_code&quot;:&quot;QUICK_WAP_WAY&quot;,&quot;seller_id&quot;:&quot;2088102147948060&quot;}\"> <input type=\"submit\" value=\"立即支付\" style=\"display:none\" > </form>

获取到 HTML 表单之后，可以将表单在浏览器中进行渲染，自动跳转到表单中的重定向地址，引导用户完成支付
使用示例

<iframe srcdoc="{{PayInfo}}"
    frameborder="no"
    border="0"
    marginwidth="0"
    marginheight="0"
    scrolling="no"
    width="300"
    height="300"
    style="overflow:hidden;">
</iframe>

JUMPURL

返回的 PayInfo 格式为一个重定向 URL
返回示例

http://220.248.252.123:8443/RedictUrl1/01000000/DMjAyMzExMDcyMzI3MzhDQzA3TTFHVFBTQkFYREQ

获取到重定向URL之后，可以自动跳转到表单中的重定向地址，引导用户完成支付。和 HTML 的方式唯一的不同点是：HTML 是通过表单中的地址进行重定向跳转，而 JUMPURL 是直接跳转
使用示例

location.href = "http://220.248.252.123:8443/RedictUrl1/01000000/DMjAyMzExMDcyMzI3MzhDQzA3TTFHVFBTQkFYREQ"

JSAPI

支付宝

返回示例

2015042321001004720200028594

使用示例

<h1>点击以下按钮唤起收银台支付</h1>
<a href="javascript:void(0)" class="btn tradenoPay">支付宝交易号唤起支付</a>
<script>
    function ready(callback) {
        // 如果jsbridge已经注入则直接调用
        if (window.AlipayJSBridge) {
            callback && callback();
        } else {
            // 如果没有注入则监听注入的事件
            document.addEventListener('AlipayJSBridgeReady', callback, false);
        }
    }
    ready(function(){
        document.querySelector('.tradeno').addEventListener('click', function() {
            AlipayJSBridge.call("tradePay", {
                tradeNO: "2015042321001004720200028594"
            }, function(result) {
                alert(JSON.stringify(result));
            });
        });
    });
</script>

微信支付

返回示例

{\"appId\":\"wxad*****g5f2\",\"timeStamp\":\"1681867396\",\"nonceStr\":\"94981e22ac0b4663949a442f31739b53\",\"package\":\"prepay_id=wx212*****3400\",\"signType\":\"RSA\",\"paySign\":\"oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq/xDg==\"}

使用示例

function onBridgeReady() {
  WeixinJSBridge.invoke('getBrandWCPayRequest', {
        "appId": "wxad*****g5f2",     //公众号ID，由商户传入    
        "timeStamp": "1681867396",     //时间戳，自1970年以来的秒数     
        "nonceStr": "94981e22ac0b4663949a442f31739b53",      //随机串     
        "package": "prepay_id=wx212*****3400",
        "signType": "RSA",     //微信签名方式：     
        "paySign": "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg==" //微信签名 
      },
      function(res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          // 使用以上方式判断前端返回,微信团队郑重提示：
          //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        }
      });
}
if (typeof WeixinJSBridge == "undefined") {
  if (document.addEventListener) {
    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
  } else if (document.attachEvent) {
    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
  }
} else {
  onBridgeReady();
}

APPSDK

支付宝

返回示例

app_id=20170*****7939&biz_content=%7B%22time_expire%22%3A%222016-12-31+10%3A05%3A00%22%2C%22extend_params%22%3A%22%22%2C%22query_options%22%3A%22%5B%5C%22hyb_amount%5C%22%2C%5C%22enterprise_pay_info%5C%22%2C%5C%22medical_insurance_info%5C%22%2C%5C%22credit_pay_mode%5C%22%5D%22%2C%22subject%22%3A%22%E5%A4%A7%E4%B9%90%E9%80%8F%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%2C%22body%22%3A%22Iphone6+16G%22%2C%22passback_params%22%3A%22merchantBizType%253d3C%2526merchantBizNo%253d2016010101111%22%2C%22specified_channel%22%3A%22pcredit%22%2C%22goods_detail%22%3A%22%22%2C%22merchant_order_no%22%3A%2220161008001%22%2C%22enable_pay_channels%22%3A%22pcredit%2CmoneyFund%2CdebitCardExpress%22%2C%22out_trade_no%22%3A%2270501111111S001111119%22%2C%22ext_user_info%22%3A%22%22%2C%22total_amount%22%3A%229.00%22%2C%22timeout_express%22%3A%2290m%22%2C%22disable_pay_channels%22%3A%22pcredit%2CmoneyFund%2CdebitCardExpress%22%2C%22agreement_sign_params%22%3A%22%22%7D&charset=UTF-8&format=json&method=alipay.trade.app.pay&sign=ERITJKEIJKJHKKKKKKKHJEREEEEEEEEEEE&sign_type=RSA2&timestamp=2014-07-24+03%3A07%3A50&version=1.0

使用示例
参考支付宝官方文档 (opens in a new tab)

微信支付

返回示例

{\"appId\":\"wxad*****g5f2\",\"timeStamp\":\"1681867396\",\"nonceStr\":\"94981e22ac0b4663949a442f31739b53\",\"package\":\"Sign=WXPay\",\"prepay_id\":\"wx1909231*****000000\",\"sign\":\"rhOR5lnhv6w2asdMiqRHU/aEZjhk1J4fGT2/Z5vxqtNcaLyHYmqDiIZZqxlSgSibWb/Z1a8SJdzLH9u0nnBKa0u0wtVaXgB6WKUahYtwQZC2ZadaYj6AkAeKLRIUHObVgAClbiiaiUjiaC9JUhj11m7JkClwpRvJkXQi4QzTdjA+kYv+32cgUido8SWIt6WZZXyH1qJTG1rYJC8IeUMgktH8oOoGzlxpaJbgB41j+pBd10b4R4DExlJ+KWP7N8iPj5YrbIzGJ2MsZ8L2U0jKLjpfKF/3d4hsc4or7EKIXdffgsreedaW6JzZ77gyb5ounChaea6CEP1UpUUAvgrkJwgw==\"}

使用示例
参考微信支付官方文档 (opens in a new tab)

QRCODE

返回的 PayInfo 格式为一个二维码链接，渲染成二维码后引导用户扫码支付
返回示例

https://qr.alipay.com/bax07192ckcsnhk8emg1305b

使用示例
获取到支付二维码链接之后，可以渲染成收款二维码至显码设备，引导用户完成支付

MINIPROGRAM

支付宝小程序

返回示例

2015042321001004720200028594

使用示例

my.tradePay({
    tradeNO: '2015042321001004720200028594',
        success: function(res) {
        my.alert({
            content: JSON.stringify(res),
        });
    },
    fail: function(res) {
           my.alert({
            content: JSON.stringify(res),
        });
    },
});

微信小程序

返回示例

{\"timeStamp\":\"1681867396\",\"nonceStr\":\"94981e22ac0b4663949a442f31739b53\",\"package\":\"prepay_id=wx19*****000\",\"signType\":\"RSA\",\"paySign\":\"rhOR5lnhv6w2asdMiqRHU/aEZjhk1J4fGT2/Z5vxqtNcaLyHYmqDiIZZqxlSgSibWb/Z1a8SJdzLH9u0nnBKa0u0wtVaXgB6WKUahYtwQZC2ZadaYj6AkAeKLRIUHObVgAClbiiaiUjiaC9JUhj11m7JkClwpRvJkXQi4QzTdjA+kYv+32cgUido8SWIt6WZZXyH1qJTG1rYJC8IeUMgktH8oOoGzlxpaJbgB41j+pBd10b4R4DExlJ+KWP7N8iPj5YrbIzGJ2MsZ8L2U0jKLjpfKF/3d4hsc4or7EKIXdffgsreedaW6JzZ77gyb5ounChaea6CEP1UpUUAvgrkJwgw==\"}

使用示例

wx.requestPayment({
    'timeStamp': '1681867396',
    'nonceStr': '94981e22ac0b4663949a442f31739b53',
    'package': 'prepay_id=wx19*****000',
    'signType': 'RSA',
    'paySign': 'rhOR5lnhv6w2asdMiqRHU\/aEZjhk1J4fGT2\/Z5vxqtNcaLyHYmqDiIZZqxlSgSibWb\/Z1a8SJdzLH9u0nnBKa0u0wtVaXgB6WKUahYtwQZC2ZadaYj6AkAeKLRIUHObVgAClbiiaiUjiaC9JUhj11m7JkClwpRvJkXQi4QzTdjA+kYv+32cgUido8SWIt6WZZXyH1qJTG1rYJC8IeUMgktH8oOoGzlxpaJbgB41j+pBd10b4R4DExlJ+KWP7N8iPj5YrbIzGJ2MsZ8L2U0jKLjpfKF\/3d4hsc4or7EKIXdffgsreedaW6JzZ77gyb5ounChaea6CEP1UpUUAvgrkJwgw==',
    'success':function(res){},
    'fail':function(res){},
    'complete':function(res){}
})

MINIJUMPTOMINI

通联小程序

返回示例

{\"appId\":\"wxef***6c3\",\"extraData\":{\"appid\":\"002***36\",\"body\":\"demo演示\",\"cusid\":\"56258***UGWH\",\"notify_url\":\"https://p.wecard.tencent.com/***\",\"paytype\":\"W06\",\"randomstr\":\"53614615\",\"remark\":\"test\",\"reqsn\":\"6830***21705\",\"sign\":\"TgtxSsZHY***ymDww==\",\"signtype\":\"RSA\",\"trxamt\":\"10\",\"validtime\":\"29\",\"version\":\"12\"}}

使用示例

wx.navigateToMiniProgram({
    appId: 'wxef***6c3',
    extraData: {
      appid: '002***36',
      body: 'demo演示',
      cusid: '56258***UGWH',
      notify_url: 'https://p.wecard.tencent.com/***',
      paytype: 'W06',
      randomstr: '53614615',
      remark: 'test',
      reqsn: '6830***21705',
      sign: 'TgtxSsZHY***ymDww==',
      signtype: 'RSA',
      trxamt: '10',
      validtime: '29',
      version: '12'
    },
    success(res) {
        // 打开成功
    }
})

微企付小程序

返回示例

{\"appId\":\"wxef*****66k3\",\"path\":\"pages/home/index.html\"}

使用示例

wx.navigateToMiniProgram({
    appId: 'wxef*****66k3',
    path: 'pages/home/index.html',
    success(res) {
        // 打开成功
    }
})

APPJUMPTOMINI

用于银行渠道不提供APP类型的支付，从商家APP直接跳转到小程序中支付
返回示例

{\"appId\":\"wxef*****66k3\",\"path\":\"pages/home/index.html\"}

使用示例

参考微信支付官方文档 (opens in a new tab)
参考支付宝官方文档 (opens in a new tab)

B2BBANK

银行线下打款，返回的 PayInfo 格式为收款人的姓名，银行账号等信息

B2BTRANSFER

企业转账，返回的 PayInfo 格式为一个转账链接，跳转到该链接引导用户进行转账

DIRECTPAY

直接支付，比如余额支付

MINIPROGRAMB2B

返回示例

{\"signData\":{\"mchid\":\"123***\",\"out_trade_no\":\"test1244\",\"description\":\"测试测试\",\"amount\":{\"order_amount\":1,\"currency\":\"CNY\"},\"attach\":\"test_attach\",\"delivery_type\":2,\"env\":0},\"paySig\":\"d0b8b*****\",\"signature\":\"d0b8bb*****\",\"mode\":\"retail_pay_goods\"}

使用示例

wx.requestCommonPayment({
    signData: JSON.stringify({
      mchid: '1234567890',
      out_trade_no: 'test1244',
	  description: '测试测试',
	  amount: {
		  order_amount: 1,
		  currency: 'CNY'
	  },
	  attach: 'test_attach',
	  delivery_type: 2,
      env: 0
    }),
    paySig: 'd0b8bbccbe109b***',
    signature: 'd0b8bbcc***',
    mode: 'retail_pay_goods',
    success(res) {
      console.log('requestCommonPayment success', res)
    },
    fail({ errMsg, errno }) {
      console.error(errMsg, errno)
    },
  })

参考微信小程序开放平台官方文档 (opens in a new tab)