מידע על האופן שבו ה-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' }
}
};
בדיקה אם אמצעי התשלום זמין
במהלך היצירה של אובייקט 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 מחזיר.