עדכונים לממשקי Web Payments API

כאן תוכלו להתעדכן בחידושים בנושא תשלומים באינטרנט.

Danyao Wang
Danyao Wang
Rouslan Solomakhin
Rouslan Solomakhin

התכונה 'תשלומים באינטרנט' זמינה לציבור בדפדפנים מאז 2016. התכונה המרכזית – Payment Request API – זמינה עכשיו במספר דפדפנים: Chrome, ‏ Safari, ‏ Edge ובקרוב גם Firefox. אם זו הפעם הראשונה שאתם משתמשים בתשלומים באינטרנט, כדאי לעיין בסקירה הכללית על תשלומים באינטרנט כדי להתחיל.

מאז ההשקה של Payment Request API ושל Payment Handler API, בוצעו לא מעט שינויים במפרטים שלהם. השינויים האלה לא יגרמו לשיבושים בקוד שפועל, אבל מומלץ לשים לב אליהם. הפוסט הזה מסכם את העדכונים האלה, ונמשיך לצבור בו את השינויים האלה ב-API.

שיטה חדשה: hasEnrolledInstrument()

בגרסה הקודמת של Payment Request API, השדה canMakePayment() שימש לבדיקת נוכחות אמצעי התשלום של המשתמש. בעדכון אחרון למפרט, canMakePayment() הוחלף ב-hasEnrolledInstrument() בלי לשנות את הפונקציונליות שלו.

השיטה hasEnrolledInstrument() מקובלת על כל הדפדפנים העיקריים. Chrome הטמיע את השיטה בגרסה 74, וגם ב-Webkit וב-Gecko יש באגים במעקב, אבל נכון ליוני 2019 הם עדיין לא הטמיעו את השיטה.

כדי להשתמש בשיטה החדשה hasEnrolledInstrument(), מחליפים את הקוד שנראה כך:

// Checking for instrument presence.
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);

באמצעות קוד שנראה כך:

// Checking for instrument presence.
if (request.hasEnrolledInstrument) {
  // hasEnrolledInstrument() is available.
  request.hasEnrolledInstrument().then(handleInstrumentPresence).catch(handleError);
} else {
  request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
}

canMakePayment() כבר לא בודק אם המכשיר נמצא

מכיוון ש-hasEnrolledInstrument() מטפל עכשיו בבדיקת אמצעי התשלום של המשתמש, canMakePayment() עודכן כדי לבדוק רק את הזמינות של אפליקציית התשלום.

השינוי הזה ב-canMakePayment() קשור להטמעה של hasEnrolledInstrument(). נכון ליוני 2019, התכונה הזו מוטמעת ב-Chrome 74, אבל לא בדפדפנים אחרים. לפני שמנסים להשתמש בשיטה hasEnrolledInstrument(), חשוב לבדוק אם היא זמינה בדפדפן של המשתמש.

// Checking for payment app availability without checking for instrument presence.
if (request.hasEnrolledInstrument) {
  // `canMakePayment()` behavior change corresponds to
  // `hasEnrolledInstrument()` availability.
  request.canMakePayment().then(handlePaymentAppAvailable).catch(handleError);
} else {
  console.log("Cannot check for payment app availability without checking for instrument presence.");
}

languageCode הוסר מאמצעי התשלום basic-card

הכתובת PaymentAddress.languageCode הוסרה מהכתובות למשלוח ומהכתובות לחיוב של basic-card. כתובות החיוב של אמצעי תשלום אחרים (כמו Google Pay) לא מושפעות.

השינוי הזה הוטמע ב-Chrome 74, ב-Firefox וב-Safari.

עכשיו אפשר להעביר ל-PaymentRequest.show() את הערך האופציונלי detailsPromise

PaymentRequest.show() מאפשרת למוכרים להציג ממשק משתמש של בקשת תשלום לפני שהם יודעים מהו הסכום הכולל הסופי. למוכרים יש עשר שניות לפתור את הבעיה ב-detailsPromise לפני שחל הזמן הקצוב לתפוגה. התכונה הזו מיועדת לשימוש בצד השרת לצורך נסיעה הלוך ושוב מהירה.

התכונה הזו נוספה ל-Chrome 75 ול-Safari.

// Not implemented in Chrome 74 and older.
// There's no way to feature-detect this, so check a few
// older versions of Chrome that you're seeing hit your servers.
if (/Chrome\/((6[0-9])|(7[0-4]))/g.exec(navigator.userAgent) !== null) {
  return;
}

// Supported in Chrome 75+.
request.show(new Promise(function(resolveDetailsPromise, rejectDetailsPromise) {
  // Find out the exact total amount and call
  // `resolveDetailsPromise(details)`.
  // Use a 3 second timeout as an example.
  window.setTimeout(function() {
    resolveDetailsPromise(details);
  }, 3000); // 3 seconds.
}))
.then(handleResponse)
.catch(handleError);

PaymentRequestEvent.changePaymentMethod()

התכונה Payment Handler API‏ PaymentRequestEvent.changePaymentMethod() מאפשרת למעבדי תשלומים (למשל, Google Pay) כדי להפעיל את הגורם המטפל באירוע onpaymentmethodchange. הפונקציה changePaymentMethod() מחזירה הבטחה שמתקבלת ממנה תגובה מהמוכר עם פרטי מחיר מעודכנים (למשל, חישוב מחדש של המס).

גם האירוע PaymentRequestEvent.changePaymentMethod() וגם האירוע paymentmethodchange זמינים ב-Chrome 76, ו-WebKit הטמיע את האירוע paymentmethodchange בתצוגה המקדימה של הטכנולוגיה.

// In service worker context, `self` is the global object.
self.addEventListener('paymentrequest', (evt) => {
  evt.respondWith(new Promise((confirmPaymentFunction, rejectPaymentFunction) => {
    if (evt.changePaymentMethod === undefined) {
      // Not implemented in this version of Chrome.
      return;
    }
    // Notify merchant that the user selected a different payment method.
    evt.changePaymentMethod('https://paymentapp.com', {country: 'US'})
    .then((responseFromMerchant) => {
      if (responseFromMerchant === null) {
        // Merchant ignored the 'paymentmethodchange' event.
        return;
      }
      handleResponseFromMerchant(responseFromMerchant);
    })
    .catch((error) => {
      handleError(error);
    });
  }));
});

דוגמה למוכר:

if (request.onpaymentmethodchange === undefined) {
  // Feature not available in this browser.
  return;
}

request.addEventListener('paymentmethodchange', (evt) => {
  evt.updateWith(updateDetailsBasedOnPaymentMethod(evt, paymentDetails));
});

שיפור הפיתוח המקומי

בגרסה 76 של Chrome נוספו שני שיפורים קטנים לשיפור הפרודוקטיביות של המפתחים. אם בסביבת הפיתוח המקומית שלכם נעשה שימוש באישור בחתימה עצמית, עכשיו תוכלו להשתמש בדגל שורת הפקודה --ignore-certificate-errors כדי לאפשר ל-Chrome לאפשר ממשקי Web Payments API בסביבת הפיתוח. אם אתם מפתחים באמצעות שרת אינטרנט מקומי שלא תומך ב-HTTPS, תוכלו גם להשתמש בדגל --unsafely-treat-insecure-origin-as-secure=<origin> כדי לגרום ל-Chrome להתייחס למקור ה-HTTP כ-HTTPS.