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

אייג'י קיטמורה

Twitter GitHub Glitch Mastodon

גרסה 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.

shippingType="delivery"

shippingType="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.
     });
}