瞭解商家如何整合付款應用程式,以及付款交易如何與 Payment Request API 搭配運作。
Web Payments API 是首次內建瀏覽器內建的付款功能。有了網路付款功能,商家就能更輕鬆地整合付款應用程式,同時享有簡便又安全的客戶體驗。
如要進一步瞭解使用網路付款的優點,請參閱「透過網路付款功能讓應用程式支援付款應用程式」。
本文將引導您完成商家網站上的付款交易,並協助您瞭解付款應用程式整合的運作方式。
這項程序包含 6 個步驟:
- 商家進行付款交易。
- 商家會顯示付款按鈕。
客戶按下付款按鈕。
瀏覽器啟動付款應用程式。
如果客戶變更任何詳細資料 (例如運送選項或地址),商家就會更新交易明細來反映變更。
在客戶確認購買交易後,商家會驗證付款並完成交易。
步驟 1:商家發起付款交易
客戶決定進行購買交易時,商家會建構 PaymentRequest
物件來啟動付款交易。這個物件包含交易的重要資訊:
- 可接受的付款方式及其資料,以處理交易。
- 詳細資料,例如總價 (必填) 和商品相關資訊。
- 商家可要求提供運送資訊 (如運送地址和運送選項) 的選項。
- 商家也可以要求帳單地址、付款人姓名、電子郵件和電話號碼。
- 商家也可在
PaymentRequest
中加入選用的運送類型 (shipping
、delivery
或pickup
)。付款應用程式可利用這項資訊,提示在 UI 中顯示正確的標籤。
const request = new PaymentRequest([{
supportedMethods: 'https://bobpay.xyz/pay',
data: {
transactionId: '****'
}
}], {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
}, {
requestShipping: true,
requestBillingAddress: true,
requestPayerEmail: true,
requestPayerPhone: true,
requestPayerName: true,
shippingType: 'delivery'
});
部分付款處理常式可能會要求商家提供預先核發的交易 ID,做為交易資訊的一部分。一般整合功能包括商家與付款處理常式伺服器之間的通訊,以便預留總價。這樣可以防止惡意客戶在交易結束時操控價格,也無法透過驗證來欺騙商家。
商家可以在 PaymentMethodData
物件的 data
屬性中傳遞交易 ID。
提供交易資訊後,瀏覽器會根據付款方式 ID,完成 PaymentRequest
中指定的付款應用程式探索程序。這樣一來,當商家準備好繼續進行交易時,瀏覽器就能判斷要啟動的付款應用程式。
如要瞭解探索程序的運作方式,請參閱「設定付款方式」一文。
步驟 2:商家顯示付款按鈕
商家可以支援多種付款方式,但只應在客戶實際可用的付款按鈕中顯示付款按鈕。顯示無法使用的付款按鈕,會對使用者體驗造成負面影響。如果商家可預測 PaymentRequest
物件中指定的付款方式不適用於客戶,他們就能提供備用解決方案或完全不顯示該按鈕。
商家可以使用 PaymentRequest
執行個體查詢客戶是否擁有可用的付款應用程式。
客戶是否提供付款應用程式?
如果客戶的裝置中有付款應用程式,PaymentRequest
的 canMakePayment()
方法會傳回 true
。「可用」表示有支援該付款方式的付款應用程式,且已安裝平台專屬的付款應用程式,或是網頁型付款應用程式已可註冊。
const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
// Fallback to other means of payment or hide the button.
}
步驟 3:顧客按下付款按鈕
客戶按下付款按鈕時,商家會呼叫 PaymentRequest
例項的 show()
方法,立即觸發付款 UI 的啟動作業。
如果最終總價是動態設定 (例如從伺服器擷取),商家可以延後啟動付款 UI,直到總價不明為止。
延後啟動付款使用者介面
請查看如何延遲付款 UI 示範,直到確定最終總價為止。
為了延後付款 UI,商家會將承諾傳送至 show()
方法。瀏覽器會顯示載入指標,直到承諾解決且交易準備開始為止。
const getTotalAmount = async () => {
// Fetch the total amount from the server, etc.
};
try {
const result = await request.show(getTotalAmount());
// Process the result…
} catch(e) {
handleError(e);
}
如果沒有為 show()
指定承諾的引數,瀏覽器會立即啟動付款 UI。
步驟 4:瀏覽器啟動付款應用程式
瀏覽器可以啟動平台專屬或網頁式付款應用程式 (您可以進一步瞭解 Chrome 如何判斷要啟動哪個付款應用程式)。
付款應用程式的建構方式通常是由開發人員組成,但從商家傳送至商家的事件以及與這些事件傳遞的資料結構,都會標準化。
付款應用程式啟動後,將接收傳送至步驟 1 中 PaymentRequest
物件的交易資訊,包括:
- 付款方式資料
- 總價
- 付款方式
付款應用程式會使用交易資訊為其 UI 加上標籤。
步驟 5:商家如何根據客戶的動作更新交易明細
客戶可以選擇在付款應用程式中變更交易詳細資料,例如付款方式、運送選項。客戶進行變更時,商家會收到變更事件並更新交易詳細資料。
商家可接收的事件分為四種類型:
- 付款方式變更事件
- 運送地址變更事件
- 運送選項變更事件
- 商家驗證事件
付款方式變更事件
付款應用程式可以支援多種付款方式,且商家可能會根據客戶的選擇提供特別折扣。如要涵蓋此用途,付款方式變更事件可以通知商家新的付款方式,以便使用者更新總價並提供折扣,並傳回付款應用程式。
request.addEventListener('paymentmethodchange', e => {
e.updateWith({
// Add discount etc.
});
});
運送地址變更事件
付款應用程式可以選擇性提供客戶的運送地址。這樣客戶就不必在表單中手動輸入任何詳細資料,而且他們可以直接將運送地址儲存在偏好的付款應用程式,而不是在多個不同的商家網站儲存。
如果客戶在交易開始後更新付款應用程式中的運送地址,系統就會將 'shippingaddresschange'
事件傳送給商家。此事件可幫助商家根據新地址決定運費、更新總價,並傳回付款應用程式。
request.addEventListener('shippingaddresschange', e => {
e.updateWith({
// Update the details
});
});
如果商家無法出貨至更新後的地址,則可在傳回至付款應用程式的交易詳細資料中加入錯誤參數,藉此提供錯誤訊息。
運送選項變更事件
商家可以向客戶提供多種運送選項,並將該選項委派給付款應用程式。運送選項會以清單形式顯示,供客戶選取。例如:
- 標準配送 - 免運費
- 快速到貨 - 5 美元
客戶在付款應用程式中更新運送選項時,系統會將 'shippingoptionchange'
事件傳送給商家。接著,商家可以確認運費、更新總價,並將總價傳回至付款應用程式。
request.addEventListener('shippingoptionchange', e => {
e.updateWith({
// Update the details
});
});
商家也可以根據客戶的運送地址動態修改運送選項。如果商家想為國內和國際客戶提供不同的運送選項組合,這項功能就非常實用。
商家驗證事件
為了提升安全性,付款應用程式可以在前往付款流程之前執行商家驗證。驗證機制的設計是由付款應用程式設計,但商家驗證事件的作用是告知商家,可用來驗證自己的網址。
request.addEventListener('merchantvalidation', e => {
e.updateWith({
// Use `e.validateURL` to validate
});
});
步驟 6:商家驗證付款並完成交易
客戶成功授權付款後,show()
方法會傳回可解析為 PaymentResponse
的承諾。PaymentResponse
物件包含下列資訊:
- 付款結果詳細資料
- 運送地址
- 運送選項
- 聯絡資訊
此時,瀏覽器 UI 可能仍會顯示載入指標,表示交易尚未完成。
如果付款應用程式���付款失敗或錯誤而終止,show()
傳回的承諾會拒絕,並終止付款交易。
處理及驗證付款
PaymentResponse
中的 details
是付款應用程式傳回的付款憑證物件。商家可使用憑證來處理或驗證付款。此重要流程如何影響付款處理流程。
完成或重試交易
商家判斷交易是否成功或失敗後,可以採取下列任一做法:
- 呼叫
.complete()
方法來完成交易並關閉載入指標。 - 請客戶呼叫
retry()
方法,然後再試一次。
async function doPaymentRequest() {
try {
const request = new PaymentRequest(methodData, details, options);
const response = await request.show();
await validateResponse(response);
} catch (err) {
// AbortError, SecurityError
console.error(err);
}
}
async function validateResponse(response) {
try {
const errors = await checkAllValuesAreGood(response);
if (errors.length) {
await response.retry(errors);
return validateResponse(response);
}
await response.complete("success");
} catch (err) {
// Something went wrong…
await response.complete("fail");
}
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();
後續步驟
- 請參閱「設定付款方式」,進一步瞭解如何宣告付款方式 ID。
- 如要瞭解如何建構平台專用的付款應用程式,請參閱 Android 付款應用程式開發人員指南。
- 如要瞭解如何建構網頁式付款應用程式,請參閱網頁式付款應用程式開發人員指南。