JavaScript >> Javascript 文檔 >  >> Tags >> API

使用 JavaScript 支付請求 API

付款請求 API 是一種新的 JavaScript API,它提供了一個跨瀏覽器標準來收集客戶的付款、地址和聯繫信息,這些信息可用於處理訂單。它還有助於在瀏覽器和網站之間交換此信息。這背後的整個想法是通過讓用戶在瀏覽器中輕鬆存儲付款和聯繫信息來改善用戶的在線購物體驗。

瀏覽器支持

Payment Request API 仍在積極開發中,僅受最新版本的現代瀏覽器支持。在我們開始發出支付請求之前,我們應該進行功能檢測以確保瀏覽器支持該 API:

if(window.PaymentRequest) {
    // Yes, we can use the API
} else {
    // No, fallback to checkout page
    window.location.href = '/checkout';
}

PaymentRequest 對象

支付請求總是通過創建 PaymentRequest 的新對象來啟動 - 使用 PaymentRequest() 構造函數。構造函數有兩個強制參數和一個可選參數:

  • paymentMethods 定義接受哪些付款方式。例如,您可能只接受 Visa 和 MasterCard 信用卡。
  • paymentDetails 包含應付的總付款金額、稅金、運費、展示物品等。
  • options 是一個可選參數,可用於向用戶請求其他詳細信息,例如姓名、電子郵件、電話等。

讓我們創建一個只包含所需參數的新支付請求:

const paymentMethods = [
    {
        supportedMethods: ['basic-card']
    }
];

const paymentDetails = {
    total: {
        label: 'Total Amount',
        amount: {
            currency: 'USD',
            value: 8.49
        }
    }
};

const paymentRequest = new PaymentRequest(
    paymentMethods,
    paymentDetails
);

注意 supportedMethods paymentMethods 中的參數 目的。當它設置為 basic-card ,將接受所有網絡的借記卡和信用卡。但是,我們可以限制支持的網絡和卡的類型。例如,以下僅接受 Visa、MasterCard 和 Discover 信用卡:

const paymentMethods = [
    {
        supportedMethods: ['basic-card'],
        data: {
            supportedNetworks: ['visa', 'mastercard', 'discover'],
            supportedTypes: ['credit']
        }
    }
];
// ...

付款詳情

傳遞給 PaymentRequest 的第二個強制參數 構造函數是付款明細對象。它包含訂單總數和可選的顯示項目數組。 total 參數必須包含 label 參數和一個 amount currency 的參數 和 value .

您還可以添加額外的顯示項目以提供總體的高級細分:

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 參數並不意味著顯示一長串項目。由於移動設備上瀏覽器的支付界面空間有限,您應該使用它來僅顯示小計、折扣、稅收和運費等頂級字段。

請求更多詳細信息

第三個可選參數可用於向用戶請求附加信息,例如姓名、電子郵件地址和電話號碼:

// ...
const options = {
    requestPayerName: true,
    requestPayerPhone: true,
    requestPayerEmail: true,
};

const paymentRequest = new PaymentRequest(
    paymentMethods,
    paymentDetails,
    options
);

默認情況下,所有這些值都是 false , 但將它們中的任何一個添加到 options 值為 true 的對象 將導致支付 UI 中的額外步驟。如果用戶已經在瀏覽器中存儲了這些詳細信息,它們將被預先填充。

顯示支付界面

創建 PaymentRequest 後 對象,您必須調用 show() 向用戶顯示支付請求 UI 的方法。 show() 方法返回一個用 PaymentResponse 解析的承諾 如果用戶已成功填寫詳細信息,則對象。如果出現錯誤或用戶關閉 UI,則 Promise 會拒絕。

// ...
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 backend server
                // with the data from `paymentResponse`.
            });
    })
    .catch(err => {
        // user closed the UI or the API threw an error
        console.log('Error:', err);
    });

使用上面的代碼,瀏覽器將向用戶顯示支付 UI。用戶填寫詳細信息並點擊“支付”按鈕後,您將收到一個 PaymentResponse show() 中的對象 承諾。當您調用 PaymentResponse.complete() 時,付款請求 UI 會立即關閉 方法。該方法返回一個新的 Promise,以便您可以使用收集到的信息調用後端服務器並處理付款。

如果您想在支付 UI 顯示微調器時調用後端服務器來處理支付,您可以延遲調用 complete() .讓我們為後端服務器的支付處理創建一個模擬函數。它需要 paymentResponse 作為參數並在 1.5 秒後返回一個解析為 JSON 對象的 Promise:

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() 返回的承諾 方法確定。我們還使用“成功”和“失敗”字符串來告訴瀏覽器交易的結果。如果您調用 complete('fail'),瀏覽器將向用戶顯示錯誤消息 .

支付請求中止

如果您因為沒有活動或任何其他原因想取消付款請求,您可以使用PaymentRequest.abort() 方法。它立即關閉支付請求 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);

結論

對 JavaScript 支付請求 API 的快速介紹到此結束。它提供了一種基於瀏覽器的方法來收集客戶付款和聯繫信息,這些信息可以發送到後端服務器以處理付款。目的是減少完成在線支付所涉及的步驟數量。它通過記住用戶支付商品和服務的首選方式,使整個結帳過程更加順暢。

如果您想了解有關 Payment Request API 的更多信息,這裡有一個很好的資源,它討論了 API 的主要概念和用法。


Tutorial JavaScript 教程
  1. 使用 Heroku CLI 在 Heroku 平台上託管 NodeJs 應用程序

  2. 停止過度複雜的 Web 開發 - 嘗試 Svelte

  3. Cypress - 將 cy.route() 替換為 cy.intecept()

  4. 使用 TypeScript 設置 Node/Express

  5. 現代設計系統中的主題

  6. 用正則表達式匹配同一個詞兩次,而不關心這個詞是什麼

  7. 惰性 HTML 評估

  1. 後進先出,先進先出。棧和隊列的區別。快速指南。

  2. 可選鏈接⛓️

  3. 如何在 JavaScript 中合併兩個對像或數組

  4. Next.js 中靜態路由的初學者指南

  5. 如何使用 HTML5 Canvas 實現一流的滾動性能

  6. 節點JS

  7. 面向前端開發人員的柯里化

  1. Twitter Emoji – 如何在您的網站上使用 Twemoji

  2. 將數據從 HTML 表單發送到 Google 表格

  3. 但實際上,什麼是 JavaScript 測試?

  4. 使用 Cloudflare Workers 處理 Jamstack 站點的表單