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

עסקת תשלום באמצעות 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 שמפנות למקורות שעשויים לארח אפליקציות תשלומים של צד שלישי שמטמיעות את אותו אמצעי תשלום. הערה: אפשר להשתמש באמצעי תשלום מסוים בכמה אפליקציות תשלום.

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

[payment handler] /payment-manifest.json:

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

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

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

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

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

הגדירו את שרת אמצעי התשלום להגיב עם כותרת HTTP Link עם המאפיין 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, כשמתבצעת קריאה לאמצעי התשלום PaymentRequest show(), ממשק ה-API של בקשת התשלום מציג ממשק משתמש שסופק על ידי הדפדפן ונקרא 'ממשק המשתמש של בקשת התשלום'. ממשק המשתמש הזה מאפשר למשתמשים לבחור אפליקציית תשלום. לאחר לחיצה על הלחצן Continue (המשך) בממשק המשתמש של Payment Request, אפליקציית התשלום שנבחרה מופעלת.

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

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

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

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

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

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

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

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

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

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

השלבים הבאים

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

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