首页 > 新闻 > 新闻详文:微信支付和支付宝接入PC网站的对比

微信支付和支付宝接入PC网站的对比

发布时间:2020年02月21日 19时38分48秒   新闻类型:广域新闻    访问次数:12306
字体: 初始 添加收藏 分享给好友

微信支付和支付宝在中国引领着中国当前的数字经济,在互联网、移动终端设备中是当前使用最为频繁的应用。在网络平台要实现在线付费服务,电子商务必不可少的网络数字货币支付结算。那么本文从PC网站商户接入这两给种支付平台支付业务思路进行对比,本文不做开发代码详细介绍。


微信支付接入介绍

开发种类微信官方地址“https://pay.weixin.qq.com/wiki/doc/api/index.html”,PC网站主要是用JSAPI和Native两种模式

JSAPI的官方介绍:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1,可以参考图片步骤。

JSAPI交互细节:

以下是支付场景的交互细节,请认真阅读,设计商户页面的逻辑:

(1)用户打开商户网页选购商品,发起支付,在网页通过JavaScript调用getBrandWCPayRequest接口,发起微信支付请求,用户进入支付流程。

(2)用户成功支付点击完成按钮后,商户的前端会收到JavaScript的返回值。商户可直接跳转到支付成功的静态页面进行展示。

(3)商户后台收到来自微信开放平台的支付成功回调通知,标志该笔订单支付成功。 注:(2)和(3)的触发不保证遵循严格的时序。JSAPI返回值作为触发商户网页跳转的标志,但商户后台应该只在收到微信后台的支付成功回调通知后,才做真正的支付成功的处理。

这里我们归纳下微信官方的JSAPI介绍,这个模式只能通过页面跳转传参完成支付,所以页面url的回发是JSAPI的必不可少的动作,这个模式下只局限在网页中间使用,只要是传统PC网站或手机HTML5网站页面都可以。

Native的官方介绍:https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_1,下面是介绍原文:

用户扫描商户展示在各种场景的二维码进行支付。

步骤1:商户根据微信支付的规则,为不同商品生成不同的二维码(如图6.1),展示在各种场景,用于用户扫描购买。

步骤2:用户使用微信“扫一扫”(如图6.2)扫描二维码后,获取商品支付信息,引导用户完成支付(如图6.3)。

步骤3:用户确认支付,输入支付密码(如图6.4)。

步骤4:支付完成后会提示用户支付成功(如图6.5),商户后台得到支付成功的通知,然后进行发货处理。

我们归纳Native官方介绍解释:这个模式适用于PC网站或手机网站(我们开发过程PC或手机网站都是网站只是前台呈现区别),也适用于各种PC桌面窗体程序,通过异步调用呈现二维码,每一个商品生成一个支付二维码,不需要JSAPI那种实体页面设置的URL跳转传递支付参数,Native通过接口可以异步灵活呈现到扫码支付完成都不要页面跳转完成,这里主要针对屏幕于屏幕之间的扫码支付。


支付宝接入介绍:

支付宝接入开发官方地址:https://b.alipay.com/signing/productSetV2.htm,网站接入支付主要电脑网站支付、手机网站支付,以及当面付。

手机网站支付官方介绍:https://docs.open.alipay.com/203,参考图文介绍

无需开发APP,手机网站同样能轻松收款:
用户在商家手机网站消费,通过浏览器自动跳转支付宝APP或支付宝网页完成付款。 轻松实现和APP支付相同的支付体验。

手机网站支付产品包含的接口和描述如下:

接口名称

描述

alipay.trade.wap.pay
手机网页支付接口

通过此接口传入订单参数,同时唤起支付宝手机网页支付页面

alipay.trade.close
交易关闭接口

通过此接口关闭此前已创建的交易,关闭后,用户将无法继续付款。仅能关闭创建后未支付的交易。

alipay.trade.query
交易状态查询接口

通过此接口查询某笔交易的状态,交易状态:交易创建,等待买家付款;未付款交易超时关闭,或支付完成后全额退款;交易支付成功;交易结束,不可退款。

alipay.trade.refund
交易退款接口

通过此接口对单笔交易完成退款操作

alipay.trade.fastpay.refund.query
退款查询

查询退款订单的状态

alipay.data.dataservice.bill.downloadurl.query
账单查询接口

调用此接口获取账单的下载链接

电脑网站支付官方介绍地址https://b.alipay.com/signing/productDetailV2.htm?productId=I1011000290000001000,原文描述:

PC网站轻松收款,资金马上到账:

用户在商家PC网站消费,自动跳转支付宝PC网站收银台完成付款。 交易资金直接打入商家支付宝账户,实时到账。

