הגדרת אמצעי תשלום

עסקת תשלום באמצעות Web Payments מתחילה בגילוי אפליקציית התשלום שלכם. בקישורים הבאים מוסבר איך מגדירים אמצעי תשלום ואיך להכין את אפליקציית התשלומים למוכרים וללקוחות לביצוע תשלומים.

Eiji Kitamura

כדי להשתמש ב-Payment Request API, צריך לשייך אפליקציית תשלומים למזהה של אמצעי תשלום. מוכרים שרוצים לשלב במערכות שלהם את אפליקציית תשלומים תשתמשו במזהה אמצעי התשלום כדי לציין זאת בדפדפן. במאמר הזה מוסבר איך פועלת הגילוי של אפליקציות תשלומים, ואיך להגדיר את אפליקציית התשלומים כך שדפדפן יוכל לגלות ולהפעיל אותה בצורה תקינה.

אם אתם לא מכירים את המושג 'תשלומים באינטרנט' או את האופן שבו עסקת תשלום עובדת עם אפליקציות תשלומים, כדאי לקרוא קודם את המאמרים הבאים:

• שיפור אפליקציות התשלום באמצעות תשלומים באינטרנט
• משך החיים של עסקת תשלום

תמיכת דפדפן

תשלומים באינטרנט מורכבים מכמה טכנולוגיות שונות, וסטטוס התמיכה משתנה בהתאם לדפדפן.

	Chromium		Safari		Firefox
	מחשב	Android	מחשב	נייד	מחשב/נייד
ממשק API של בקשת תשלום	✔	✔	✔	✔
ממשק API של Payment Handler	✔	✔
אפליקציית תשלומים ל-iOS או ל-Android	✔	✔	✔*	✔*

הערה: *Safari תומך ב-Apple Pay אבל לא באפליקציות תשלום של צד שלישי.

איך הדפדפן מגלה אפליקציית תשלומים

כל אפליקציית תשלומים צריכה לספק את הפרטים הבאים:

• מזהה אמצעי תשלום שמבוסס על כתובת URL
• מניפסט של אמצעי תשלום (אלא אם מזהה אמצעי התשלום סופק על ידי צד שלישי)
• מניפסט של אפליקציית אינטרנט

תהליך הגילוי מתחיל כשמוכר מבצע עסקה:

1. הדפדפן שולח בקשה לכתובת ה-URL של המזהה של אמצעי התשלום ומאחזר את המניפסט של אמצעי התשלום.
2. הדפדפן מזהה את כתובת ה-URL של המניפסט של אפליקציית האינטרנט מהמניפסט של אמצעי התשלום ומאחזר את המניפסט של אפליקציית האינטרנט.
3. הדפדפן קובע אם להפעיל את אפליקציית התשלומים של מערכת ההפעלה או את אפליקציית התשלומים מבוססת האינטרנט מהמניפסט של אפליקציית האינטרנט.

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

שלב 1: מספקים את מזהה אמצעי התשלום

מזהה אמצעי התשלום הוא מחרוזת שמבוססת על כתובות URL. לדוגמה, המזהה של Google Pay הוא https://google.com/pay. מפתחים של אפליקציות תשלומים יכולים לבחור כל כתובת URL כמזהה של אמצעי התשלום, כל עוד יש להם שליטה עליה והם יכולים להציג תוכן שרירותי. במאמר הזה נשתמש ב-https://bobbucks.dev/pay בתור מזהה אמצעי התשלום.

הערה: אפליקציות תשלומים יכולות לתמוך גם באמצעי תשלום של צד שלישי.

איך מוכרים משתמשים במזהה אמצעי התשלום

האובייקט PaymentRequest מורכב עם רשימה של מזהים של אמצעי תשלום שמזהים את אפליקציות התשלום שהמוכר מחליט לאשר. מזהי אמצעי התשלום מוגדרים כערך של הנכס supportedMethods. למשל:

[המוכר] מבקש תשלום:

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

הערה: הפניות אוטומטיות מותרות עד שלוש פעמים באותו אתר עבור מזהה אמצעי תשלום ב-Chrome.

שלב 2: מילוי המניפסט של אמצעי התשלום

מניפסט של אמצעי תשלום הוא קובץ JSON שמגדיר איזו אפליקציית תשלום יכולה להשתמש באמצעי התשלום הזה.

יש לספק את המניפסט של אמצעי התשלום

כשמוכר מבצע עסקת תשלום, הדפדפן שולח בקשת HTTP GET לכתובת ה-URL של מזהה אמצעי התשלום. התגובה של השרת היא עם גוף המניפסט של אמצעי התשלום.

מניפסט של אמצעי תשלום כולל שני שדות, default_applications ו-supported_origins.

שדות מניפסט של אמצעי תשלום

