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