資訊專(zhuān)欄INFORMATION COLUMN
摘要：用戶代理例如，瀏覽器促進(jìn)商家和用戶之間的支付流程。布爾值，指示用戶代理是否應(yīng)收集付款人的電話號(hào)碼并使用付款請(qǐng)求提交。表明用戶已經(jīng)改變了某個(gè)指定的支付處理程序中的付款方式。在用戶選擇付款方式并批準(zhǔn)付款請(qǐng)求后的返回。
概要
PaymentRequest API 允許商家（即銷(xiāo)售物理或數(shù)字商品的網(wǎng)站）以最小的集成使用一種或多種支付方法。用戶代理（例如，瀏覽器）促進(jìn)商家和用戶之間的支付流程。
github鏈接 https://github.com/w3c/paymen...
w3c規(guī)范鏈接 https://www.w3.org/TR/payment...
出于安全考慮，支付接口必須在https環(huán)境下使用。
使用 PaymentRequestPaymentRequest()構(gòu)造函數(shù)創(chuàng)建一個(gè)新的PaymentRequest對(duì)象，該對(duì)象將用于處理生成、驗(yàn)證和提交支付請(qǐng)求的過(guò)程。
var paymentRequest = new PaymentRequest(methodData, details, [options]);參數(shù)
methodData
包含商家網(wǎng)站接受的付款方式的標(biāo)識(shí)符數(shù)組以及任何相關(guān)的付款方式特定數(shù)據(jù)。數(shù)組中的每個(gè)項(xiàng)都包含以下字段：
supportedMethods
商家網(wǎng)站接受的支付方法的一系列標(biāo)識(shí)符
data
提供受支持的付款方式可能需要的可選信息。
details
提供有關(guān)所請(qǐng)求事務(wù)的信息。此參數(shù)包含以下字段：
total
付款請(qǐng)求的總金額。
id (可選)
標(biāo)識(shí)。如果未提供值，則瀏覽器將構(gòu)造一個(gè)值。
displayItems
可選訂單項(xiàng)數(shù)組，例如產(chǎn)品詳細(xì)信息，稅金和運(yùn)費(fèi)。
shippingOptions
用戶可以選擇的送貨方式
modifiers
特定付款方式的修飾符，包含以下字段：
additionalDisplayItems
要附加到details.displayItems屬性的項(xiàng)數(shù)組。此屬性通常用于添加折扣或附加訂單項(xiàng)，表示details.modifiers.total中的金額不同。
data
JSON可序列化對(duì)象，提供受支持的付款方式可能需要的可選信息。這必須符合BasicCardRequest字典中定義的結(jié)構(gòu)。
total
支付請(qǐng)求的總金額，覆蓋details.total中的值。這通常在details.modifiers.additionalItems向請(qǐng)求添加折扣或購(gòu)買(mǎi)時(shí)使用。
options (可選)
允許您設(shè)置控制用戶代理行為的選項(xiàng)。此參數(shù)包含以下字段：
requestPayerName
布爾值，指示用戶代理是否應(yīng)收集付款人的姓名并使用付款請(qǐng)求提交。默認(rèn)是false。
requestPayerEmail
布爾值，指示用戶代理是否應(yīng)收集付款人的電子郵件地址并使用付款請(qǐng)求提交。默認(rèn)是false。
requestPayerPhone
布爾值，指示用戶代理是否應(yīng)收集付款人的電話號(hào)碼并使用付款請(qǐng)求提交。默認(rèn)是false。
requestShipping
布爾值，指示用戶代理是否應(yīng)收集付款人的送貨地址并使用付款請(qǐng)求提交。如果將此類(lèi)型設(shè)置為true，則應(yīng)選擇適當(dāng)?shù)?b>shippingType。默認(rèn)是false。
shippingType
允許您指定當(dāng)“運(yùn)送”一詞不適合您的用例時(shí)，用戶界面如何引用運(yùn)送。例如，在英語(yǔ)國(guó)家，你會(huì)說(shuō) "pizza delivery" 而不是 "pizza shipping" 。有效值是"shipping"，"delivery"和"pickup"。必須包括引號(hào)。默認(rèn)值為"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
支付處理程序（例如，蘋(píng)果公司支付）需要商家來(lái)驗(yàn)證自己。在此之前，用戶將無(wú)法繼續(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
表明用戶已經(jīng)改變了某個(gè)指定的支付處理程序中的付款方式。例如，使用Apple Pay時(shí)，用戶可以滑動(dòng)以選擇不同的信用卡，借記卡等。每次用戶這樣做時(shí)，都會(huì)觸發(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
如果用戶代理存儲(chǔ)的地址在付款過(guò)程中隨時(shí)更改，則會(huì)觸發(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
在用戶選擇付款方式并批準(zhǔn)付款請(qǐng)求后的返回。
屬性：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包含響應(yīng)詳細(xì)信息的屬性。這必須符合BasicCardResponse字典定義的結(jié)構(gòu)，可能看起來(lái)像這樣：
{
"cardNumber" : "9999999999999999",
"cardholderName" : "Mr Dick Straw",
"cardSecurityCode" : "999",
"expiryMonth" : "07",
"expiryYear" : "2021",
"billingAddress" : {
"country" : "GB",
// etc. billing address is a PaymentAddress object
}
}
跨域安全
如果應(yīng)該允許跨源的