पैसे चुकाने का तरीका सेट अप करना

वेब पेमेंट का इस्तेमाल करके पेमेंट करने की प्रोसेस, आपके पेमेंट ऐप्लिकेशन को खोजने से शुरू होती है. पेमेंट का तरीका सेट अप करने और कारोबारियों या कंपनियों और ग्राहकों के लिए पेमेंट ऐप्लिकेशन तैयार करने का तरीका जानें.

Eiji Kitamura

पब्लिश होने की तारीख: 27 सितंबर, 2017, पिछली बार अपडेट किए जाने की तारीख: 16 अक्टूबर, 2026

Payment Request API के साथ इस्तेमाल करने के लिए, पेमेंट ऐप्लिकेशन को पेमेंट के तरीके के आइडेंटिफ़ायर से जुड़ा होना चाहिए. पेमेंट ऐप्लिकेशन के साथ इंटिग्रेट करने के लिए, कारोबारी या कंपनियां पेमेंट के तरीके के आइडेंटिफ़ायर का इस्तेमाल करेंगी. इससे ब्राउज़र को यह पता चलेगा कि पेमेंट ऐप्लिकेशन के साथ इंटिग्रेट करना है. इस लेख में बताया गया है कि पेमेंट ऐप्लिकेशन को खोजने की सुविधा कैसे काम करती है. साथ ही, पेमेंट ऐप्लिकेशन को कॉन्फ़िगर करने का तरीका बताया गया है, ताकि ब्राउज़र उसे सही तरीके से खोज सके और इस्तेमाल कर सके.

अगर आपको वेब पेमेंट के बारे में ज़्यादा जानकारी नहीं है, तो पहले वेब पेमेंट की खास जानकारी पढ़ें.

पेमेंट ऐप्लिकेशन के टाइप

पेमेंट के किसी तरीके का इस्तेमाल, Android पेमेंट ऐप्लिकेशन, वेब पर आधारित पेमेंट ऐप्लिकेशन या दोनों के साथ किया जा सकता है:

• Android पेमेंट ऐप्लिकेशन: इंस्टॉल किया गया ऐसा ऐप्लिकेशन जिसे Chrome, Android इंटेंट की मदद से लॉन्च करता है. Chrome, ऐप्लिकेशन के पैकेज के नाम और साइनिंग सर्टिफ़िकेट की पुष्टि करता है.
• वेब पर आधारित पेमेंट ऐप्लिकेशन: यह एक सर्विस वर्कर होता है, जिसे Chrome एक मोडल विंडो में लॉन्च करता है. उपयोगकर्ताओं को कुछ भी इंस्टॉल करने की ज़रूरत नहीं है.

Android पर Chrome और WebView में, Android पेमेंट ऐप्लिकेशन उपलब्ध हैं. वेब पर आधारित पेमेंट ऐप्लिकेशन, सभी प्लैटफ़ॉर्म पर Chrome में उपलब्ध हैं. हालांकि, ये WebView में उपलब्ध नहीं हैं.

अगर पेमेंट के किसी तरीके के लिए दोनों तरह के ऐप्लिकेशन उपलब्ध हैं और आपके वेब ऐप्लिकेशन मेनिफ़ेस्ट में prefer_related_applications को true पर सेट किया गया है, तो Chrome आपके वेब-आधारित पेमेंट ऐप्लिकेशन को छिपा देता है. ऐसा न होने पर, हो सकता है कि उपयोगकर्ताओं को पेमेंट रिक्वेस्ट यूज़र इंटरफ़ेस (यूआई) में दोनों ऐप्लिकेशन दिखें और वे उनमें से किसी एक को चुनें.

ब्राउज़र समर्थन

वेब पेमेंट में कुछ अलग-अलग टेक्नोलॉजी शामिल होती हैं. साथ ही, यह ब्राउज़र पर निर्भर करता है कि वह वेब पेमेंट की सुविधा देता है या नहीं.

ब्राउज़र, पेमेंट ऐप्लिकेशन का पता कैसे लगाता है

हर पेमेंट ऐप्लिकेशन को यह जानकारी देनी होगी:

• यूआरएल पर आधारित पेमेंट के तरीके का आइडेंटिफ़ायर
• पेमेंट के तरीके का मेनिफ़ेस्ट (सिर्फ़ तब, जब पेमेंट के तरीके का आइडेंटिफ़ायर किसी तीसरे पक्ष ने दिया हो)
• वेब ऐप्लिकेशन मेनिफ़ेस्ट

