שינויים ב-API של בקשת התשלום

Eiji Kitamura

Chrome 62

האפשרות 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);

בגיליון של בקשת התשלום בפועל, ברגע שבוחרים בתשלום בכרטיס אשראי, מופיע פריט תצוגה נוסף שנקרא 'עמלת טיפול' עם חיוב של 3$, ומחיר כולל של 71$.

PaymentDetailsModifier מכיל את הפרמטרים הבאים:

כשיש אפשרויות משלוח, קצת קשה כי המחיר הכולל של modifiers לא יכול להיות סטטי וצריך לבצע בו שינויים דינמיים.

כדי לעשות זאת, משנים את הערכים של additionalDisplayItems ו-total בנכס modifiers כשמתרחש אירוע shippingaddresschange או shippingoptionchange, בדיוק כמו שמשנים את הערכים של המאפיין displayItems באובייקט PaymentDetails.

המאפיין SupportMethods מקבל עכשיו מחרוזת

המאפיין supportedMethods באובייקט PaymentMethodData (הארגומנט הראשון ל-constructor של 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'
}];

Chrome 61

supportedTypes בכרטיס בסיסי זמין

כשהערך של 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 זמין עכשיו ב-iframes

עכשיו אפשר להפעיל את Payment Request API מתוך iframe על ידי הוספת המאפיין allowpaymentrequest לרכיב iframe.

<iframe src="/totally/fake/url" allowpaymentrequest></iframe>

PaymentMethodData תומך ב-'basic-card'

הארגומנט הראשון למבנה 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

כחלק מshipping option (הארגומנט השלישי ל-PaymentRequest), מפתחים יכולים עכשיו להוסיף את requestPayerName כדי לבקש את שם המשלם בנפרד מהפרטים של הכתובת למשלוח. אפשר להזין ב-requestPayerName ערך בוליאני.

shippingType

כחלק מאפשרות המשלוח (הארגומנט השלישי של PaymentRequest), מפתחים יכולים עכשיו להוסיף את הערך shippingType כדי לבקש שהממשק המשתמש יציג את האפשרויות 'איסוף' או 'העברה' במקום 'משלוח'. השדה shippingType מקבל את המחרוזות shipping (ברירת המחדל), delivery או pickup.

פונקציות סריאליזציה שזמינות ל-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.
     });
}