גרסה 62 של Chrome
PaymentDetailsmodifier זמין עכשיו
בבקשות תשלום, יש מקרים שבהם תרצו לתת הנחה או חיוב נוסף, בהתאם לאמצעי התשלום שהלקוח בחר.
PaymentDetailsModifier
היא התכונה שאפשר להשתמש בה כדי להשיג את המטרה הזו.
מוסיפים את המאפיין modifiers
לארגומנט השני של ה-constructor
PaymentRequest
, יחד עם מערך של אובייקט PaymentDetailsModifier
, שהוא כללים הצהרתיים לגבי האופן שבו צריך לשנות את הפריטים לתצוגה ואת הסכום הכולל, בהתאם לאמצעי התשלום לבחירת הלקוח.
בדוגמה הבאה אפשר לראות איך אתם מצהירים על כך שמשתמש יחויב בעמלת עיבוד בסך 3 $עבור תשלום בכרטיס אשראי.
let methods = [{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard']
supportedTypes: ['credit', 'debit']
}
}];
let details = {
displayItems: [{
label: 'T-shirt',
amount: { currency: 'USD', value: '68.00' }
}],
total: {
label: 'Total price',
amount: { currency: 'USD', value: '68.00' }
},
modifiers: [{
supportedMethods: 'basic-card',
data: {
supportedTypes: ['credit']
},
additionalDisplayItems: [{
label: 'Processing fee',
amount: { currency: 'USD', value: '3.00' }
}],
total: {
label: 'Credit card price',
amount: {currency: ‘USD’, value: ‘71.00’}}
}]
};
let options = {};
let request = new PaymentRequest(methods, details, options);
בגיליון בקשת התשלום בפועל, ברגע שהוא יבחר תשלום בכרטיס אשראי, הוא יראה פריט נוסף בשם "עמלת עיבוד" עם חיוב בסך 12 ש"ח, במחיר כולל של 71.00$.
הפרמטר PaymentDetailsModifier
מכיל את הפרמטרים הבאים:
שם הנכס | |
---|---|
supportedMethods | יש לציין איזה אמצעי תשלום מחיל את הכלל הזה. |
additionalDisplayItems |
פריטים נוספים ברשת המדיה שאתם רוצים להוסיף הנחות או חיובים נוספים. |
total | המחיר הכולל אחרי הוספת פריטי DisplayItems הנוספים. |
data | בתשלום של
basic-card , זה ישמש לסינון סוגי כרטיסים ספציפיים באמצעות supportedTypes . אחרת, השימוש בפרמטר הזה תלוי באמצעי התשלום (אפליקציית התשלומים). כדאי לעיין
במסמכי התיעוד של כל אמצעי תשלום. |
כשיש אפשרויות משלוח, זה קצת מסובך כי המחיר הכולל של modifiers
לא יכול להיות סטטי וצריך לבצע בו שינויים דינמיים.
כדי להשיג את זה, תשנו את additionalDisplayItems
ואת total
של הנכס modifiers
באירוע shippingaddresschange
ובאירוע shippingoptionchange
,
בדיוק כמו שעושים בנכס displayItems
של האובייקט PaymentDetails
.
המאפיין SupportMethods מקבל עכשיו מחרוזת
המאפיין supportedMethods
באובייקט PaymentMethodData
(הארגומנט הראשון של הבנאי PaymentRequest
) קיבל מערך של מחרוזות שמציינות אמצעי תשלום. עכשיו הוא משתמש במחרוזת אחת כארגומנט.
שימו לב שמתן מערך ימשיך לפעול בינתיים.
ישן - עדיין פועל בינתיים.
var methodData = [{ supportedMethods: ['basic-card'], data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }, { supportedMethods: ['https://bobpay.xyz'] }];
דרך חדשה – הדרך החדשה.
var methodData = [{ supportedMethods: 'basic-card', data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }, { supportedMethods: 'https://bobpay.xyz' }];
גרסה 61 של Chrome
סוגים נתמכים בכרטיסים בסיסיים זמינים
כשהערך בשדה supportedMethods
הוא 'basic-card
', אפשר לציין עכשיו supportedTypes
כדי לציין את סוגי הכרטיסים שנתמכים בין 'credit
', 'debit
' ו-'prepaid
'.
var methodData = [{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay']
supportedTypes: ['credit', 'debit', 'prepaid']
}
}];
חשוב לבדוק שוב את סוג הכרטיס בשער התשלומים, כי יכול להיות שהסינון לא יפעל כמו שצריך בהתאם למקור שממנו הוא מגיע.
Chrome בגרסה 57
PaymentRequest זמין עכשיו במסגרות iframe
עכשיו אפשר לקרוא ל-Payment Request API מתוך iframe
על ידי הוספת המאפיין
allowpaymentrequest
לרכיב iframe
.
<iframe src="/totally/fake/url" allowpaymentrequest></iframe>
PaymentMethodData תומך במאפיין "basic-card"
הארגומנט הראשון של ה-constructor של PaymentRequest()
הוא מערך של נתונים של אמצעי התשלום. הפורמט PaymentMethodData
השתנה בגרסה הזו.
ישן - עדיין פועל בינתיים.
var methodData = [{ supportedMethods: ['visa', 'mastercard', 'amex', 'jcb'] }]; var request = new PaymentRequest(methodData, details, options);
חדש - המבנה החדש.
var methodData = [{ supportedMethods: ['basic-card'], data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }]; var request = new PaymentRequest(methodData, details, options);
הפורמט של המאפיין data
תלוי בערך ב-supportedMethods
ומבוסס על המפרט של Basic Card. הערה: המפרט כולל את המאפיין supportedTypes
שמקבל את credit
, debit
או prepaid
, אבל ב-Chrome 57 המערכת מתעלמת מהמאפיין הזה ומתייחסת לערכים ב-supoprtedNetworks
ככרטיסי אשראי.
var methodData = [{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay'],
supportedTypes: ['credit'] <= not available
}
}];
Chrome 56
בהמתנה
כחלק מפרטי התשלום, המפתחים יכולים להוסיף את הערך pending
כדי לציין שהמחיר עדיין לא נקבע במלואו. השדה pending
מקבל ערך בוליאני.
{
label: "State tax",
amount: { currency: "USD", value : "5.00" },
pending: true
},
בדרך כלל האפשרות הזו משמשת להצגת פריטים כמו משלוח או סכומי מיסים שתלויים בכתובת למשלוח או באפשרויות המשלוח. Chrome מציין בממשק המשתמש שדות ממתינים עבור בקשת התשלום.
requestPayerName
כחלק מאפשרות המשלוח (הארגומנט השלישי של PaymentRequest
), המפתחים יכולים עכשיו להוסיף את requestPayerName
כדי לבקש את שם המשלם בנפרד מפרטי הכתובת למשלוח.
requestPayerName
מקבל ערך בוליאני.
shippingType
כחלק מאפשרות המשלוח (הארגומנט השלישי של PaymentRequest
), מפתחים יכולים להוסיף עכשיו את shippingType
כדי לבקש שבממשק המשתמש יוצגו הערכים 'delivery' או 'pickup' במקום 'shipping'.
shippingType
מקבל את המחרוזות shipping
(ברירת מחדל), delivery
או pickup
.
פונקציות Serializer זמינות ל-PaymentResponse וב-PaymentAddress
האובייקט של PaymentResponse
והאובייקט PaymentAddress
ניתנים עכשיו לסיווג JSON. המפתחים יכולים להמיר
אחד לאובייקט JSON על ידי קריאה לפונקציה toJSON()
ולהימנע מיצירה של פונקציות toDict()
מסורבלות.
request.show().then(response => {
let res = response.toJSON();
});
canMakePayment
נוסף לזמינות של ה-API, אפשר לבדוק אם למשתמש יש אמצעי תשלום פעיל לפני שמפעילים את Payment Request API. חשוב לזכור שזו לא חובה, כי המשתמשים עדיין יכולים להוסיף אמצעי תשלום חדש בממשק המשתמש לתשלומים.
let request = new PaymentRequest(methods, details, options);
if (request.canMakePayment) {
request.canMakePayment().then(result => {
if (result) {
// Payment methods are available.
} else {
// Payment methods are not available, but users can still add
// a new payment method in Payment UI.
}
}).catch(error => {
// Unable to determine.
});
}