שם הנכס	תיאור
default_applications (חובה)	מערך של כתובות URL שמפנות למניפסטים של אפליקציות אינטרנט שבהם מתארחות אפליקציות התשלום. (כתובת ה-URL יכולה להיות יחסית). המערך הזה אמור להתייחס למניפסט הפיתוח, למניפסט של סביבת הייצור וכו'.
supported_origins	מערך של כתובות URL שמפנות למקורות שעשויים לארח אפליקציות תשלום של צד שלישי שמטמיעות את אותו אמצעי תשלום. חשוב לשים לב שאפשר להטמיע אמצעי תשלום בכמה אפליקציות תשלום.

קובץ מניפסט של אמצעי תשלום אמור להיראות כך:

[handler של תשלומים] /payment-manifest.json:

{
  "default_applications": ["https://bobbucks.dev/manifest.json"],
  "supported_origins": [
    "https://alicepay.friendsofalice.example"
  ]
}

כשהדפדפן קורא את השדה default_applications, הוא מוצא רשימה של קישורים למניפסטים של אפליקציות אינטרנט של אפליקציות תשלום נתמכות.

הערה: החל מגרסה 83 של Chrome, יש ב-Chrome תמיכה באפליקציית תשלום אחת שמוגדרת כברירת מחדל לכל אמצעי תשלום יחיד.

אפשר לנתב את הדפדפן כדי למצוא את המניפסט של אמצעי התשלום במיקום אחר

לחלופין, כתובת ה-URL של מזהה אמצעי התשלום יכולה להגיב עם כותרת Link שמפנה לכתובת URL אחרת שבה הדפדפן יכול לאחזר את המניפסט של אמצעי התשלום. האפשרות הזו שימושית כשמניפסט של אמצעי תשלום מתארח בשרת אחר או כשאפליקציית התשלום מוצגת על ידי צד שלישי.

מגדירים את שרת אמצעי התשלום כך שיגיב כותרת Link HTTP עם המאפיין rel="payment-method-manifest" וכתובת ה-URL של המניפסט של אמצעי התשלום.

לדוגמה, אם המניפסט נמצא ב-https://bobbucks.dev/payment-manifest.json, כותרת התגובה תכלול:

Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"

כתובת ה-URL יכולה להיות שם דומיין מלא או נתיב יחסי. כדי לראות דוגמה, צריך לבדוק את https://bobbucks.dev/pay/ כדי לראות את תעבורת הנתונים ברשת. אפשר גם להשתמש בפקודה curl:

curl --include https://bobbucks.dev/pay

הערה: מידע נוסף על נוהלי אמצעי התשלום זמין במסמכי התיעוד של W3C.

שלב 3: הצגת מניפסט של אפליקציית אינטרנט

מניפסט של אפליקציית אינטרנט משמש להגדרה של אפליקציית אינטרנט לפי השם שלה. זהו קובץ מניפסט בשימוש נפוץ כדי להגדיר Progressive Web App (PWA).

מניפסט אופייני של אפליקציית אינטרנט ייראה כך:

[payment handler] /manifest.json:

{
  "name": "Pay with Bobpay",
  "short_name": "Bobpay",
  "description": "This is an example of the Payment Handler API.",
  "icons": [
    {
      "src": "images/manifest/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/manifest/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "serviceworker": {
    "src": "service-worker.js",
    "scope": "/",
    "use_cache": false
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.android.samplepay",
      "min_version": "1",
      "fingerprints": [
        {
          "type": "sha256_cert",
          "value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
        }
      ]
    }
  ]
}

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

שדות מניפסט חשובים של אפליקציית אינטרנט

שם הנכס	תיאור
name (חובה)	משמש כשם אפליקציית התשלומים.
icons (חובה)	משמש כסמל של אפליקציית התשלומים. רק Chrome משתמש בסמלים האלה. דפדפנים אחרים יכולים להשתמש בהם כסמלים חלופיים אם לא מציינים אותם כחלק מאמצעי התשלום.
serviceworker	משמש לזיהוי ה-Service Worker שפועל כאפליקציית התשלומים מבוססת-האינטרנט.
serviceworker.src	כתובת ה-URL שממנה להוריד את הסקריפט של Service Worker.
serviceworker.scope	מחרוזת שמייצגת כתובת URL שמגדירה את היקף הרישום של קובץ שירות (service worker).
serviceworker.use_cache	כתובת ה-URL שממנה להוריד את הסקריפט של Service Worker.
related_applications	משמש לזיהוי האפליקציה שמשמשת כאפליקציית התשלומים שמספקת מערכת ההפעלה. לפרטים נוספים אפשר לעיין במדריך למפתחים של אפליקציות תשלומים ל-Android.
prefer_related_applications	משמש כדי לקבוע איזו אפליקציית תשלומים להפעיל כאשר אפליקציית תשלומים שסופקה על ידי מערכת ההפעלה ואפליקציית תשלומים מבוססת-אינטרנט זמינות.

התווית והסמל של אפליקציית התשלומים.

הנכס name בקובץ המניפסט של אפליקציית האינטרנט משמש כשם אפליקציית התשלומים, והנכס icons משמש כסמל של אפליקציית התשלומים.

איך Chrome קובע איזו אפליקציית תשלומים להפעיל

