Payment Handler API के लिए CSP Connect-src ज़रूरी है

पेमेंट हैंडलर एपीआई की मदद से, पेमेंट सेवा देने वाली कंपनियां पेमेंट अनुरोध एपीआई के साथ-साथ, कारोबारियों या कंपनियों के लिए अपने हिसाब से पेमेंट का तरीका उपलब्ध करा सकती हैं.

इस पेज पर दी गई जानकारी सिर्फ़ उन वेबसाइटों पर लागू होती है जो सीएसपी (कॉन्टेंट-सिक्योरिटी-पॉलिसी) और पेमेंट रिक्वेस्ट एपीआई, दोनों का इस्तेमाल करती हैं. अगर इनमें से किसी का भी इस्तेमाल नहीं किया जाता है या सिर्फ़ एक का इस्तेमाल किया जाता है, तो इन निर्देशों को छोड़ा जा सकता है.

यह देखने के लिए कि पेमेंट की सेवा देने वाली कंपनी, पेमेंट हैंडलर एपीआई का इस्तेमाल कर रही है या नहीं, उनसे संपर्क करें और उनके निर्देशों का पालन करें.

बेहतर सुरक्षा के लिए, अगर Payment Handler API और सीएसपी (कॉन्टेंट की सुरक्षा के बारे में नीति) का इस्तेमाल किया जा रहा है, तो आपको यह पक्का करना होगा कि ब्राउज़र से भेजे गए एचटीटीपी अनुरोधों के डोमेन, सीएसपी हेडर के connect-src डायरेक्टिव में जोड़े गए हों.

उदाहरण के लिए, अगर आपका JavaScript कोड new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details) को कॉल करता है, तो आपके सीएसपी connect-src में https://example.com या https://example.com/pay शामिल होना चाहिए:

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

अगर https://example.com/pay कोई क्रॉस-ऑरिजिन रीडायरेक्ट है, तो डेस्टिनेशन ऑरिजिन को भी सीएसपी में शामिल किया जाना चाहिए. उदाहरण के लिए, अगर https://example.com/pay, https://pay.example.com पर रीडायरेक्ट करता है, तो दोनों ऑरिजिन को सीएसपी में शामिल करना होगा:

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

स्थानीय तौर पर आज़माना

डिवाइस शिप होने से पहले, इस सुविधा को स्थानीय तौर पर चालू करने के लिए:

  1. Chrome पर chrome://flags/#web-payment-api-cspपर जाएं.
  2. "वेब पेमेंट एपीआई के लिए सीएसपी नीति" को "डिफ़ॉल्ट" से बदलकर "चालू है" पर सेट करें.
  3. Chrome को रीस्टार्ट करें.

अनुरोध किए गए यूआरएल की जांच करना

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. अपने सीएसपी में, पेमेंट के बताए गए तरीके का आइडेंटिफ़ायर जोड़ें.

Unsplash पर एडुआर्डो सोरेस की फ़ोटो