איך פועל Payment Request API

מידע כללי על ה-Payment Request API.

אייג'י קיטמורה

ממשק 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' }
  }
};

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

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

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

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

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

הבא

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