这里我们将手机网站支付和电脑网站支付一并归纳:这两种类型,一种通过手机端浏览器,进入支付页面支付,一种是在电脑端浏览器,进入支付页面支付,他们的区别只是在浏览器显示类型,他们都需要通过跳转支付宝页面完成支付,从url传参来判断支付状态。

当面付官方介绍地址:https://b.alipay.com/signing/productDetailV2.htm?productId=I1011000290000001003,这里作为网络商户平台接入支付宝“当面付”,官方介绍没有介绍当面付网络程序如何接入,只有“接入指引”的“2.1”一句话而已:

接入指引

1. 签约:点击“立即接入”,按要求填写并提交产品签约申请,预计一个工作日即可完成审核。点此查询产品签约情况

 2.1 开发接入:如需将当面付产品集成到收银机具(如扫码枪、刷脸设备等),入驻开放平台成为开发者。并按如下步骤操作:创建应用—>应用管理—>添加功能—>上线应用,即可完成。具体请参考开发文档

2.2 免开发接入:无需集成到收银机具,可直接下载当面付收款码进行使用。请按照以下步骤操作:进入账号管理—>查看商户收款码—>下载收款码图片—>打印物料  

当面付归纳:这个模式和微信的Native相似,通过接口,创建预支付二维码单,调用接口异步获取二维码,扫码支付不需要跳转到Alipay支付页面上传参,通过脚本或后台异步加载,传参支付数据,这类也适合开发桌面应用程序,例如车站火车站等自动售票机器,在屏幕呈现的支付二维码扫码,就是这种类型二维码开发。


微信支付商户接入(开发者)配置:

AppID(开发者ID)和AppSecret(开发者密码),MchId(商户号)和AppKey(商户密钥)确保商户已经完成了网站、公司营业执照的主体验证才可开发。

AppID(开发者ID)和AppSecret(开发者密码):登录微信公众号"https://mp.weixin.qq.com/",在左下角的“</>开发”菜单中“基本配置”点击进去即可查看AppID和AppSecret;MchId(商户号)和AppKey(商户密钥):登录微信商户平台“https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F”,在左边“账户设置”中有“商户信息”点击进去,可以找到“基本账户信息”下面的“微信支付商户号”就是MchId;商户密钥AppKey,在左边“账户设置”中有“API安全”点击进去,“API密钥”有相应的商户密钥设置和查看。这是微信支付接入开发的主要4个参数配置。如果是Native模式的开发这四个参数就可以,如果是JSAPI还需要设置回发路径url。下面是统一下单“NATIVE”模式的请求xml参数。

XML 代码  复制

<xml>
 <appid>wx51e9ce566a0840c2</appid>
 <body>Order_20190724180634</body>
 <mch_id>1540115351</mch_id>
 <nonce_str>154011535120190724180634498</nonce_str>
 <notify_url>http://weisim3.com/notify_url.aspx</notify_url>
 <out_trade_no>20190724180634</out_trade_no>
 <product_id>8978967576</product_id>
 <spbill_create_ip>192.186.1.100</spbill_create_ip>
 <time_expire>20190724181634</time_expire>
 <time_start>20190724181634</time_start>
 <total_fee>1</total_fee>
 <trade_type>NATIVE</trade_type>
 <sign>11A01811F9F594E0F62B7469FF08FC23</sign>
</xml>

“NATIVE”模式查询订单,返回参数 :

XML 代码  复制
<xml>
   <return_code><![CDATA[SUCCESS]]></return_code>
   <return_msg><![CDATA[OK]]></return_msg>
   <appid><![CDATA[wx2421b1c4370ec43b]]></appid>
   <mch_id><![CDATA[10000100]]></mch_id>
   <device_info><![CDATA[1000]]></device_info>
   <nonce_str><![CDATA[TN55wO9Pba5yENl8]]></nonce_str>
   <sign><![CDATA[BDF0099C15FF7BC6B1585FBB110AB635]]></sign>
   <result_code><![CDATA[SUCCESS]]></result_code>
   <openid><![CDATA[oUpF8uN95-Ptaags6E_roPHg7AG0]]></openid>
   <is_subscribe><![CDATA[Y]]></is_subscribe>
   <trade_type><![CDATA[MICROPAY]]></trade_type>
   <bank_type><![CDATA[CCB_DEBIT]]></bank_type>
   <total_fee>1</total_fee>
   <fee_type><![CDATA[CNY]]></fee_type>
   <transaction_id><![CDATA[1008450740201411110005820873]]></transaction_id>
   <out_trade_no><![CDATA[1415757673]]></out_trade_no>
   <attach><![CDATA[订单额外描述]]></attach>
   <time_end><![CDATA[20141111170043]]></time_end>
   <trade_state><![CDATA[SUCCESS]]></trade_state>
