איך פועל Payment Request API

מידע על האופן שבו ה-Payment Request API פועל ברמה הכללית.

Eiji Kitamura

ממשק API של בקשת תשלום

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

מבנה בסיסי

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

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 כפי שמוצג למעלה, אפשר לקרוא ל-method show(), שמציגה את ממשק המשתמש של אפליקציית התשלומים.

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

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

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

השלב הבא

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