小編這次要給大家分享的是詳解Vue項(xiàng)目接入Paypal實(shí)現(xiàn),文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、興海網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開發(fā)、興海網(wǎng)絡(luò)營銷、興海企業(yè)策劃、興海品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們大的嘉獎(jiǎng);創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供興海建站搭建服務(wù),24小時(shí)服務(wù)熱線:18980820575,官方網(wǎng)址:www.cdcxhl.com一、支付流程
在paypal的官網(wǎng)上給出了這個(gè)按鈕內(nèi)部封裝的流程,整個(gè)流程只需要用戶點(diǎn)擊按鈕,觸發(fā)創(chuàng)建訂單事件,然后我們?cè)俦O(jiān)聽用戶支付成功的回調(diào),拿到訂單id傳給后端,讓后端再進(jìn)行一次校驗(yàn)。
二、實(shí)現(xiàn)方案
接入方式 | 優(yōu)點(diǎn) | 缺點(diǎn) | 相關(guān)資料 |
---|---|---|---|
在html中插入paypal的script腳本 | 實(shí)現(xiàn)方式比較簡單 | 1、安全性問題:公司的client_id會(huì)暴露在代碼中 2、引用的按鈕樣式比較難自定義 | 官方文檔:https://developer.paypal.com/docs/checkout/integrate/# 更詳細(xì)的說明:https://www.jb51.net/article/188049.htm |
使用官方提供的npm包(有好幾個(gè)) | 1、可以自定義,不需要使用官方給定的button,可以在自己的按鈕上綁定創(chuàng)建事件 2、不會(huì)把client_id暴露出來 | 1、需要仔細(xì)閱讀文檔,開發(fā)難度會(huì)大一點(diǎn) 2、有的需要配合node一起開發(fā) | github:https://github.com/paypal/paypal-checkout-components node-sdk:https://github.com/paypal/Pay... |
使用別人封裝好的npm包 | 1、使用起來方便 2、文檔比較清晰 | 1、可能存在沒人維護(hù)的風(fēng)險(xiǎn) 2、可自定義的部分不多 3、使用的是Paypalv1版接口,官網(wǎng)上用的是v2接口,但是應(yīng)該不影響 | github:https://github.com/khoanguyen96/vue-paypal-checkout |
這是我目前總結(jié)的幾種實(shí)現(xiàn)方案,如果有更好的方案,歡迎在評(píng)論區(qū)告訴我~
三、項(xiàng)目中實(shí)現(xiàn)
由于我是在vue項(xiàng)目實(shí)現(xiàn),經(jīng)過考慮,別人封裝的vue-paypal-checkout庫可以滿足開發(fā)需求,而且使用起來比較簡單,所以暫時(shí)選擇采取這個(gè)方案,接下來我們看看代碼實(shí)現(xiàn)吧!
npm install vue-paypal-checkout
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。