כיצד להתאים את אפליקציית התשלום מבוססת-האינטרנט לתשלומים באינטרנט ולספק חוויית משתמש טובה יותר ללקוחות.
ברגע שאפליקציית תשלום מבוססת-אינטרנט מקבלת בקשת תשלום ומבצעת עסקת תשלום, קובץ השירות (service worker) מתפקד כמרכז התקשורת בין המוכר לאפליקציית התשלום. בפוסט הזה נסביר איך אפליקציית תשלום יכולה להעביר למוכר מידע על אמצעי התשלום, הכתובת למשלוח או הפרטים ליצירת קשר עם המוכר באמצעות קובץ שירות (service worker).
הודעה למוכר על שינוי באמצעי התשלום
אפליקציות תשלום יכולות לתמוך בכמה אמצעי תשלום עם אמצעי תשלום שונים.
| לקוח/ה | אמצעי תשלום | אמצעי תשלום |
|---|---|---|
| A | מנפיק כרטיס אשראי 1 | ****1234 |
| מנפיק כרטיס אשראי 1 | ****4242 |
|
| בנק X | ******123 |
|
| B | מנפיק כרטיס אשראי 2 | ****5678 |
| בנק X | ******456 |
לדוגמה, לפי הטבלה שלמעלה, בארנק מבוסס-האינטרנט של לקוח א' יש שני כרטיסי אשראי וחשבון בנק אחד. במקרה הזה, האפליקציה מטפלת בשלושה אמצעי תשלום (****1234, ****4242, ******123) ובשני אמצעי תשלום (המנפיק של כרטיס האשראי 1 ובנק X). בעסקת תשלום, אפליקציית התשלומים יכולה לאפשר ללקוח לבחור אחד מאמצעי התשלום ולהשתמש בו כדי לשלם בשביל המוכר.
אפליקציית התשלומים יכולה ליידע את המוכר באיזה אמצעי תשלום הלקוח בחר לפני שליחת התשובה המלאה של התשלום. האפשרות הזו שימושית אם המוכר רוצה להפעיל קמפיין של הנחות למותג מסוים של אמצעי תשלום, למשל.
באמצעות Payment Handler API, אפליקציית התשלומים יכולה לשלוח למוכר אירוע מסוג 'שינוי אמצעי תשלום' באמצעות קובץ שירות (service worker) כדי לעדכן את מזהה אמצעי התשלום החדש. ה-Service Worker צריך להפעיל את PaymentRequestEvent.changePaymentMethod() עם הפרטים של אמצעי התשלום החדש.
אפליקציות תשלומים יכולות להעביר אובייקט methodDetails כארגומנט השני האופציונלי של PaymentRequestEvent.changePaymentMethod(). האובייקט יכול להכיל פרטים של אמצעי תשלום שרירותיים שנדרשים כדי שהמוכר יוכל לעבד את אירוע השינוי.
[payment handler] service-worker.js
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'PAYMENT_METHOD_CHANGED':
const newMethod = e.data.paymentMethod;
const newDetails = e.data.methodDetails;
// Redact or check that no sensitive information is passed in
// `newDetails`.
// Notify the merchant of the payment method change
details =
await payment_request_event.changePaymentMethod(newMethod, newDetails);
…
כשהמוכר מקבל אירוע paymentmethodchange מ-Payment Request API, הוא יכול לעדכן את פרטי התשלום ולהגיב באמצעות אובייקט PaymentDetailsUpdate.
[מוכר]
request.addEventListener('paymentmethodchange', e => {
if (e.methodName === 'another-pay') {
// Apply $10 discount for example.
const discount = {
label: 'special discount',
amount: {
currency: 'USD',
// The value being string complies the spec
value: '-10.00'
}
};
let total = 0;
details.displayItems.push(discount);
for (let item of details.displayItems) {
total += parseFloat(item.amount.value);
}
// Convert the number back to string
details.total.amount.value = total.toString();
}
// Pass a promise to `updateWith()` and send updated payment details
e.updateWith(details);
});
כשהמוכר מגיב, ההבטחה
PaymentRequestEvent.changePaymentMethod()
הוחזרה תתקבל באובייקט PaymentRequestDetailsUpdate.
[payment handler] service-worker.js
…
// Notify the merchant of the payment method change
details = await payment_request_event.changePaymentMethod(newMethod, newDetails);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
משתמשים באובייקט כדי לעדכן את ממשק המשתמש בממשק הקצה. מידע נוסף זמין במאמר החזרת פרטי התשלום המעודכנים.
להודיע למוכר על שינוי כתובת למשלוח
אפליקציות תשלומים יכולות לספק למוכר את הכתובת למשלוח של הלקוח כחלק מעסקת תשלום.
זה שימושי למוכרים כי הם יכולים להעניק גישה לאיסוף הכתובות לאפליקציות תשלומים. ומכיוון שנתוני הכתובת יסופקו בפורמט הסטנדרטי של הנתונים, המוכר יכול לקבל כתובות למשלוח במבנה עקבי.
בנוסף, הלקוחות יכולים לרשום את פרטי הכתובת שלהם באפליקציית התשלום המועדפת עליהם, ולהשתמש בהם שוב בשביל מוכרים שונים.
אפליקציות תשלומים יכולות לספק ממשק משתמש לעריכת כתובת למשלוח או לבחירת פרטי כתובת שרשומה מראש ללקוח בטרנזקציית תשלום. כשנקבעת כתובת למשלוח באופן זמני, אפליקציית התשלומים יכולה ליידע את המוכר על הפרטים המצונזרים של הכתובת. כך למוכרים יש כמה יתרונות:
- המוכרים יכולים לברר אם הלקוח עומד בהגבלה האזורית על משלוח הפריט (לדוגמה, מקומי בלבד).
- המוכר יכול לשנות את רשימת אפשרויות המשלוח בהתאם לאזור של הכתובת למשלוח (לדוגמה, משלוח בינלאומי רגיל או אקספרס).
- מוכרים יכולים להחיל את עלות המשלוח החדשה בהתאם לכתובת ולעדכן את המחיר הכולל.
באמצעות ה-Payment Handler API, אפליקציית התשלומים יכולה לשלוח למוכר אירוע 'שינוי כתובת למשלוח' מה-service worker כדי לעדכן את הכתובת החדשה למשלוח. קובץ השירות (service worker) צריך להפעיל את PaymentRequestEvent.changeShippingAddress() עם אובייקט הכתובת החדשה.
[payment handler] service-worker.js
...
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'SHIPPING_ADDRESS_CHANGED':
const newAddress = e.data.shippingAddress;
details =
await payment_request_event.changeShippingAddress(newAddress);
…
המוכר יקבל אירוע shippingaddresschange מ-Payment Request API כדי שיוכל להגיב עם הגרסה המעודכנת של PaymentDetailsUpdate.
[מוכר]
request.addEventListener('shippingaddresschange', e => {
// Read the updated shipping address and update the request.
const addr = request.shippingAddress;
const details = getPaymentDetailsFromShippingAddress(addr);
// `updateWith()` sends back updated payment details
e.updateWith(details);
});
כשהמוכר משיב, ההבטחה PaymentRequestEvent.changeShippingAddress() שמוחזרת תסתיים באובייקט PaymentRequestDetailsUpdate.
[payment handler] service-worker.js
…
// Notify the merchant of the shipping address change
details = await payment_request_event.changeShippingAddress(newAddress);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
משתמשים באובייקט כדי לעדכן את ממשק המשתמש בממשק הקצה. מידע נוסף זמין במאמר החזרת פרטי התשלום המעודכנים.
להודיע למוֹכר על שינוי אפשרות משלוח
אפשרויות משלוח הן שיטות משלוח שבהן מוכרים משתמשים כדי לשלוח ללקוח פריטים שנרכשו. אפשרויות משלוח אופייניות כוללות:
- משלוח חינם
- משלוח מהיר
- משלוחים בינלאומיים
- משלוח בינלאומי פרימיום
לכל רמה יש עלות משלה. בדרך כלל, אפשרויות/שיטות מהירות יותר הן יקרות יותר.
מוכרים שמשתמשים ב-Payment Request API יכולים להעניק את הבחירה הזו לאפליקציית תשלומים. אפליקציית התשלומים יכולה להשתמש במידע הזה כדי לבנות ממשק משתמש ולאפשר ללקוחות לבחור אפשרות משלוח.
רשימת אפשרויות המשלוח שצוינה ב-Payment Request API של המוכר תופץ ל-Service Worker של אפליקציית התשלום כנכס של
PaymentRequestEvent.
[מוכר]
const request = new PaymentRequest([{
supportedMethods: 'https://bobbucks.dev/pay',
data: { transactionId: '****' }
}], {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
shippingOptions: [{
id: 'standard',
label: 'Standard',
amount: { value: '0.00', currency: 'USD' },
selected: true
}, {
id: 'express',
label: 'Express',
amount: { value: '5.00', currency: 'USD' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
}, { requestShipping: true });
אפליקציית התשלום יכולה ליידע את המוכר באיזו אפשרות משלוח הלקוח בחר. זה חשוב גם למוכר וגם ללקוח, כי שינוי אפשרות המשלוח משנה גם את המחיר הכולל. המוכר צריך לדעת מה המחיר העדכני של האימות של התשלום מאוחר יותר, וגם הלקוח צריך להיות מודע לשינוי.
באמצעות ה-API של Handler של תשלומים, אפליקציית התשלומים יכולה לשלוח למוכר אירוע מסוג 'שינוי אפשרות משלוח' מה-Service Worker. ה-Service Worker צריך להפעיל את PaymentRequestEvent.changeShippingOption() עם המזהה החדש של אפשרות המשלוח.
[payment handler] service-worker.js
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'SHIPPING_OPTION_CHANGED':
const newOption = e.data.shippingOptionId;
details =
await payment_request_event.changeShippingOption(newOption);
…
המוכר יקבל אירוע shippingoptionchange מ-Payment Request API. המוכר צריך להשתמש במידע כדי לעדכן את המחיר הכולל, ולאחר מכן להשיב עם המחיר המעודכן PaymentDetailsUpdate.
[מוכר]
request.addEventListener('shippingoptionchange', e => {
// selected shipping option
const shippingOption = request.shippingOption;
const newTotal = {
currency: 'USD',
label: 'Total due',
value: calculateNewTotal(shippingOption),
};
// `updateWith()` sends back updated payment details
e.updateWith({ total: newTotal });
});
כשהמוכר מגיב, ההבטחה
PaymentRequestEvent.changeShippingOption()
הוחזרה תתקבל באובייקט PaymentRequestDetailsUpdate.
[payment handler] service-worker.js
…
// Notify the merchant of the shipping option change
details = await payment_request_event.changeShippingOption(newOption);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
משתמשים באובייקט כדי לעדכן את ממשק המשתמש בממשק הקצה. מידע נוסף זמין במאמר החזרת פרטי התשלום המעודכנים.
לשקף את פרטי התשלום המעודכנים
אחרי שהמוכר יסיים לעדכן את פרטי התשלום, ההבטחות שהוחזרו מ-.changePaymentMethod(), מ-.changeShippingAddress() ומ-.changeShippingOption() ייפתרו עם אובייקט PaymentRequestDetailsUpdate נפוץ. ה-handler של התשלומים יכול להשתמש בתוצאה כדי לשקף בממשק המשתמש את המחיר הכולל המעודכן ואת אפשרויות המשלוח.
מוכרים יכולים להחזיר שגיאות מכמה סיבות:
- אמצעי התשלום לא קביל.
- הכתובת למשלוח היא מחוץ לאזורים הנתמכים.
- הכתובת למשלוח מכילה מידע לא חוקי.
- אי אפשר לבחור את אפשרות המשלוח בגלל הכתובת למשלוח או מסיבה אחרת.
כדי לשקף את סטטוס השגיאה, יש להשתמש במאפיינים הבאים:
error: מחרוזת שגיאה שאנשים יכולים לקרוא. זו המחרוזת הטובה ביותר להצגה ללקוחות.shippingAddressErrors:AddressErrorsאובייקט שמכיל מחרוזת שגיאה ברמת הפרטים לכל מאפיין כתובת. זה שימושי אם אתם רוצים לפתוח טופס שמאפשר ללקוח לערוך את הכתובת שלו, וצריך להפנות אותו ישירות לשדות הלא חוקיים.paymentMethodErrors: אובייקט שגיאה ספציפי לאמצעי תשלום. אפשר לבקש מהמוכרים לספק שגיאה מובנית, אבל המחברים של המפרט של תשלומים באינטרנט ממליצים להשאיר מחרוזת פשוטה.
קוד לדוגמה
רוב הקודים לדוגמה שראיתם במסמך הזה היו קטעים מהאפליקציה הפעילה הבאה:
https://paymenthandler-demo.glitch.me
[handler של תשלום] Service Worker
[handler של תשלום]
כדי לנסות:
- נכנסים לכתובת https://paymentrequest-demo.glitch.me/.
- עבור לתחתית הדף.
- לוחצים על הוספת לחצן תשלום.
- מזינים
https://paymenthandler-demo.glitch.meבשדה מזהה אמצעי תשלום. - מקישים על הלחצן תשלום לצד השדה.