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

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

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

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

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

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

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

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

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

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

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

  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 फ़ाइल होती है. यह बताती है कि कौनसा पेमेंट ऐप्लिकेशन, पेमेंट के इस तरीके का इस्तेमाल कर सकता है.

पैसे चुकाने के तरीके का मेनिफ़ेस्ट सबमिट करें

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

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

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

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

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

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

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

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

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

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

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

उदाहरण के लिए, अगर मेनिफ़ेस्ट 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

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

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

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

[पेमेंट हैंडलर] /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() तरीके को कॉल किया जाता है, तो Payment Request API, ब्राउज़र से मिला एक यूज़र इंटरफ़ेस (यूआई) दिखाता है. इस यूज़र इंटरफ़ेस को "पेमेंट के अनुरोध का यूज़र इंटरफ़ेस (यूआई)" कहा जाता है. इस यूज़र इंटरफ़ेस (यूआई) की मदद से, उपयोगकर्ता पेमेंट ऐप्लिकेशन चुन सकते हैं. पेमेंट अनुरोध के यूज़र इंटरफ़ेस (यूआई) में जारी रखें बटन दबाने के बाद, चुना गया पेमेंट ऐप्लिकेशन लॉन्च हो जाता है.

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

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

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

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

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

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

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

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

अगले चरण

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