खोज की प्रोसेस तब शुरू होती है, जब कोई कारोबारी या कंपनी लेन-देन शुरू करती है:

1. ब्राउज़र, पेमेंट के तरीके के आइडेंटिफ़ायर वाले यूआरएल पर अनुरोध भेजता है और पेमेंट के तरीके का मेनिफ़ेस्ट फ़ेच करता है.
2. ब्राउज़र, पेमेंट के तरीके के मेनिफ़ेस्ट से वेब ऐप्लिकेशन के मेनिफ़ेस्ट का यूआरएल तय करता है और वेब ऐप्लिकेशन का मेनिफ़ेस्ट फ़ेच करता है.
3. ब्राउज़र यह तय करता है कि ओएस पेमेंट ऐप्लिकेशन को लॉन्च करना है या वेब ऐप्लिकेशन मेनिफ़ेस्ट से वेब पर आधारित पेमेंट ऐप्लिकेशन को लॉन्च करना है.

अगले सेक्शन में, पेमेंट का अपना तरीका सेट अप करने के बारे में विस्तार से बताया गया है, ताकि ब्राउज़र उसे ढूंढ सकें.

पहला चरण: पेमेंट के तरीके का आइडेंटिफ़ायर उपलब्ध कराना

पेमेंट के तरीके का आइडेंटिफ़ायर, यूआरएल पर आधारित स्ट्रिंग होती है. उदाहरण के लिए, Google Pay का आइडेंटिफ़ायर https://google.com/pay है. पेमेंट ऐप्लिकेशन के डेवलपर, पेमेंट के तरीके के आइडेंटिफ़ायर के तौर पर किसी भी यूआरएल को चुन सकते हैं. हालांकि, इसके लिए ज़रूरी है कि उनके पास उस यूआरएल का कंट्रोल हो और वे उस पर अपनी पसंद का कॉन्टेंट और एचटीटीपी हेडर दिखा सकें. इस लेख में, हम पेमेंट के तरीके के आइडेंटिफ़ायर के तौर पर https://bobbucks.dev/pay का इस्तेमाल करेंगे.

व्यापारी/कंपनी, पेमेंट के तरीके के आइडेंटिफ़ायर का इस्तेमाल कैसे करती है

PaymentRequest ऑब्जेक्ट को पेमेंट के तरीके के आइडेंटिफ़ायर की सूची के साथ बनाया जाता है. इससे उन पेमेंट ऐप्लिकेशन की पहचान की जाती है जिन्हें कारोबारी या कंपनी स्वीकार करती है. पेमेंट के तरीके के आइडेंटिफ़ायर, supportedMethods प्रॉपर्टी की वैल्यू के तौर पर सेट किए जाते हैं. उदाहरण के लिए:

[merchant] ने पेमेंट का अनुरोध किया है:

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

दूसरा चरण: पेमेंट के तरीके का मेनिफ़ेस्ट उपलब्ध कराना

पेमेंट के तरीके का मेनिफ़ेस्ट एक JSON फ़ाइल होती है. इससे यह तय होता है कि कौनसा पेमेंट ऐप्लिकेशन, पेमेंट के इस तरीके का इस्तेमाल कर सकता है.

पेमेंट के तरीके का मेनिफ़ेस्ट उपलब्ध कराना

जब कोई कारोबारी या कंपनी पेमेंट का लेन-देन शुरू करती है, तो ब्राउज़र, पेमेंट के तरीके के आइडेंटिफ़ायर यूआरएल पर एचटीटीपी HEAD अनुरोध भेजता है. पेमेंट के तरीके के आइडेंटिफ़ायर का यूआरएल, Link एचटीटीपी हेडर के साथ जवाब देता है. यह हेडर उस यूआरएल पर ले जाता है जहां से ब्राउज़र, पेमेंट के तरीके का मेनिफ़ेस्ट फ़ेच कर सकता है.

पेमेंट के तरीके वाले सर्वर को इस तरह कॉन्फ़िगर करें कि वह rel="payment-method-manifest" एट्रिब्यूट और पेमेंट के तरीके के मेनिफ़ेस्ट यूआरएल के साथ एचटीटीपी Link हेडर का जवाब दे. उदाहरण के लिए, अगर मेनिफ़ेस्ट https://bobbucks.dev/pay/payment-manifest.json पर है, तो रिस्पॉन्स हेडर में यह शामिल होगा:

