ל-API של מטפל התשלומים נדרש CSP connect-src

Rouslan Solomakhin
Rouslan Solomakhin

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

המידע בדף הזה רלוונטי רק לאתרים שמשתמשים גם ב-CSP (Content-Security-Policy) וגם ב-Payment Request API. אם אתם לא משתמשים באף אחת מהן או רק באחת מהן, תוכלו לדלג על ההוראות האלה.

כדי לבדוק אם ספק התשלומים שלכם משתמש ב-Payment Handler API, פנו אליו ופעלו לפי ההוראות שלו.

אם אתם משתמשים ב-Payment Handler API וב-CSP (Content-Security-Policy) להגנה טובה יותר, עליכם לוודא שהדומיינים של בקשות ה-HTTP שנשלחות מהדפדפן מתווספים להוראה connect-src בכותרת ה-CSP.

לדוגמה, אם קוד ה-JavaScript קורא ל-new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details), ה-CSP connect-src צריך לכלול את https://example.com או את https://example.com/pay:

Content-Security-Policy: connect-src https://example.com/pay

אם https://example.com/pay היא הפניה דרך מקור אחר, צריך לכלול גם את מקור היעד ב-CSP. לדוגמה, אם https://example.com/pay מפנה אל https://pay.example.com, צריך לכלול את שני מקורות הנתונים ב-CSP:

Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com

ניסיון מקומי

כדי להפעיל את התכונה באופן מקומי לפני שהיא נשלחת:

  1. עוברים אל chrome://flags/#web-payment-api-csp ב-Chrome.
  2. משנים את האפשרות 'מדיניות CSP ל-Web Payment API' מ-Default (ברירת מחדל) ל-Enabled (מופעל).
  3. מפעילים מחדש את Chrome.

בדיקת כתובות ה-URL של הבקשות

כדי לבדוק את כתובות ה-URL של הבקשות שנשלחות מ-Payment Handler API:

  1. מפעילים את chrome://flags/#web-payment-api-csp.
  2. עוברים לדף התשלום ופותחים את הכלים למפתחים ב-Chrome.
  3. מחפשים הודעות שגיאה כמו: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. מוסיפים את מזהה השיטה שצוין ל-CSP.

תמונה של Eduardo Soares ב-Unsplash