驚呆了，斗拱前端一把梭哈

大家好，我是剛哥！

最近，我準備用AI搭建了一個知識付費站點。借助開源模板和框架我2天就把網站搭建好了。

但萬萬沒想到，在我最擅長的支付領域，卻遭遇了滑鐵盧——支付對接了兩周都沒多少進展，簡直是個填不滿的工作量黑洞。

正當我為此焦頭爛額時，忽然想起匯付斗拱開發者大會提到過“斗拱前端組件”，號稱能在1天內搞定支付對接——這不正是我夢寐以求的嗎？那我得趕緊試試！

01 血虧2周時間

你可能會覺得是因為我太菜了，收銀臺一個頁面還搞不定嗎？

那我們看看一個“小網站”到底有哪些地方要對接支付功能，要不要花兩周時間。

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

圖1：個人站點的支付對接

1.線上支付

我的小站點以WEB端為主，還要支持小程序、公眾號，以適應手機用戶的需求。

現在我急需接入微信支付，這意味著，我要對接掃碼、小程序和JSAPI三個支付產品，并且還要適配對應的終端。加上前期還有證書安裝、簽名驗簽等準備工作，一下子我一周時間就沒了。

這些還只是完成一個正向的支付功能，回調、退款、查詢、訂單同步等配套功能都沒來得及做。哎！先湊合跑通吧。

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

2.線下支付

我還有很多用戶是線下社群轉化過來的，原本想著扔一個二維碼就完事了，自己在后臺給用戶開通使用權限。

后來發現我想簡單了，如果銷售多個產品就要讓用戶選擇品類；賣紙質書需要收集客戶地址。用戶不滿意就要退款，有的用戶還要開發票。

這樣一個人哪里忙得過來，豈不是要雇個助理才行？那就只能逼著我漲價了。

3.商戶控臺

還有更復雜的就是商戶控臺。要給用戶開通產品、要查詢商品，還要退款，還要開發票。功能一大堆不說，一個訂單里面的用戶信息、交易信息、發貨信息、折扣、手續費密密麻麻字段都快100個了。

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

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

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

02 斗拱前端反殺

求助了有經驗的開發小伙伴，他說：“你那個都是老黃歷了，用斗拱前端組件庫一天就搞定了。給你個鏈接你看下就知道了。”

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

斗拱前端組件庫我之前聽說過，是一套托管的開源工具包。圖2就是斗拱平臺的“SDK、Element、Solution”三套開源組件，你只要在商戶端配置好，通過斗拱開發者端發布到托管環境就能用了。

如果有定制需求可以下載他的開源包進行二次開發，基本上一天就能搞定。

這套組件有沒有像宣傳得這么高效？我正好趁這次機會給大家驗證一下。

圖2：斗拱支付托管組件

1.斗拱SDK

網站最重要的就是對接收銀臺，只有支付渠道打通才能真正地實現線上化支付。它可以適配WEB、小程序、公眾號等前端環境；并且能夠集成微信、支付寶、云閃付等主流支付產品，方便用戶付款。

圖3：收銀臺兩種開發方式

線上支付主要對接斗拱的SDK收銀臺，它支持兩種接入方式。

1）標準收銀臺配置：通過商戶后臺可以直接配置出你所需要的收銀臺，上面集成了常用的微信、支付寶、云閃付等各種支付方式。配置好之后，幾行代碼就能集成到你的網站使用了，復雜底層的支付邏輯已經幫你實現好了。

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

顯然對于我這種小網站來說，會選擇工作量最小的標準收銀臺，它1個小時就能搞定了。

2.斗拱賬單支付

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

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

3.商家控臺組件

最后就是讓人頭皮發麻的商家控臺頁面了，斗拱的商家控臺也提供了兩種方式。

1）斗拱標準商家控臺：就是直接使用斗拱的商家端上的查詢、開票功能，無需任何開發。

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

圖5：商家控臺組件庫的五類功能

對于我這種小網站來說，直接用斗拱平臺的標準功能就行了，未來網站做大了再來體驗商家控臺的組件。

03 1天全部回血

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

圖6：斗拱平臺的支付對接

其實線上收銀臺我也只要開發兩個地方（見圖7），即前端的下單請求和后端回調結果監聽，其他復雜的支付邏輯全部交給SDK和托管系統去處理就可以了。

這點工作量對我來說就很輕松了，我一天就把網站掃碼、小程序和公眾號對接完了，并且查詢、退款、回調也都搞定了。

圖7：斗拱SDK的兩個對接要點

04 講在最后

從對接原生通道血虧2天時間，到使用斗拱前端組件1天回血。我最大的感受就是效率非常高，體驗很好。基本上都可以靠配置完成，即使像收銀臺這種必須技術對接的產品，也大多是配置化，開發過程非常簡單。

據了解，按照斗拱的開源計劃，未來還會提供賬單通、禮品卡等解決方案級別的開源項目。并且AI+支付的服務也正在準備推出，未來對接SDK這點工作量可能都沒有了。

參考資料

[1]斗拱開發者站點

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

[3]斗拱前端組件

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