Link: <https://bobbucks.dev/pay/payment-manifest.json>; rel="payment-method-manifest"

यूआरएल, पूरी तरह क्वालिफ़ाइड डोमेन नेम या रिलेटिव पाथ हो सकता है. उदाहरण देखने के लिए, नेटवर्क ट्रैफ़िक के लिए https://bobbucks.dev/pay की जांच करें. curl कमांड का भी इस्तेमाल किया जा सकता है:

curl --include https://bobbucks.dev/pay

इसके बाद, ब्राउज़र, पेमेंट के तरीके के मेनिफ़ेस्ट यूआरएल पर एचटीटीपी GET अनुरोध भेजता है. सर्वर, पेमेंट के तरीके के मेनिफ़ेस्ट की बॉडी के साथ जवाब देता है.

पेमेंट के तरीके के मेनिफ़ेस्ट में दो फ़ील्ड होते हैं, default_applications और supported_origins.

पेमेंट के तरीके की मेनिफ़ेस्ट फ़ाइल कुछ इस तरह दिखनी चाहिए:

[payment handler] /payment-manifest.json:

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

जब ब्राउज़र default_applications फ़ील्ड को पढ़ता है, तो उसे इस्तेमाल किए जा सकने वाले पेमेंट ऐप्लिकेशन के वेब ऐप्लिकेशन मेनिफ़ेस्ट के लिंक की सूची मिलती है.

तीसरा चरण: वेब ऐप्लिकेशन मेनिफ़ेस्ट उपलब्ध कराना

वेब ऐप्लिकेशन मेनिफ़ेस्ट का इस्तेमाल, वेब ऐप्लिकेशन को तय करने के लिए किया जाता है, जैसा कि नाम से पता चलता है. प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए) को तय करने के लिए, यह एक ऐसी मेनिफ़ेस्ट फ़ाइल है जिसका इस्तेमाल बड़े पैमाने पर किया जाता है.

सामान्य वेब ऐप्लिकेशन मेनिफ़ेस्ट कुछ ऐसा दिखेगा:

