JavaScrip如何安全使用Payment Request API詳解
引言
Payment Request API提供了一個跨瀏覽器標準,允許您從客戶那里收集付款、地址和聯(lián)系信息。然后,您可以使用這些信息來處理他們的訂單。
它還促進了瀏覽器和網(wǎng)站之間交換這些信息。這背后的基本思想是通過讓用戶輕松在瀏覽器中存儲付款和聯(lián)系信息來改善用戶的在線購物體驗。
Payment Request API瀏覽器支持
Payment Request API仍在積極開發(fā)中,僅受現(xiàn)代瀏覽器的最后幾個版本的支持。
在開始提出付款請求之前,您應(yīng)該進行功能檢測,以確保瀏覽器支持API:
if (window.PaymentRequest) { // Yes, we can use the API } else { // No, fallback to the checkout page window.location.href = '/checkout' }
請注意,您只能在超過https
服務(wù)的網(wǎng)站上使用# Payment Request API。
現(xiàn)在讓我們看看這個有用的API是如何工作的。
如何創(chuàng)建PaymentRequest對象
付款請求始終通過使用PaymentRequest()
構(gòu)造函數(shù)創(chuàng)建PaymentRequest
的新對象來啟動。構(gòu)造函數(shù)接受兩個強制性參數(shù)和一個可選參數(shù):
paymentMethods
定義接受哪種付款方式。例如,您只能接受Visa和MasterCard信用卡。paymentDetails
包含應(yīng)付付款總額、稅款、運費、顯示項目等。options
是一個可選參數(shù),用于向用戶請求其他詳細信息,例如姓名、電子郵件、電話等。
接下來,我們將創(chuàng)建一個僅包含所需參數(shù)的新付款請求。
How to use the paymentMethods parameter
const paymentMethods = [ { supportedMethods: ['basic-card'] } ] const paymentDetails = { total: { label: 'Total Amount', amount: { currency: 'USD', value: 8.49 } } } const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails)
Notice the supportedMethods
parameter in the paymentMethods
object. When it is set to basic-card
, both debit and credit cards of all networks will be accepted.
但您可以限制受支持的網(wǎng)絡(luò)和卡片類型。例如,只有以下Visa、MasterCard和Discover信用卡被接受:
const paymentMethods = [ { supportedMethods: ['basic-card'], data: { supportedNetworks: ['visa', 'mastercard', 'discover'], supportedTypes: ['credit'] } } ] // ...
How to use the paymentDetails object
傳遞給PaymentRequest
構(gòu)造函數(shù)的第二個參數(shù)是付款詳細信息對象。它包含訂單總數(shù)和可選的顯示項目數(shù)組。total
參數(shù)必須包括一個label
參數(shù)和一個帶有currency
和value``amount
參數(shù)。
您還可以添加其他顯示項目,以提供總數(shù)的高級細分:
const paymentDetails = { total: { label: 'Total Amount', amount: { currency: 'USD', value: 8.49 } }, displayItems: [ { label: '15% Discount', amount: { currency: 'USD', value: -1.49 } }, { label: 'Tax', amount: { currency: 'USD', value: 0.79 } } ] }
displayItems
參數(shù)并不意味著顯示一長長的項目列表。由于移動設(shè)備上瀏覽器的支付用戶界面的空間有限,您應(yīng)該使用此參數(shù)僅顯示頂級字段,如小計、折扣、稅費、運費等。
Keep in mind that the PaymentRequest
API does not perform any calculations. So your web application is responsible for providing the pre-calculated total
amount.
如何使用options參數(shù)請求更多詳細信息
您可以使用第三個可選參數(shù)向用戶請求其他信息,例如姓名、電子郵件地址和電話號碼:
// ... const options = { requestPayerName: true, requestPayerPhone: true, requestPayerEmail: true } const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails, options)
默認情況下,所有這些值都是false
的,但將它們中的任何一個值為true``options
對象中將導致付款UI中的額外步驟。如果用戶已經(jīng)在瀏覽器中存儲了這些詳細信息,它們將被預先填充。
如何顯示付款用戶界面
創(chuàng)建PaymentRequest
對象后,您必須調(diào)用show()
方法向用戶顯示付款請求UI。
show()
方法返回一個承諾,如果用戶成功填寫了詳細信息,則該promise將使用aPaymentResponse對象解決。如果出現(xiàn)錯誤或用戶關(guān)閉用戶界面,則承諾將被拒絕。
// ... const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails, options) paymentRequest .show() .then(paymentResponse => { // close the payment UI paymentResponse.complete().then(() => { // TODO: call REST API to process the payment at the backend server // with the data from `paymentResponse`. }) }) .catch(err => { // user closed the UI or the API threw an error console.log('Error:', err) })
使用上述代碼,瀏覽器將向用戶顯示付款用戶界面。一旦用戶填寫了詳細信息并單擊“Pay”按鈕,您將在show()
承諾中收到PaymentResponse
對象。
當您調(diào)用PaymentResponse.complete()
方法時,付款請求UI會立即關(guān)閉。此方法返回一個新的承諾,以便您可以使用收集的信息調(diào)用后端服務(wù)器并處理付款。
如果您想在付款用戶界面顯示旋轉(zhuǎn)器時致電后端服務(wù)器處理付款,您可以延遲調(diào)用complete()
)。
Let's create a mock function for payment processing with the backend server. It takes paymentResponse as a parameter and returns a promise after 1.5 seconds that resolves to a JSON object:
const processPaymentWithServer = paymentResponse => { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ status: true }) }, 1500) }) } //... paymentRequest .show() .then(paymentResponse => { processPaymentWithServer(paymentResponse).then(data => { if (data.status) { paymentResponse.complete('success') } else { paymentResponse.complete('fail') } }) }) .catch(err => { console.log('Error:', err) })
在上面的示例中,瀏覽器支付UI將顯示一個處理屏幕,直到processPaymentWithServer()
方法返回的承諾得到解決。我們還使用“成功”和“失敗”字符串來告訴瀏覽器交易結(jié)果。如果您調(diào)用complete('fail')
瀏覽器將向用戶顯示錯誤消息。
如何取消付款請求
如果您想取消付款請求,因為沒有活動或任何其他原因,您可以使用PaymentRequest.abort()
方法。它立即關(guān)閉付款請求UI,并拒絕show()
承諾。
// ... setTimeout(() => { paymentRequest .abort() .then(() => { // aborted payment request console.log('Payment request aborted due to no activity.') }) .catch(err => { // error while aborting console.log('abort() Error: ', err) }) }, 5000)
結(jié)論
這就是JavaScript# Payment Request API快速介紹的結(jié)束。它提供了一種基于瀏覽器的方法來收集客戶付款和聯(lián)系信息,這些信息可以發(fā)送到后端服務(wù)器以處理付款。
以上就是JavaScrip如何安全使用Payment Request API詳解的詳細內(nèi)容,更多關(guān)于JavaScrip Payment Request API的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
javascript中export?和export?default的區(qū)別
本文主要介紹了javascript中export?和export?default的區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-07-07學習javascript,實現(xiàn)插入排序?qū)崿F(xiàn)代碼
首先新建一個空列表,用于保存已排序的有序數(shù)列(我們稱之為"有序列表")。從原數(shù)列中取出一個數(shù),將其插入"有序列表"中,使其仍舊保持有序狀態(tài)。2011-07-07JavaScript實現(xiàn)的前端AES加密解密功能【基于CryptoJS】
這篇文章主要介紹了JavaScript實現(xiàn)的前端AES加密解密功能,涉及javascript基于CryptoJS插件進行AES加密解密操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-08-08ECharts?formatter屬性設(shè)置的3種方法(字符串模板,函數(shù)模板,回調(diào)函數(shù))
formatter有兩種寫法,一種字符串模板,另一種是回調(diào)函數(shù),下面這篇文章主要給大家介紹了關(guān)于ECharts?formatter屬性設(shè)置的3種方法,分別是字符串模板,函數(shù)模板,回調(diào)函數(shù),需要的朋友可以參考下2023-02-02Javascript和jquery在selenium的使用過程
這篇文章主要介紹了Javascript和jquery在selenium的使用過程,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10js+HTML5 canvas 實現(xiàn)簡單的加載條(進度條)功能示例
這篇文章主要介紹了js+HTML5 canvas 實現(xiàn)簡單的加載條(進度條)功能,涉及javascript使用時間函數(shù)與canvas繪圖結(jié)合實現(xiàn)進度條的相關(guān)操作技巧,需要的朋友可以參考下2019-07-07JavaScript實現(xiàn)簡易計算器功能的兩種方法
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易計算器功能的兩種方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07