大家好，我是剛哥！

最近，我準(zhǔn)備用AI搭建了一個(gè)知識(shí)付費(fèi)站點(diǎn)。借助開(kāi)源模板和框架我2天就把網(wǎng)站搭建好了。

但萬(wàn)萬(wàn)沒(méi)想到，在我最擅長(zhǎng)的支付領(lǐng)域，卻遭遇了滑鐵盧——支付對(duì)接了兩周都沒(méi)多少進(jìn)展，簡(jiǎn)直是個(gè)填不滿的工作量黑洞。

正當(dāng)我為此焦頭爛額時(shí)，忽然想起匯付斗拱開(kāi)發(fā)者大會(huì)提到過(guò)“斗拱前端組件”，號(hào)稱能在1天內(nèi)搞定支付對(duì)接——這不正是我夢(mèng)寐以求的嗎？那我得趕緊試試！

01 血虧2周時(shí)間

你可能會(huì)覺(jué)得是因?yàn)槲姨肆?，收銀臺(tái)一個(gè)頁(yè)面還搞不定嗎？

那我們看看一個(gè)“小網(wǎng)站”到底有哪些地方要對(duì)接支付功能，要不要花兩周時(shí)間。

大家可以看到圖1中有線上線下、前端后端4個(gè)地方需要處理支付邏輯。

圖1：個(gè)人站點(diǎn)的支付對(duì)接

1.線上支付

我的小站點(diǎn)以WEB端為主，還要支持小程序、公眾號(hào)，以適應(yīng)手機(jī)用戶的需求。

現(xiàn)在我急需接入微信支付，這意味著，我要對(duì)接掃碼、小程序和JSAPI三個(gè)支付產(chǎn)品，并且還要適配對(duì)應(yīng)的終端。加上前期還有證書(shū)安裝、簽名驗(yàn)簽等準(zhǔn)備工作，一下子我一周時(shí)間就沒(méi)了。

這些還只是完成一個(gè)正向的支付功能，回調(diào)、退款、查詢、訂單同步等配套功能都沒(méi)來(lái)得及做。哎！先湊合跑通吧。

原先還考慮聚合支付寶、云閃付多種支付方式呢，那就要適配9個(gè)終端啊，我都想放棄了。

2.線下支付

我還有很多用戶是線下社群轉(zhuǎn)化過(guò)來(lái)的，原本想著扔一個(gè)二維碼就完事了，自己在后臺(tái)給用戶開(kāi)通使用權(quán)限。

后來(lái)發(fā)現(xiàn)我想簡(jiǎn)單了，如果銷(xiāo)售多個(gè)產(chǎn)品就要讓用戶選擇品類(lèi)；賣(mài)紙質(zhì)書(shū)需要收集客戶地址。用戶不滿意就要退款，有的用戶還要開(kāi)發(fā)票。

這樣一個(gè)人哪里忙得過(guò)來(lái)，豈不是要雇個(gè)助理才行？那就只能逼著我漲價(jià)了。

3.商戶控臺(tái)

還有更復(fù)雜的就是商戶控臺(tái)。要給用戶開(kāi)通產(chǎn)品、要查詢商品，還要退款，還要開(kāi)發(fā)票。功能一大堆不說(shuō)，一個(gè)訂單里面的用戶信息、交易信息、發(fā)貨信息、折扣、手續(xù)費(fèi)密密麻麻字段都快100個(gè)了。

這些功能讓AI做個(gè)單頁(yè)面還行，但是復(fù)雜的查詢、布局、樣式我都不奢望了。數(shù)據(jù)量大了，我還要做分頁(yè)加載。我估算了下，光搭建頁(yè)面做這些查詢功能就又得搞一周。

顯然不管你網(wǎng)站大小，如果對(duì)接原生的微信、支付寶接口，工作量都是一樣的。兩周都是熟練的情況下才能完成，新手一個(gè)月都很正常。

在忙忙碌碌中，2周時(shí)間就被“吞噬掉了”，最后僅跑通了一個(gè)主流程。

02 斗拱前端反殺

求助了有經(jīng)驗(yàn)的開(kāi)發(fā)小伙伴，他說(shuō)：“你那個(gè)都是老黃歷了，用斗拱前端組件庫(kù)一天就搞定了。給你個(gè)鏈接你看下就知道了?！?/p>

小伙伴提供的“斗拱Element”鏈接 https://paas.huifu.com/open/doc/devtools/#/checkout

斗拱前端組件庫(kù)我之前聽(tīng)說(shuō)過(guò)，是一套托管的開(kāi)源工具包。圖2就是斗拱平臺(tái)的“SDK、Element、Solution”三套開(kāi)源組件，你只要在商戶端配置好，通過(guò)斗拱開(kāi)發(fā)者端發(fā)布到托管環(huán)境就能用了。

如果有定制需求可以下載他的開(kāi)源包進(jìn)行二次開(kāi)發(fā)，基本上一天就能搞定。

這套組件有沒(méi)有像宣傳得這么高效？我正好趁這次機(jī)會(huì)給大家驗(yàn)證一下。

圖2：斗拱支付托管組件

1.斗拱SDK

