資訊專欄INFORMATION COLUMN
摘要：用戶代理例如，瀏覽器促進商家和用戶之間的支付流程。布爾值，指示用戶代理是否應收集付款人的電話號碼并使用付款請求提交。表明用戶已經改變了某個指定的支付處理程序中的付款方式。在用戶選擇付款方式并批準付款請求后的返回。
概要
PaymentRequest API 允許商家（即銷售物理或數字商品的網站）以最小的集成使用一種或多種支付方法。用戶代理（例如，瀏覽器）促進商家和用戶之間的支付流程。
github鏈接 https://github.com/w3c/paymen...
w3c規(guī)范鏈接 https://www.w3.org/TR/payment...
出于安全考慮，支付接口必須在https環(huán)境下使用。
使用 PaymentRequestPaymentRequest()構造函數創(chuàng)建一個新的PaymentRequest對象，該對象將用于處理生成、驗證和提交支付請求的過程。
var paymentRequest = new PaymentRequest(methodData, details, [options]);參數
methodData
包含商家網站接受的付款方式的標識符數組以及任何相關的付款方式特定數據。數組中的每個項都包含以下字段：
supportedMethods
商家網站接受的支付方法的一系列標識符
data
提供受支持的付款方式可能需要的可選信息。
details
提供有關所請求事務的信息。此參數包含以下字段：
total
付款請求的總金額。
id (可選)
標識。如果未提供值，則瀏覽器將構造一個值。
displayItems
可選訂單項數組，例如產品詳細信息，稅金和運費。
shippingOptions
用戶可以選擇的送貨方式
modifiers
特定付款方式的修飾符，包含以下字段：
additionalDisplayItems
要附加到details.displayItems屬性的項數組。此屬性通常用于添加折扣或附加訂單項，表示details.modifiers.total中的金額不同。
data
JSON可序列化對象，提供受支持的付款方式可能需要的可選信息。這必須符合BasicCardRequest字典中定義的結構。
total
支付請求的總金額，覆蓋details.total中的值。這通常在details.modifiers.additionalItems向請求添加折扣或購買時使用。
options (可選)
允許您設置控制用戶代理行為的選項。此參數包含以下字段：
requestPayerName
布爾值，指示用戶代理是否應收集付款人的姓名并使用付款請求提交。默認是false。
requestPayerEmail
布爾值，指示用戶代理是否應收集付款人的電子郵件地址并使用付款請求提交。默認是false。
requestPayerPhone
布爾值，指示用戶代理是否應收集付款人的電話號碼并使用付款請求提交。默認是false。
requestShipping
布爾值，指示用戶代理是否應收集付款人的送貨地址并使用付款請求提交。如果將此類型設置為true，則應選擇適當的shippingType。默認是false。
shippingType
允許您指定當“運送”一詞不適合您的用例時，用戶界面如何引用運送。例如，在英語國家，你會說 "pizza delivery" 而不是 "pizza shipping" 。有效值是"shipping"，"delivery"和"pickup"。必須包括引號。默認值為"shipping"。
var supportedInstruments = [{
supportedMethods: "basic-card",
data: {
supportedNetworks: ["visa", "mastercard", "amex", "jcb",
"diners", "discover", "mir", "unionpay"],
supportedTypes: ["credit", "debit"]
}
}];
var details = {
total: {label: "Donation", amount: {currency: "USD", value: "65.00"}},
displayItems: [
{
label: "Original donation amount",
amount: {currency: "USD", value: "65.00"}
}
],
shippingOptions: [
{
id: "standard",
label: "Standard shipping",
amount: {currency: "USD", value: "0.00"},
selected: true
}
]
};
var options = {requestShipping: true};
try {
var request = new PaymentRequest(supportedInstruments, details, options);
// Add event listeners here.
// Call show() to trigger the browser"s payment flow.
request.show().then(function(instrumentResponse) {
// Do something with the response from the UI.
})
.catch(function(err) {
// Do something with the error from request.show().
});
} catch (e) {
// Catch any other errors.
}
onmerchantvalidation
支付處理程序（例如，蘋果公司支付）需要商家來驗證自己。在此之前，用戶將無法繼續(xù)付款。
request.onmerchantvalidation = ev => {
ev.complete(async () => {
// get validation data, and complete validation;
return await fetch(ev.validationURL).then(r => r.text());
})
};
const response = await request.show();
onpaymentmethodchange
表明用戶已經改變了某個指定的支付處理程序中的付款方式。例如，使用Apple Pay時，用戶可以滑動以選擇不同的信用卡，借記卡等。每次用戶這樣做時，都會觸發(fā)此事件。
request.onpaymentmethodchange = ev => {
const { type: cardType } = ev.methodDetails;
const newStuff = {};
if (ev.methodName === "https://apple.com/apple-pay") {
switch (cardType) {
case "store":
// do Apple Pay specific handling for store card...
// methodDetails contains the store card information
const result = calculateDiscount(ev.methodDetails);
Object.assign(newStuff, result);
break;
}
}
// finally...
ev.updateWith(newStuff);
};
const response = await request.show();
onshippingaddresschange
如果用戶代理存儲的地址在付款過程中隨時更改，則會觸發(fā)該事件。
// Initialization of PaymentRequest arguments are excerpted for clarity.
var payment = new PaymentRequest(supportedInstruments, details, options);
request.addEventListener("shippingaddresschange", function(evt) {
evt.updateWith(new Promise(function(resolve) {
updateDetails(details, request.shippingAddress, resolve);
}));
});
payment.show().then(function(paymentResponse) {
// Processing of paymentResponse exerpted for the same of clarity.
}).catch(function(err) {
console.error("Uh oh, something bad happened", err.message);
});
PaymentResponse
在用戶選擇付款方式并批準付款請求后的返回。
屬性：details,methodName,payerEmail,payerName,payerPhone,requestId,shippingAddress,shippingOption
方法：retry(),comlete()
屬性（都是只讀）city,dependentLocality,organization,phone,postalCode,recipient,region,regionCode,sortingCode
方法toJSON()
const supportedInstruments = [
{
supportedMethods: "basic-card",
},
];
const details = {
total: { label: "Donation", amount: { currency: "USD", value: "65.00" } },
displayItems: [
{
label: "Original donation amount",
amount: { currency: "USD", value: "65.00" },
},
],
shippingOptions: [
{
id: "standard",
label: "Standard shipping",
amount: { currency: "USD", value: "0.00" },
selected: true,
},
],
};
const options = { requestShipping: true };
async function doPaymentRequest() {
const request = new PaymentRequest(supportedInstruments, details, options);
// Add event listeners here.
// Call show() to trigger the browser"s payment flow.
const response = await request.show();
// Process payment.
const json = response.toJSON();
const httpResponse = await fetch("/pay/", { method: "POST", body: json });
const result = httpResponse.ok ? "success" : "failure";
await response.complete(result);
}
doPaymentRequest();
PaymentResponse.details包含響應詳細信息的屬性。這必須符合BasicCardResponse字典定義的結構，可能看起來像這樣：
{
"cardNumber" : "9999999999999999",
"cardholderName" : "Mr Dick Straw",
"cardSecurityCode" : "999",
"expiryMonth" : "07",
"expiryYear" : "2021",
"billingAddress" : {
"country" : "GB",
// etc. billing address is a PaymentAddress object
}
}
跨域安全
如果應該允許跨源的