עסקת תשלום באמצעות תשלומים באינטרנט מתחילה בגילוי של של אפליקציית התשלומים. כך מגדירים אמצעי תשלום ומורידים את אפליקציית התשלומים שמוכנים לאפשר למוכרים וללקוחות לבצע תשלומים.
כדי להשתמש ב-Payment Request API, יש לשייך אפליקציית תשלומים אל מזהה אמצעי תשלום. מוכרים שרוצים לשלב במערכות שלהם אפליקציית תשלומים ישתמש במזהה אמצעי התשלום כדי לציין זאת לדפדפן. הזה במאמר הזה מוסבר איך פועלת הגילוי של אפליקציית תשלומים, ואיך להגדיר את אפליקציית התשלומים כך שדפדפן יוכל לגלות ולהפעיל אותה כראוי.
אם זו הפעם הראשונה שאתם משתמשים באפשרות של תשלומים באינטרנט או איך עסקת תשלום עובדת באפליקציות תשלום, קודם צריך לקרוא את המאמרים הבאים:
תמיכה בדפדפנים
'תשלומים באינטרנט' מורכבת מכמה טכנולוגיות שונות ותמיכה תלוי בדפדפן.
איך הדפדפן מגלה אפליקציית תשלומים
כל אפליקציית תשלומים צריכה לספק את הפרטים הבאים:
- מזהה אמצעי תשלום שמבוסס על כתובת URL
- מניפסט של אמצעי תשלום (אלא אם מזהה אמצעי התשלום הוא סופק על ידי צד שלישי)
- מניפסט של אפליקציית אינטרנט
תהליך הגילוי מתחיל כשמוכר מבצע עסקה:
- הדפדפן שולח בקשה לאמצעי התשלום מזהה של כתובת URL ושל אחזור אמצעי התשלום מניפסט.
- הדפדפן מזהה את אפליקציית האינטרנט של המניפסט מניפסט של אמצעי תשלום ומאחזר את המניפסט של אפליקציית האינטרנט.
- הדפדפן קובע אם להפעיל את אפליקציית התשלומים של מערכת ההפעלה או את אפליקציית תשלום מבוססת-אינטרנט מהמניפסט של אפליקציית האינטרנט.
בקטעים הבאים נסביר בפירוט איך להגדיר אמצעי תשלום משלכם. שדפדפנים יכולים לגלות אותו.
שלב 1: מספקים את מזהה אמצעי התשלום
אמצעי תשלום
מזהה
היא מחרוזת שמבוססת על כתובות URL. לדוגמה, המזהה של Google Pay הוא
https://google.com/pay
מפתחי אפליקציות תשלומים יכולים לבחור כל כתובת URL בתור תשלום
מזהה method, כל עוד יש לו שליטה עליו ויכול להציג מידע שרירותי
תוכן. במאמר הזה נשתמש
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
בקשת 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
, הוא יראה רשימה של
קישורים למניפסטים של אפליקציות אינטרנט של
אפליקציות תשלום.
אפשר לנתב את הדפדפן כדי למצוא את המניפסט של אמצעי התשלום במיקום אחר
כתובת ה-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
שלב 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 שמגדירה את היקף הרישום. |
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
.
- מסנן Intent של
כדאי לעיין במאמר אפליקציות תשלומים ל-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
, אמצעי התשלום
Request API מציג ממשק משתמש שמסופק על ידי דפדפן שנקרא 'ממשק המשתמש של בקשת תשלום'. הזה
ממשק משתמש שמאפשר למשתמשים לבחור אפליקציית תשלומים. לאחר הלחיצה על הלחצן המשך
ממשק המשתמש של בקשת התשלום, אפליקציית התשלומים שנבחרה תושק.
הצגת ממשק המשתמש של בקשת התשלום לפני הפעלה של אפליקציית תשלומים מגדילה את
מספר השלבים שנדרש למשתמש כדי לבצע תשלום. כדי לבצע אופטימיזציה של התהליך,
הדפדפן יכול להאציל את הקצאת המידע הזה לאפליקציות תשלומים
להפעיל אפליקציית תשלום ישירות, בלי להציג את ממשק המשתמש של בקשת התשלום
מתבצעת שיחה אל show()
.
כדי להפעיל אפליקציית תשלומים ישירות, צריכים להתקיים התנאים הבאים:
- האפליקציה
show()
מופעלת באמצעות תנועת משתמש (לדוגמה, לחיצה בעכבר). - יש רק אפליקציית תשלומים אחת:
- תומך במזהה אמצעי התשלום המבוקש.
מתי אפליקציית תשלומים מבוססת-אינטרנט רשומה 'בדיוק בזמן' (JIT)?
ניתן להפעיל אפליקציות תשלום מבוססות-אינטרנט ללא הביקור הקודם של המשתמש לאתר של אפליקציית התשלומים ולרשום את Service Worker. השירות ניתן לרשום את העובד בדיוק בזמן כשהמשתמש בוחר לשלם באמצעות אפליקציית תשלומים מבוססת-אינטרנט. יש שתי וריאציות של תזמון הרישום:
- אם ממשק המשתמש של בקשת התשלום מוצג למשתמש, האפליקציה רשומה. בדיוק בזמן, וההשקה מתבצעת כשהמשתמש לוחץ על המשך.
- אם המערכת מדלגת על ממשק המשתמש של בקשת התשלום, אפליקציית התשלומים רשומה בדיוק בזמן ומושקת ישירות. דילוג על ממשק המשתמש של בקשת התשלום להשקה לאפליקציה שרשומה בדיוק בזמן הנכון נדרשת תנועת משתמש, שמונעת רישום לא צפוי של עובדי שירות ממקורות שונים.
השלבים הבאים
עכשיו, אחרי שאפליקציית התשלומים שלך גלויה לכולם, כדאי לקרוא איך לפתח פלטפורמה ספציפית אפליקציית תשלומים ואפליקציית תשלומים מבוססת-אינטרנט.