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

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

Eiji Kitamura
Danyao Wang
Danyao Wang
X
Rouslan Solomakhin
Rouslan Solomakhin
X

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

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

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

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

ל-method 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, אבל לא באף דפדפן אחר. לפני שמנסים להשתמש ב-method 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() מאפשרת למוכרים להציג ממשק משתמש של בקשת תשלום לפני שהם יודעים מהו הסכום הכולל הסופי. לרשות המוכר 10 שניות כדי לפתור את הבעיה 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.