השקה של אפליקציית התשלומים הספציפית לפלטפורמה

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

• השדה related_applications מצוין במניפסט של אפליקציית האינטרנט וגם:
  • מזהה החבילה והתאמת החתימה של האפליקציה המותקנת, אבל הגרסה המינימלית (min_version) בקובץ המניפסט של אפליקציית האינטרנט היא הגרסה של האפליקציה המותקנת או שווה לה.
• השדה prefer_related_applications הוא true.
• אפליקציית התשלומים הספציפית לפלטפורמה מותקנת וכוללת:
  • מסנן Intent של org.chromium.action.PAY.
  • מזהה אמצעי תשלום שמצוין כערך של המאפיין org.chromium.default_payment_method_name.

למידע נוסף על אופן ההגדרה, ראו אפליקציות תשלומים ב-Android: המדריך למפתחים.

[payment handler] /manifest.json

"prefer_related_applications": true,
"related_applications": [{
  "platform": "play",
  "id": "xyz.bobpay.app",
  "min_version": "1",
  "fingerprints": [{
    "type": "sha256_cert",
    "value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
  }]
}]

אם הדפדפן זיהה שאפליקציית התשלומים הספציפית לפלטפורמה זמינה, תהליך הגילוי הסתיים כאן. אם לא, הוא ממשיך לשלב הבא – השקת אפליקציית התשלומים מבוססת-האינטרנט.

השקה של אפליקציית תשלומים מבוססת-אינטרנט

יש לציין את אפליקציית התשלומים מבוססת-האינטרנט בשדה serviceworker במניפסט של אפליקציית האינטרנט.

[payment handler] /manifest.json:

"serviceworker": {
  "src": "payment-handler.js"
}

הדפדפן מפעיל את אפליקציית התשלומים מבוססת-האינטרנט על ידי שליחת אירוע paymentrequest ל-Service Worker. ה-Service Worker לא חייב להירשם מראש. אפשר לרשום אותה בדיוק בזמן.

הבנת האופטימיזציות המיוחדות

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

ב-Chrome, כשמתבצעת הפעלה של השיטה show() של PaymentRequest, ה-Payment Request API מציג ממשק משתמש שסופק על ידי הדפדפן ונקרא 'Payment Request UI'. ממשק המשתמש הזה מאפשר למשתמשים לבחור אפליקציית תשלומים. אחרי שהם לוחצים על הלחצן Continue בממשק המשתמש של בקשת התשלום, אפליקציית התשלומים שנבחרה מופעלת.

ממשק המשתמש של בקשת התשלום מתערב לפני הפעלה של אפליקציית התשלומים.

הצגת ממשק המשתמש של בקשת התשלום לפני הפעלה של אפליקציית תשלומים מגדילה את מספר השלבים שנדרשים למשתמש כדי לבצע תשלום. כדי לייעל את התהליך, הדפדפן יכול להאציל את הקצאת המידע הזה לאפליקציות תשלום ולהפעיל אפליקציית תשלומים ישירות בלי להציג את ממשק המשתמש של בקשת התשלום בהפעלה של show().

ניתן לדלג על ממשק המשתמש של בקשת התשלום ולהפעיל את אפליקציית התשלום ישירות.

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

• האפליקציה show() מופעלת באמצעות תנועת משתמש (לדוגמה, לחיצה בעכבר).
• יש רק אפליקציית תשלומים אחת:
  • תומך במזהה אמצעי התשלום המבוקש.

הערה: ב-Safari יש תמיכה כרגע רק ב-Apple Pay, כך שהאפליקציה תמיד מופעלת ישירות, והמערכת מדלגת על ממשק המשתמש של בקשת התשלום.

מתי אפליקציית תשלומים מבוססת-אינטרנט רשומה 'בדיוק בזמן' (JIT)?

אפשר להפעיל אפליקציות תשלומים מבוססות-אינטרנט בלי שהמשתמש נכנס לאתר של אפליקציית התשלומים באופן מפורש, ובלי לרשום את ה-Service Worker. אפשר לרשום את ה-Service Worker בדיוק בזמן כשהמשתמש בוחר לשלם באמצעות אפליקציית התשלומים מבוססת-האינטרנט. יש שתי וריאציות לתזמון הרישום:

• אם ממשק המשתמש של בקשת התשלום מוצג למשתמש, האפליקציה נרשמת בדיוק בזמן ומופעלת כשהמשתמש לוחץ על המשך.
• אם מדלגים על ממשק המשתמש של בקשת התשלום, אפליקציית התשלומים רשומה בדיוק בזמן ומפעילים אותה ישירות. כדי לדלג על ממשק המשתמש של בקשת התשלום להפעלת אפליקציה שרשומה בדיוק בזמן, נדרשת תנועת משתמש, שמונעת רישום לא צפוי של עובדי שירות ממקורות שונים.

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

השלבים הבאים

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

• אפליקציות תשלומים ל-Android: מדריך למפתחים
• מדריך למפתחים בנושא אפליקציות תשלומים מבוססות-אינטרנט