[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 यह कैसे तय करता है कि कौनसा पेमेंट ऐप्लिकेशन लॉन्च करना है

प्लैटफ़ॉर्म के हिसाब से पेमेंट ऐप्लिकेशन लॉन्च करना

प्लैटफ़ॉर्म के हिसाब से पेमेंट ऐप्लिकेशन लॉन्च करने के लिए, ये शर्तें पूरी करनी होंगी:

• related_applications फ़ील्ड की जानकारी, वेब ऐप्लिकेशन मेनिफ़ेस्ट में दी गई है और:
  • इंस्टॉल किए गए ऐप्लिकेशन का पैकेज आईडी और हस्ताक्षर मैच करता है. साथ ही, वेब ऐप्लिकेशन मेनिफ़ेस्ट में मौजूद कम से कम वर्शन (min_version), इंस्टॉल किए गए ऐप्लिकेशन के वर्शन से कम या उसके बराबर है.
• प्लैटफ़ॉर्म के हिसाब से पेमेंट ऐप्लिकेशन इंस्टॉल किया गया हो और उसमें:
  • 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 इवेंट भेजकर, वेब पर आधारित पेमेंट ऐप्लिकेशन लॉन्च करता है. सर्विस वर्कर को पहले से रजिस्टर करने की ज़रूरत नहीं है. इसे ज़रूरत के समय रजिस्टर किया जा सकता है.

खास ऑप्टिमाइज़ेशन के बारे में जानकारी

ब्राउज़र, पेमेंट के अनुरोध वाले यूज़र इंटरफ़ेस (यूआई) को कैसे स्किप कर सकते हैं और सीधे पेमेंट ऐप्लिकेशन को कैसे लॉन्च कर सकते हैं

Chrome में, जब PaymentRequest के show() तरीके को कॉल किया जाता है, तो Payment Request API, ब्राउज़र से मिले यूज़र इंटरफ़ेस (यूआई) को दिखाता है. इसे "पेमेंट के अनुरोध वाला यूज़र इंटरफ़ेस (यूआई)" कहा जाता है. इस यूज़र इंटरफ़ेस (यूआई) की मदद से, उपयोगकर्ता पेमेंट ऐप्लिकेशन चुन सकते हैं. पेमेंट के अनुरोध वाले यूज़र इंटरफ़ेस (यूआई) में, जारी रखें बटन दबाने के बाद, चुना गया पेमेंट ऐप्लिकेशन लॉन्च हो जाता है.

पेमेंट ऐप्लिकेशन लॉन्च करने से पहले, पेमेंट के अनुरोध का यूज़र इंटरफ़ेस (यूआई) दिखाने से, उपयोगकर्ता को पेमेंट करने के लिए ज़्यादा चरणों को पूरा करना पड़ता है. इस प्रोसेस को ऑप्टिमाइज़ करने के लिए, ब्राउज़र उस जानकारी को पूरा करने की ज़िम्मेदारी पेमेंट ऐप्लिकेशन को सौंप सकता है. साथ ही, show() को कॉल किए जाने पर, पेमेंट के अनुरोध का यूज़र इंटरफ़ेस (यूआई) दिखाए बिना, सीधे पेमेंट ऐप्लिकेशन को लॉन्च कर सकता है.

पेमेंट ऐप्लिकेशन को सीधे लॉन्च करने के लिए, ये शर्तें पूरी करनी होंगी:

• show() को उपयोगकर्ता के जेस्चर से ट्रिगर किया जाता है. उदाहरण के लिए, माउस से क्लिक करना.
• सिर्फ़ एक पेमेंट ऐप्लिकेशन है जो:
  • अनुरोध किए गए पेमेंट के तरीके के आइडेंटिफ़ायर के साथ काम करता हो.
  • यह व्यापारी/कंपनी के अनुरोध के मुताबिक, शिपिंग और संपर्क की पूरी जानकारी देता है.

वेब पर आधारित पेमेंट ऐप्लिकेशन को जस्ट-इन-टाइम (जेआईटी) के तौर पर कब रजिस्टर किया जाता है?

वेब पर आधारित पेमेंट ऐप्लिकेशन को लॉन्च करने के लिए, उपयोगकर्ता को पहले से पेमेंट ऐप्लिकेशन की वेबसाइट पर जाने और सर्विस वर्कर को रजिस्टर करने की ज़रूरत नहीं होती. जब उपयोगकर्ता, वेब पर आधारित पेमेंट ऐप्लिकेशन से पेमेंट करने का विकल्प चुनता है, तब सर्विस वर्कर को तुरंत रजिस्टर किया जा सकता है. रजिस्ट्रेशन के समय के लिए दो विकल्प हैं:

• अगर उपयोगकर्ता को पेमेंट रिक्वेस्ट का यूज़र इंटरफ़ेस (यूआई) दिखाया जाता है, तो ऐप्लिकेशन को उसी समय रजिस्टर किया जाता है. साथ ही, जब उपयोगकर्ता जारी रखें पर क्लिक करता है, तब ऐप्लिकेशन लॉन्च किया जाता है.
• अगर Payment Request यूज़र इंटरफ़ेस (यूआई) को स्किप कर दिया जाता है, तो पेमेंट ऐप्लिकेशन को ज़रूरत के समय रजिस्टर किया जाता है और सीधे लॉन्च किया जाता है. पेमेंट अनुरोध के यूज़र इंटरफ़ेस (यूआई) को स्किप करके, ज़रूरत के समय रजिस्टर किए गए ऐप्लिकेशन को लॉन्च करने के लिए, उपयोगकर्ता के जेस्चर की ज़रूरत होती है. इससे, क्रॉस-ऑरिजिन सर्विस वर्कर के अनचाहे रजिस्ट्रेशन को रोका जा सकता है.

वेब पर आधारित पेमेंट ऐप्लिकेशन बनाना

जब कारोबारी या कंपनी show() को कॉल करती है, तो Chrome आपके सर्विस वर्कर को paymentrequest इवेंट भेजता है. पेमेंट यूज़र इंटरफ़ेस (यूआई) दिखाने के लिए, respondWith() में openWindow() को कॉल करें. इसके बाद, पेमेंट के रिस्पॉन्स के साथ समस्या हल करें.

पूरे एपीआई के लिए, एमडीएन पर वेब-आधारित पेमेंट हैंडलर एपीआई देखें.

अगले चरण

• Android पेमेंट ऐप्लिकेशन के लिए डेवलपर गाइड
• Android पेमेंट ऐप्लिकेशन से शिपिंग और संपर्क जानकारी उपलब्ध कराना