איך פועל 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' }
  }
};

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

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

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

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 מחזיר.

השלב הבא

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