</xml> 


支付宝商户接入(开发者)配置:

AppId(添加网站程序的Id号):登录支付宝开放平台“https://openhome.alipay.com”,在顶部菜单“账户中心”点击进入,在左侧的“密钥管理”下面的“开发平台密钥”,点击进入,可以查看对应的“应用名称、APPID,在“接口加签方式: 设置/查看” 点开“应用私钥private_key ”和“alipay_public_key支付宝公钥”,如下图:


网站支付宝接入在接入https://b.alipay.com/signing/productSetV2.htm,支付产品,当面付、手机网站、电脑网站支付,我们实际开发在中,接口分为“
alipay.trade.page.pay(统一收单下单并支付页面接口) ”和“alipay.trade.precreate(统一收单线下交易预创建)”两类,alipay.trade.page.pay:PC场景下单并支付,这类主要是页面跳转支付电脑网站或手机网站使用; alipay.trade.precreate:收银员通过收银台或商户后台调用支付宝接口,生成二维码后,展示给用户,由用户扫描二维码完成订单支付。这类就是当面付所用的接口。

alipay.trade.page.pay通过接口生成表单提交:

HTML 代码  复制
 <form id='alipaysubmit' name='alipaysubmit' action='https://openapi.alipay.com/gateway.do?charset=UTF-8' method='get'>
        <input name='app_id' value='2019080766139374' />
        <input name='biz_content' value='{"body":"","out_trade_no":"20200213130413","product_code":"FAST_INSTANT_TRADE_PAY","qr_pay_mode":"4","qrcode_width":0,"subject":"昕软","total_amount":"0.01"}' />
        <input name='charset' value='UTF-8' />
        <input name='format' value='json' />
        <input name='method' value='alipay.trade.precreate' />
        <input name='return_url' value='http://www.weisim3.com' />
        <input name='sign_type' value='RSA2' />
        <input name='timestamp' value='2020-02-13 13:04:13' />
        <input name='version' value='1.0' />
        <input name='sign' value='NzmPEceGHRYlglEBK3JTd2v9gSk2PBltFr3auqTNJG25j1FQ++5sthevcqH9MVtiQxtVntItCVByJ0a4BvTAHEr8yJY8zVFdadIeh7AJhnL/6D9EzyODIhXehgJ60C8M1VvG5yf7wf8QbuxLM9Ga8q9dijqaaWl9ccm+/UazyfhZiY0/RRtjdEqNySTGc3Bld2pIzsGVocO0gxX2+zUCVjLpBn/Xf3Ro64ekPQSN9NV2E/f3pCYe0Sj6GBwTYFGB2/V/iMqHNUhkG34aREGI88xw4QRn7BjMf/G4eIi7BEko6EwnNjFE+OxKrL3HvTGkrVfJmyoAk9Xw9aoZXRgP0A==' />
        <input type='submit' value='get' style=''>
    </form>

 alipay.trade.precreate通过建立模型AlipayTradePrecreateModel,由AlipayTradePrecreateRequest方式提交,如下图:



 alipay.trade.precreate 生成的二维码支付单:

XML 代码  复制
<alipay_trade_precreate_response>
  <code>10000</code>
  <msg>Success</msg>
  <out_trade_no>20200217113855</out_trade_no>
  <qr_code>https://qr.alipay.com/bax05352zrrrafl8tmne608a</qr_code>
 <sign>hE+c6vSYmC9JhTELKrh9n16a029D0FUkufrOglfJjXmnvXPX5lfWay2YZ/x1YaN
 YA79HMKkduvqhRGX2AJg7u3lY4XIDFO0I3xR7TSToWaDX8KDZGl0Mhalz73YiRhCZ
 JXNgxF3ZJT5hDkbeG1/1LN1GEX86n6VE7KivWACNrxZ/CnZJAVU2jbU8agpR7aWIej
 DsniVxnLxmrokqCgMZ+f/rqYpdaZdse91Lnj/ZerGUock7rtaVKyTzLB/DnZT404AkuwgG
 KkYehvNjw/FcgCW4zs5BM08qZ58Mg+0Hcv4SXe1aul1Gdq+wtcFHlmXAHqGUdvB4G
 7QLF4Vpb/zTnw==</sign>
</alipay_trade_precreate_response>


本文是微信支付和支付宝两种支付的开发思路大概的介绍,这两个支付有共同点,如商户支付订单号可以公用,产品名、价格、产品描述都可以公用,微信支付sign数字签名比支付宝sign要麻烦,支付宝在接口那边已经生成,微信需要字段拼接算出sign提交订单。支付宝可以支持个人账户接入,但是必须要营业执照或个体工商户才可以接入网站平台,微信必须是公司营业执照才可开通。