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

वेब भुगतान का उपयोग करके किया जाने वाला भुगतान लेन-देन आपकी पेमेंट ऐप्लिकेशन. पेमेंट का तरीका सेट अप करने और पेमेंट ऐप्लिकेशन डाउनलोड करने के बारे में जानें इससे कारोबारियों और ग्राहकों को पेमेंट किया जा सकता है.

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

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

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

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

Chromium Safari Firefox
डेस्कटॉप Android डेस्कटॉप मोबाइल डेस्कटॉप/मोबाइल
भुगतान अनुरोध API
पेमेंट हैंडलर एपीआई
iOS/Android पर पेमेंट के लिए इस्तेमाल होने वाला ऐप्लिकेशन ✔* ✔*

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

हर पेमेंट ऐप्लिकेशन के लिए ये चीज़ें उपलब्ध होनी चाहिए:

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

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

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

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

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

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

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

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

[merchant] requests payment:

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

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

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

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

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

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

प्रॉपर्टी का नाम ब्यौरा
default_applications (ज़रूरी) यूआरएल का कलेक्शन, जो उन वेब ऐप्लिकेशन मेनिफ़ेस्ट पर ले जाता है जहां पेमेंट किया जाता है ऐप्लिकेशन होस्ट किए जाते हैं. (यूआरएल कोई मिलता-जुलता हो सकता है). इस कलेक्शन में बदलाव किया जा सकता है में डेवलपमेंट मेनिफ़ेस्ट, प्रोडक्शन मेनिफ़ेस्ट वगैरह का रेफ़रंस हो.
supported_origins यूआरएल का एक कलेक्शन, जो उन ऑरिजिन पर ले जाता है जिन पर तीसरे पक्ष के ऐसे पेमेंट ऐप्लिकेशन हो सकते हैं जो पेमेंट के एक ही तरीके का इस्तेमाल करते हैं. ध्यान दें कि पेमेंट कई पेमेंट ऐप्लिकेशन की मदद से लागू किया जा सकता है.
पेमेंट के तरीके के मेनिफ़ेस्ट फ़ील्ड

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

[payment handler] /payment-manifest.json:

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

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

इसके अलावा, पेमेंट के तरीके का मेनिफ़ेस्ट किसी दूसरी जगह पर ढूंढने के लिए, ब्राउज़र को रीडायरेक्ट किया जा सकता है

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

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

पेमेंट के तरीके वाले सर्वर को कॉन्फ़िगर करें, ताकि वह एचटीटीपी Link हेडर का इस्तेमाल करके जवाब दे सके rel="payment-method-manifest" एट्रिब्यूट और पेमेंट का तरीका मेनिफ़ेस्ट यूआरएल का इस्तेमाल कर रहे हैं.

उदाहरण के लिए, अगर मेनिफ़ेस्ट https://bobbucks.dev/payment-manifest.json पर है, रिस्पॉन्स हेडर में यह शामिल होगा:

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

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

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

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

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

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

[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 इसका इस्तेमाल, वेब पर आधारित पेमेंट ऐप्लिकेशन के तौर पर काम करने वाले सर्विस वर्कर का पता लगाने के लिए किया जाता है.
serviceworker.src वह यूआरएल जिससे सर्विस वर्कर स्क्रिप्ट डाउनलोड करनी है.
serviceworker.scope यूआरएल दिखाने वाली स्ट्रिंग, जो सेवा वर्कर के रजिस्ट्रेशन के दायरे के बारे में बताती है.
serviceworker.use_cache वह यूआरएल जिससे सर्विस वर्कर स्क्रिप्ट डाउनलोड करनी है.
related_applications इस डेटा का इस्तेमाल, ऐसे ऐप्लिकेशन का पता लगाने के लिए किया जाता है जो ओएस से मिलने वाले पेमेंट ऐप्लिकेशन की तरह काम करता है. ज़्यादा जानकारी पाने के लिए, Android पर जाएं पेमेंट ऐप्लिकेशन डेवलपर गाइड देखें.
prefer_related_applications इसका इस्तेमाल यह तय करने के लिए किया जाता है कि ओएस से मिलने वाला पेमेंट ऐप्लिकेशन और वेब पर आधारित पेमेंट ऐप्लिकेशन, दोनों उपलब्ध होने पर कौनसा ऐप्लिकेशन लॉन्च किया जाए.
वेब ऐप्लिकेशन मेनिफ़ेस्ट के ज़रूरी फ़ील्ड
आइकॉन वाला पेमेंट ऐप्लिकेशन.
पेमेंट ऐप्लिकेशन का लेबल और आइकॉन.

वेब ऐप्लिकेशन मेनिफ़ेस्ट की name प्रॉपर्टी का इस्तेमाल, पेमेंट ऐप्लिकेशन के नाम के तौर पर किया जाता है. icons प्रॉपर्टी का इस्तेमाल, पेमेंट ऐप्लिकेशन के आइकॉन के तौर पर किया जाता है.

Chrome यह कैसे तय करता है कि किस पेमेंट ऐप्लिकेशन को लॉन्च करना है

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

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

  • related_applications फ़ील्ड की जानकारी वेब ऐप्लिकेशन मेनिफ़ेस्ट में दी गई है और:
    • इंस्टॉल किए गए ऐप्लिकेशन का पैकेज आईडी और हस्ताक्षर मेल खाते हैं. हालांकि, यह कम से कम वेब ऐप्लिकेशन मेनिफ़ेस्ट में वर्शन (min_version) का मान इससे कम या इसके बराबर है इंस्टॉल किए गए ऐप्लिकेशन का वर्शन हो.
  • prefer_related_applications फ़ील्ड, true है.
  • प्लैटफ़ॉर्म के हिसाब से पेमेंट ऐप्लिकेशन इंस्टॉल हो और उसमें ये चीज़ें मौजूद हों:
    • org.chromium.action.PAY का इंटेंट फ़िल्टर.
    • org.chromium.default_payment_method_name प्रॉपर्टी की वैल्यू के तौर पर बताया गया, पैसे चुकाने का तरीका आइडेंटिफ़ायर.

Android पेमेंट ऐप्लिकेशन: डेवलपर की गाइड देखें पर जाएं.

[पेमेंट हैंडलर] /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 फ़ील्ड में दी जानी चाहिए.

[पेमेंट हैंडलर] /manifest.json:

"serviceworker": {
  "src": "payment-handler.js"
}

ब्राउज़र, सेवा वर्कर को paymentrequest इवेंट भेजकर, वेब-आधारित पेमेंट ऐप्लिकेशन लॉन्च करता है. सर्विस वर्कर को पहले से रजिस्टर करने की ज़रूरत नहीं है. इसे समय पर रजिस्टर किया जा सकता है.

खास ऑप्टिमाइज़ेशन को समझना

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

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

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

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

पेमेंट के अनुरोध का यूज़र इंटरफ़ेस (यूआई) छोड़ें और सीधे पेमेंट ऐप्लिकेशन लॉन्च करें.

किसी पेमेंट ऐप्लिकेशन को सीधे तौर पर लॉन्च करने के लिए, नीचे दी गई शर्तें पूरी करना ज़रूरी है:

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

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

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

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

अगले चरण

अब आपका पेमेंट ऐप्लिकेशन खोजा जा सकता है. इसलिए, प्लैटफ़ॉर्म के हिसाब से पेमेंट ऐप्लिकेशन और वेब-आधारित पेमेंट ऐप्लिकेशन बनाने का तरीका जानें.