תודה שצפית ב-Google I/O! צפייה בתוכן על פי דרישה.

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

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

Eiji Kitamura

פורסם: 27 בספטמבר 2017, עדכון אחרון: 1 ביולי 2025

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

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

תמיכה בדפדפנים

ממשק Web Payments מורכב מכמה טכנולוגיות שונות, והתמיכה בו תלויה בדפדפן.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מגדירים את שרת אמצעי התשלום כך שישיב עם כותרת HTTP Link עם המאפיין rel="payment-method-manifest" וכתובת ה-URL של מניפסט אמצעי התשלום. לדוגמה, אם קובץ המניפסט נמצא בכתובת https://bobbucks.dev/pay/payment-manifest.json, כותרת התגובה תכלול:

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

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

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

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

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

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

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

[payment handler] /payment-manifest.json:

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

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

שלב 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. לא צריך לרשום את קובץ השירות מראש. אפשר לרשום אותו בדיוק בזמן.

הסבר על האופטימיזציות המיוחדות

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

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

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

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

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

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

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

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

אפשר להפעיל אפליקציות תשלום מבוססות אינטרנט בלי שהמשתמש ביקר קודם באתר של אפליקציית התשלום והפעיל את ה-service worker. אפשר לרשום את ה-service worker בדיוק בזמן שהמשתמש בוחר לשלם באמצעות אפליקציית התשלום מבוססת האינטרנט. יש שני סוגים של תזמון הרישום:

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

השלבים הבאים

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