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

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

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

התכונה 'תשלומים באינטרנט' זמינה לציבור בדפדפנים מאז 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 לאפשר גישה לאינטרנט ממשקי API של Payments בסביבת הפיתוח שלכם. אם לפתח באמצעות אתר אינטרנט מקומי שלא תומך ב-HTTPS, אפשר גם להשתמש סימון --unsafely-treat-insecure-origin-as-secure=<origin> לטיפול ב-Chrome את מקור ה-HTTP כ-HTTPS.