איך פועל Payment Request API

סקירה כללית על אופן הפעולה של Payment Request API.

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

כדי ליצור אובייקט PaymentRequest צריך שני פרמטרים: payment methods ו-payment details. בנוסף, אפשר להוסיף פרמטר שלישי של payment options. אפשר ליצור בקשה בסיסית באופן הבא:

const request = new PaymentRequest(paymentMethods, paymentDetails);

נראה איך כל פרמטר נוצר ואיך משתמשים בו.

אמצעי תשלום

הפרמטר הראשון, paymentMethods, הוא רשימה של אמצעי תשלום נתמכים במשתנה מערך. כל רכיב במערך מורכב משני רכיבים, supportedMethods ו-data (אופציונלי).

בשדה supportedMethods, המוכר צריך לציין מזהה של אמצעי תשלום, כמו https://bobbucks.dev/pay. קיומו והתוכן של data תלויים בתוכן של supportedMethods ובעיצוב של ספק אפליקציית התשלומים.

שני פרטי המידע האלה צריכים להינתן על ידי ספק אפליקציית התשלומים.

// Supported payment methods
const paymentMethods = [{
  supportedMethods
: 'https://bobbucks.dev/pay',
  data
: {
   
... // Optional parameters defined by the payment app provider.
 
}
}];

מידע על תשלומים

הפרמטר השני, paymentDetails, מועבר כאובייקט ומציין את פרטי התשלום של העסקה. הוא מכיל את הערך הנדרש total, שמציין את הסכום הכולל שצריך לקבל מהלקוח. אפשר גם לציין בפרמטר הזה את הפריטים שנרכשו.

בדוגמה הבאה מוצגת רשימת הפריטים שנרכשו (רק פריט אחד במקרה הזה), וגם הסכום הכולל לתשלום. בשני המקרים, יחידת המטבע מצוינה לכל סכום בנפרד.

const paymentDetails = {
  displayItems
: [{
    label
: 'Anvil L/S Crew Neck - Grey M x1',
    amount
: { currency: 'USD', value: '22.15' }
 
}],
  total
: {
    label
: 'Total due',
    amount
: { currency: 'USD', value : '22.15' }
 
}
};

בדיקה אם אמצעי התשלום זמין

Chrome בודק אם המשתמש והסביבה מוכנים לבצע תשלום במהלך היצירה של אובייקט PaymentRequest.

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

request.canMakePayment().then(result => {
 
if (result) {
   
// This browser supports the specified payment method.
 
} else {
   
// This browser does NOT support the specified payment method.
 
}
}).catch(e => {
 
// An exception
});

מידע נוסף על PaymentRequest.canMakePayment() ב-MDN

השיטה show()

אחרי שמגדירים את שני הפרמטרים ויוצרים את האובייקט request כפי שמתואר למעלה, אפשר להפעיל את השיטה show(), שמציגה את ממשק המשתמש של אפליקציית התשלום.

request.show().then(response => {
 
// [process payment]
 
// send to a PSP etc.
  response
.complete('success');
});

המראה של ממשק המשתמש של אפליקציית התשלום תלוי לחלוטין בספק של אפליקציית התשלום. אחרי שהלקוח מסכים לבצע תשלום, מועבר אל המוכר אובייקט JSON שמכיל את כל המידע הנדרש להעברת כסף. לאחר מכן, המוכר יכול לשלוח אותו ל-PSP כדי לעבד את התשלום.

בסיום, אפשר לסגור את ממשק המשתמש של בקשת התשלום על ידי השלמת התהליך עם response.complete('success') או response.complete('fail'), בהתאם לתוצאה שחוזרת מה-PSP.

השלב הבא

מידע נוסף על תשלומים באינטרנט