סקירה כללית על Payment Request API

Eiji Kitamura

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

מבנה תשלומים בסיסי

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

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

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

הבא בתור

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