介紹網絡支付：使用支付請求 API 更輕鬆地在線購買

已發表: 2022-03-10

快速總結 ↬ W3C 工作組一直在忙於開發新標準，以幫助簡化在線支付。在本文中，Peter O'Shaughnessy 為您提供了最新的更新，並通過一個基本示例來探索 API。

在線購物可能是一個令人沮喪的過程，尤其是在移動設備上。即使頁面設計得很好，也需要很多信息：我們的聯繫信息、送貨和賬單地址、送貨選項和信用卡詳細信息。如果您有時只是放棄，那麼您就是大多數人。

Baymard 研究所對 37 項不同的研究進行了平均，發現 69% 的購物車被遺棄。

不出所料，移動設備上的數據更差，較小的屏幕和缺少物理鍵盤會使輸入速度變慢。移動端的放棄率可高達 84% 甚至更高！隨著近年來移動瀏覽的興起和興起，這意味著整體問題越來越嚴重。對於電子商務網站來說，這些廢棄的購物車要花費巨額資金。商業內幕人士估計，價值 4 萬億美元的商品將在一年內被丟棄。

值得慶幸的是，網絡正在反擊這個問題。 “網絡支付”W3C 工作組一直忙於“網絡支付革命” ，開發新標準以幫助簡化在線支付。除了作為工作組的名稱外，“網絡支付”本質上是一個涵蓋這些新興標準的總稱。

跳躍後更多！繼續往下看↓

支付請求 API

這些標準中的第一個，支付請求 API ，是向前邁出的重要一步。它使我們能夠向用戶請求付款並讓瀏覽器提供用戶界面來接受它。它已經在 Chrome、Edge 和三星 Internet 中得到支持，並且在 Firefox 和 Safari 中正在開發中。許多知名公司都在採用該 API，包括紐約時報、華盛頓郵報和 Monzo。

Samsung Internet 中 monzo.me 的付款請求 UI 示例 — Samsung Internet 中來自 monzo.me 的付款請求 UI 示例。（大預覽）

從瀏覽器請求此信息提供了直接的主要好處，因為它可能已經存儲了這些詳細信息。只要我們在另一個使用 API 的網站上輸入了我們的詳細信息並允許我們的瀏覽器記住它，瀏覽器就能夠預先填充表單，讓我們更快地結帳。

這比標準的自動填充要好；允許瀏覽器處理輸入字段意味著它可以完全準確——避免在錯誤字段中預先填充錯誤信息的任何問題。這也意味著我們有一個針對移動設備優化的單頁結帳表單，而無需為它編寫自己的 HTML 和 CSS。

在移動設備上可能會感受到更多好處，但支付請求 API 不僅限於移動瀏覽器。 DeX 的 Chrome、Edge 和三星 Internet 的桌面版本已經支持它。我們也可以期待稍後支持桌面版 Firefox 和 Safari（在撰寫本文時，它最近已在 Safari Technology Preview 44 中默認啟用）。

桌面版 Chrome 中的付款請求 UI 示例 — 桌面 Chrome 中的付款請求 UI 示例。（大預覽）

我們的第一次付款請求

讓我們從一個基本示例開始探索 API。我們將向用戶請求信用卡付款，並允許他們像這樣結帳：

Samsung Internet 中的“基本卡”支付請求示例

在上面的視頻中，您會注意到用戶使用指紋確認付款。這不是支付請求標準本身的一部分，而是三星互聯網瀏覽器在支持的設備上提供的安全功能（連同虹膜掃描）。

如果您對在 Web 上集成生物識別身份驗證的進一步潛力感興趣，您可能希望關注即將推出的 Web 身份驗證標準。

