שינויים ב-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.

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

המאפיין 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 ומבוסס על המפרט של כרטיס בסיסי. שימו לב שהמפרט כולל את 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 כדי לבקש שהממשק המשתמש יציג את האפשרויות 'איסוף' או 'העברה' במקום 'משלוח'. השדה 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.
     });
}