איך פועל Payment Request API

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

Eiji Kitamura

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' }
  }
};

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

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

כדי לבדוק אם המשתמש והסביבה מוכנים לביצוע תשלום, צריך להפעיל את 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.

השלב הבא

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