首先，像往常一樣，我們應該採用 Progressive Enhancement 並檢查此瀏覽器是否支持 API：

 if (window.PaymentRequest) { // We can continue with the Payment Request API } else { // Here we could fall back to a legacy checkout form }

現在我們可以為我們的 PaymentRequest 設置配置——我們將接受的付款類型以及要顯示的有關購買的詳細信息：

 var methodData = [{ // 'basic-card' means standard card payments - credit and debit cards supportedMethods: 'basic-card' }]; var details = { // If we are buying multiple items, each one can be included displayItems: [ { label: 'Some product that we are buying', amount: {currency: 'USD', value: '699.99'} } ], total: { label: 'Total', amount: {currency: 'USD', value: '699.99'} } }; var paymentRequest = new PaymentRequest(methodData, details);

當我們想要顯示支付界面時（例如當用戶點擊“立即購買”時），我們可以調用show() 。然後我們處理用戶在 promise 解決時提供的數據：

 // show() makes it actually display the user interface paymentRequest.show() .then(function(paymentResponse) { // User has confirmed. paymentResponse contains the data entered. // Here we would process it server-side... processPaymentDetails(paymentResponse) .then(function(paymentResponse) { // ...Then when processed successfully, this will make the dialog indicate success & then close: paymentResponse.complete('success'); // We could also update the page here appropriately }); }) .catch(function(error) { // Handle error, eg if user clicks the 'cancel' button. });

我們現在在前端設置了 UI 流。我們還可以進一步配置它，以滿足我們的要求。例如，如果我們希望向客戶請求額外的詳細信息，我們可以將額外的options傳遞給 PaymentRequest 構造函數。例如，要請求用戶的姓名、電子郵件地址、電話號碼和送貨地址：

 var options = { requestPayerName: true, requestPayerEmail: true, requestPayerPhone: true, requestShipping: true }; var paymentRequest = new PaymentRequest(methodData, details, options);

我們還可以根據客戶的地址定義多個運輸選項，甚至控制動態顯示哪些選項。你可以在 Glitch 上找到一個例子。

用戶體驗

我們開始看到一些令人印象深刻的統計數據，這些統計數據顯示了付款請求可以為公司帶來的好處。谷歌最近分享了時尚品牌 J.Crew 發現其 50% 的用戶現在通過付款請求流程，這將他們的交易時間縮短了 75%！

如何將付款請求集成到您的購物體驗中取決於您，但一種常見的方式是提供“快速結帳”或“立即購買”選項，而無需客戶先登錄。如果您願意，您可以使用付款請求 UI 收集用戶的詳細聯繫信息，一旦他們完成購買，就可以提供創建帳戶的機會，以備將來使用。

如果您願意，您可以先檢查客戶是否已經設置了有效的付款方式，然後再顯示付款請求 UI。為此，您可以調用canMakePayment ：

 if (paymentRequest.canMakePayment) { paymentRequest.canMakePayment().then(function(result) { if (result) { // User has an active payment method } else { // No active payment method yet (but they could add one) } }).catch(function(error) { // Unable to determine }); }

後端集成

我們已經了解瞭如何設置用戶界面以進行付款，但我們如何在後端實際處理付款？

大多數網站不會自己處理付款（這需要非常小心和 PCI DSS 合規性），而是使用第三方支付網關 (PG) 或支付服務提供商 (PSP)。許多支付網關已經引入了對支付請求 API 的特定支持。他們可能會通過您在頁面中包含的自己的腳本發起付款請求，以幫助確保數據安全發送並且您不必自己處理。他們還可能提供 iFrame 或重定向解決方案。最好的方法是諮詢您的支付網關，他們建議如何合併支付請求。

支付應用集成

到目前為止，我們已經討論了卡支付。然而，支付請求 API 也支持移動支付應用程序，如三星支付、Google 支付（包含 Android Pay）和 Apple Pay。

支持 Samsung Pay 和 Pay with Google 的付款請求示例 — 支持 Samsung Pay（左）和 Pay with Google（右）的付款請求示例。（大預覽）

讓我們的客戶使用其中一個應用程序付款意味著他們可以使用他們保存在應用程序中的卡，而無需在瀏覽器中重新輸入詳細信息（即使是第一次）。使用這些應用程序也可以更快，因為它們不需要客戶從卡背面重新輸入他們的 CVC（卡驗證碼，也稱為 CVV）。最後，它們可以帶來額外的安全優勢，因為它們不傳輸原始卡詳細信息，僅傳輸一次性令牌，從而保護我們免受潛在的攔截和重放攻擊。

當客戶選擇支付應用程序作為他們選擇的支付方式時，瀏覽器會切換到應用程序提供的支付表，以確認支付。然後，如果設備支持，第三方應用程序通常會接受客戶的指紋或虹膜掃描以確認付款。

每個支付應用程序都有自己的特定說明，但總體思路是相同的。您可以使用它們自己的特殊 URL 將它們識別為潛在的付款方式，並在data字段中傳遞所需的配置。例如，要支持 Samsung Pay，您可以在methodData數組中包含如下代碼：

 var methodData = [ { supportedMethods: 'https://spay.samsung.com', data: { // Samsung Pay specific data here } }, … // Other payment methods ];

一般來說，有兩種方法可以將這些應用程序與您的支付網關集成：“網關令牌”方法和“網絡令牌”方法。如果您使用支持它的第三方服務，那麼您很可能會使用網關令牌模式，支付應用服務將代表您調用您的支付網關。或者，您可以使用網絡令牌方法，您將使用他們的 SDK 將令牌安全地發送到您的支付網關。您的支付網關和/或支付應用程序提供商應該能夠提供更多詳細信息。

谷歌最近發布了谷歌支付 API，它整合了 Android Pay 以及存儲在客戶谷歌賬戶中的卡。

Apple Pay 目前使用自己的 JavaScript 解決方案 Apple Pay JS。但是，Google 的開發人員創建了一個包裝器，允許您通過標準的支付請求 API 使用它。

下一步是什麼？

Web 支付工作組並沒有止步於支付請求 API。其他標準的工作也在進行中，包括 Payment Handler API，它將允許 Web 應用程序充當第三方支付應用程序。正在討論的其他主題包括圍繞標記化的可能標準化以及支付請求支持禮品卡等內容的能力。如果你想跟上發展，這裡是公共郵件列表。我希望我們能夠一起解決過去令人沮喪的結賬體驗，實現網絡支付革命的願景！