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

‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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

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

Eiji Kitamura

תאריך פרסום: 27 בספטמבר 2017, תאריך עדכון אחרון: 16 באוקטובר 2026

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

אם אתם חדשים בתחום של Web Payments, כדאי לקרוא קודם את הסקירה הכללית של Web Payments.

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

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

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

אפליקציות תשלומים ל-Android זמינות ב-Chrome ב-Android וב-WebView. אפליקציות תשלומים מבוססות-אינטרנט זמינות ב-Chrome בכל הפלטפורמות, אבל לא ב-WebView.

אם שני סוגי האפליקציות זמינים לאמצעי תשלום מסוים, ובקובץ המניפסט של אפליקציית האינטרנט שלכם מוגדר prefer_related_applications ל-true, דפדפן Chrome מסתיר את אפליקציית התשלומים מבוססת-האינטרנט. אחרת, יכול להיות שהמשתמשים יראו את שתיהן בממשק המשתמש של Payment Request ויבחרו ביניהן.

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

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

	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. לדוגמה:

[merchant] requests payment:

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
  },
  "payment": {
    "supported_delegations": ["shippingAddress", "payerName", "payerEmail", "payerPhone"]
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "prefer_related_applications": true,
  "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"
        }
      ]
    }
  ]
}

‫Chrome קורא שדות שונים בהתאם לסוג של אפליקציית התשלומים. באפליקציית תשלומים ל-Android, ‏Chrome קורא רק את related_applications. באפליקציית תשלומים מבוססת-אינטרנט, Chrome קורא את name, icons, serviceworker, payment ו-prefer_related_applications.

שדות חשובים במניפסט של אפליקציית אינטרנט
שם הנכס	תיאור
`name` (חובה)	השם של אפליקציית התשלומים.
`icons` (חובה)	משמש כסמל של אפליקציית התשלומים. רק Chrome משתמש בסמלים האלה. דפדפנים אחרים עשויים להשתמש בהם כסמלים חלופיים אם לא תציינו אותם כחלק מאמצעי התשלום.
`serviceworker`	אפליקציות תשלומים מבוססות-אינטרנט בלבד. מגדיר את ה-service worker שפועל כאפליקציית התשלומים.
`serviceworker.src`	כתובת ה-URL שממנה אפשר להוריד את הסקריפט של ה-service worker.
`serviceworker.scope`	מחרוזת שמייצגת כתובת URL שמגדירה את היקף הרישום של קובץ השירות (service worker).
`serviceworker.use_cache`	האם הדפדפן יכול להשתמש במטמון ה-HTTP שלו כשהוא מאחזר את הסקריפט של ה-service worker.
`payment.supported_delegations`	אפליקציות תשלומים מבוססות-אינטרנט בלבד. פרטי המשלוח ופרטים ליצירת קשר שאפליקציית התשלומים יכולה לספק: `shippingAddress`, `payerName`, `payerEmail` או `payerPhone`. באפליקציות תשלומים ל-Android, המידע הזה מוצהר ב-`AndroidManifest.xml`.
`related_applications`	רק אפליקציות תשלומים ל-Android. מזהה את האפליקציה ואת אישור החתימה שלה. פרטים נוספים זמינים במדריך למפתחים של אפליקציות תשלומים ל-Android.
`prefer_related_applications`	צריך להגדיר את הערך `true` כדי להסתיר את אפליקציית התשלומים מבוססת-האינטרנט כשאפליקציית התשלומים ל-Android מותקנת.

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

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

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

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

השדה related_applications מצוין במניפסט של אפליקציית האינטרנט וגם:
- מזהה החבילה והחתימה של האפליקציה המותקנת תואמים, והגרסה המינימלית (min_version) בקובץ מניפסט של אפליקציית האינטרנט קטנה או שווה לגרסה של האפליקציה המותקנת.
אפליקציית התשלומים הספציפית לפלטפורמה מותקנת ויש לה:
- מסנן Intent של org.chromium.intent.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"
  }]
}]

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

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

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

[payment handler] /manifest.json:

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

הדפדפן מפעיל את אפליקציית התשלומים מבוססת-האינטרנט על ידי שליחת אירוע paymentrequest לקובץ השירות (service worker). לא צריך לרשום את ה-service worker מראש. אפשר לרשום אותו ברגע האחרון.

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

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

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

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

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

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

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

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

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

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

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

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

כשהמוכר מפעיל את show(), דפדפן Chrome שולח אירוע paymentrequest ל-Service Worker. קוראים ל-openWindow() בתוך respondWith() כדי להציג את ממשק המשתמש של התשלום, ואז פותרים את הבעיה באמצעות תגובת התשלום.

ל-API המלא, עיינו ב-Web-Based Payment Handler API ב-MDN.