網(wǎng)站最重要的就是對(duì)接收銀臺(tái)，只有支付渠道打通才能真正地實(shí)現(xiàn)線上化支付。它可以適配WEB、小程序、公眾號(hào)等前端環(huán)境；并且能夠集成微信、支付寶、云閃付等主流支付產(chǎn)品，方便用戶付款。

圖3：收銀臺(tái)兩種開(kāi)發(fā)方式

線上支付主要對(duì)接斗拱的SDK收銀臺(tái)，它支持兩種接入方式。

1）標(biāo)準(zhǔn)收銀臺(tái)配置：通過(guò)商戶后臺(tái)可以直接配置出你所需要的收銀臺(tái)，上面集成了常用的微信、支付寶、云閃付等各種支付方式。配置好之后，幾行代碼就能集成到你的網(wǎng)站使用了，復(fù)雜底層的支付邏輯已經(jīng)幫你實(shí)現(xiàn)好了。

2）收銀臺(tái)源碼二開(kāi)：如果想定制化收銀臺(tái)或者想外接其他渠道的支付方式，可以下載生成的源碼包直接本地進(jìn)行二次開(kāi)發(fā)。它提供了iOS、安卓、小程序、網(wǎng)站等多種終端源碼，拿來(lái)改改就能用，當(dāng)然后面的支付渠道就要自己去對(duì)接了。

顯然對(duì)于我這種小網(wǎng)站來(lái)說(shuō)，會(huì)選擇工作量最小的標(biāo)準(zhǔn)收銀臺(tái)，它1個(gè)小時(shí)就能搞定了。

2.斗拱賬單支付

我的私域社群轉(zhuǎn)化的用戶，可以通過(guò)線下賬單支付，在斗拱的商戶端配置后就能生成一個(gè)二維碼，完全不需要開(kāi)發(fā)。這種就太方便了，不用再雇一個(gè)助理幫我打理線下渠道了。

圖4：賬單支付兩種使用方式

3.商家控臺(tái)組件

最后就是讓人頭皮發(fā)麻的商家控臺(tái)頁(yè)面了，斗拱的商家控臺(tái)也提供了兩種方式。

1）斗拱標(biāo)準(zhǔn)商家控臺(tái)：就是直接使用斗拱的商家端上的查詢、開(kāi)票功能，無(wú)需任何開(kāi)發(fā)。

2）商家控臺(tái)Vue組件庫(kù)：如果希望在一個(gè)平臺(tái)內(nèi)就能查到所有數(shù)據(jù)，避免在多個(gè)平臺(tái)間切換登錄的麻煩。斗拱提供了商家控臺(tái)Vue組件庫(kù)，你可以直接下載源碼并集成到自己的系統(tǒng)中，它包含了完整的頁(yè)面交互邏輯、接口調(diào)用流程，并且風(fēng)格統(tǒng)一。

圖5：商家控臺(tái)組件庫(kù)的五類(lèi)功能

對(duì)于我這種小網(wǎng)站來(lái)說(shuō)，直接用斗拱平臺(tái)的標(biāo)準(zhǔn)功能就行了，未來(lái)網(wǎng)站做大了再來(lái)體驗(yàn)商家控臺(tái)的組件。

03 1天全部回血

剩下的我就是把這些開(kāi)源組件庫(kù)集成一下就可以了。首先看下我們調(diào)整后的對(duì)接流程見(jiàn)圖6。從圖中可以看到，只有線上支付的收銀臺(tái)需要技術(shù)對(duì)接。線下賬單支付、商家控臺(tái)我直接在斗拱平臺(tái)上配置一下就可以用了，完全不用開(kāi)發(fā)。

圖6：斗拱平臺(tái)的支付對(duì)接

其實(shí)線上收銀臺(tái)我也只要開(kāi)發(fā)兩個(gè)地方（見(jiàn)圖7），即前端的下單請(qǐng)求和后端回調(diào)結(jié)果監(jiān)聽(tīng)，其他復(fù)雜的支付邏輯全部交給SDK和托管系統(tǒng)去處理就可以了。

這點(diǎn)工作量對(duì)我來(lái)說(shuō)就很輕松了，我一天就把網(wǎng)站掃碼、小程序和公眾號(hào)對(duì)接完了，并且查詢、退款、回調(diào)也都搞定了。

圖7：斗拱SDK的兩個(gè)對(duì)接要點(diǎn)

04 講在最后

從對(duì)接原生通道血虧2天時(shí)間，到使用斗拱前端組件1天回血。我最大的感受就是效率非常高，體驗(yàn)很好。基本上都可以靠配置完成，即使像收銀臺(tái)這種必須技術(shù)對(duì)接的產(chǎn)品，也大多是配置化，開(kāi)發(fā)過(guò)程非常簡(jiǎn)單。

據(jù)了解，按照斗拱的開(kāi)源計(jì)劃，未來(lái)還會(huì)提供賬單通、禮品卡等解決方案級(jí)別的開(kāi)源項(xiàng)目。并且AI+支付的服務(wù)也正在準(zhǔn)備推出，未來(lái)對(duì)接SDK這點(diǎn)工作量可能都沒(méi)有了。

參考資料

[1]斗拱開(kāi)發(fā)者站點(diǎn)

https://paas.huifu.com/open/home/

[3]斗拱前端組件

https://paas.huifu.com/open/doc/devtools/#/checkout_js_sdk