वेब पेमेंट का इस्तेमाल करके पेमेंट के लेन-देन की शुरुआत, पैसे चुकाने के लिए बने ऐप्लिकेशन की खोज के साथ होती है. पैसे चुकाने का तरीका सेट अप करने के बारे में जानें. साथ ही, अपने पेमेंट ऐप्लिकेशन को व्यापारियों/कंपनियों और ग्राहकों को पेमेंट करने के लिए तैयार करें.
पेमेंट अनुरोध एपीआई के साथ इस्तेमाल किए जाने के लिए, पेमेंट ऐप्लिकेशन का किसी पैसे चुकाने के तरीके के आइडेंटिफ़ायर से जुड़ा होना ज़रूरी है. जो कारोबारी किसी पेमेंट ऐप्लिकेशन के साथ इंटिग्रेट करना चाहते हैं उन्हें पैसे चुकाने के तरीके के आइडेंटिफ़ायर का इस्तेमाल करके, यह जानकारी ब्राउज़र को देनी होगी. इस लेख में बताया गया है कि पेमेंट ऐप्लिकेशन को खोजने की सुविधा कैसे काम करती है. साथ ही, इस लेख में यह भी बताया गया है कि ब्राउज़र में, पेमेंट ऐप्लिकेशन को सही तरीके से खोजने और इस्तेमाल करने के लिए कैसे कॉन्फ़िगर किया जाए.
अगर आपको वेब पेमेंट या पेमेंट ऐप्लिकेशन के ज़रिए पेमेंट के लेन-देन के काम करने के तरीके के बारे में ज़्यादा नहीं पता है, तो पहले ये लेख पढ़ें:
ब्राउज़र समर्थन
वेब पेमेंट में कुछ अलग-अलग टेक्नोलॉजी का इस्तेमाल किया जाता है और सहायता की स्थिति ब्राउज़र पर निर्भर करती है.
ब्राउज़र किसी पेमेंट ऐप्लिकेशन को कैसे खोजता है
हर पेमेंट ऐप्लिकेशन को यह जानकारी देनी होगी:
- यूआरएल पर आधारित पेमेंट के तरीके का आइडेंटिफ़ायर
- पेमेंट के तरीके का मेनिफ़ेस्ट (यह सिर्फ़ तब हो सकता है, जब तीसरे पक्ष ने पेमेंट के तरीके का आइडेंटिफ़ायर दिया हो)
- वेब ऐप्लिकेशन मेनिफ़ेस्ट
खोज की प्रोसेस तब शुरू होती है, जब कोई व्यापारी लेन-देन शुरू करता है:
- ब्राउज़र, पेमेंट के तरीके के आइडेंटिफ़ायर यूआरएल पर अनुरोध भेजता है और पेमेंट के तरीके का मेनिफ़ेस्ट फ़ेच करता है.
- ब्राउज़र, पेमेंट के तरीके के मेनिफ़ेस्ट से वेब ऐप्लिकेशन मेनिफ़ेस्ट यूआरएल तय करता है और वेब ऐप्लिकेशन मेनिफ़ेस्ट को फ़ेच करता है.
- ब्राउज़र तय करता है कि वेब ऐप्लिकेशन मेनिफ़ेस्ट से, ओएस पेमेंट ऐप्लिकेशन लॉन्च करें या वेब पर आधारित पेमेंट ऐप्लिकेशन.
अगले सेक्शन में पैसे चुकाने का तरीका सेट अप करने के बारे में पूरी जानकारी दी गई है, ताकि ब्राउज़र इसे खोज सकें.
पहला चरण: पैसे चुकाने के तरीके का आइडेंटिफ़ायर दें
पेमेंट के तरीके का आइडेंटिफ़ायर, यूआरएल पर आधारित स्ट्रिंग होता है. उदाहरण के लिए, 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
तीसरा चरण: वेब ऐप्लिकेशन मेनिफ़ेस्ट दिखाना
वेब ऐप्लिकेशन मेनिफ़ेस्ट का इस्तेमाल, नाम के सुझाव के मुताबिक वेब ऐप्लिकेशन को तय करने के लिए किया जाता है. यह प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) तय करने के लिए, बड़े पैमाने पर इस्तेमाल की जाने वाली मेनिफ़ेस्ट फ़ाइल है.
सामान्य वेब ऐप्लिकेशन मेनिफ़ेस्ट कुछ ऐसा दिखेगा:
[पेमेंट हैंडलर] /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()को उपयोगकर्ता के जेस्चर से ट्रिगर किया जाता है, जैसे कि माउस क्लिक.- सिर्फ़ एक पेमेंट ऐप्लिकेशन होता है, जो:
- पैसे चुकाने के तरीके के आइडेंटिफ़ायर के साथ काम करता है.
वेब पर आधारित पेमेंट ऐप्लिकेशन को जस्ट-इन-टाइम (जेआईटी) कब रजिस्टर किया जाता है?
वेब पर आधारित पेमेंट ऐप्लिकेशन लॉन्च किए जा सकते हैं. इसके लिए, यह ज़रूरी नहीं है कि उपयोगकर्ता, पेमेंट ऐप्लिकेशन की वेबसाइट पर जाएं और सर्विस वर्कर को रजिस्टर करें. जब उपयोगकर्ता वेब-आधारित पेमेंट ऐप्लिकेशन से पेमेंट करने का विकल्प चुनता है, तो सर्विस वर्कर किसी समय रजिस्टर हो सकता है. रजिस्ट्रेशन के समय में दो अंतर होते हैं:
- अगर उपयोगकर्ता को पेमेंट के अनुरोध का यूज़र इंटरफ़ेस (यूआई) दिखाया जाता है, तो ऐप्लिकेशन तुरंत रजिस्टर हो जाता है. साथ ही, जब उपयोगकर्ता जारी रखें पर क्लिक करता है, तो उसे लॉन्च किया जाता है.
- अगर पेमेंट के अनुरोध के यूज़र इंटरफ़ेस (यूआई) को छोड़ दिया जाता है, तो पेमेंट ऐप्लिकेशन तुरंत तुरंत रजिस्टर हो जाता है और सीधे लॉन्च हो जाता है. रजिस्टर किए गए किसी ऐप्लिकेशन को हाल ही में लॉन्च करने के लिए, पेमेंट अनुरोध के यूज़र इंटरफ़ेस (यूआई) को स्किप करने के लिए, उपयोगकर्ता जेस्चर की ज़रूरत होती है. इससे क्रॉस-ऑरिजिन सर्विस वर्कर का रजिस्ट्रेशन अचानक से रुक जाता है.
अगले चरण
अब जब आपके पेमेंट ऐप्लिकेशन को खोजा जा चुका है, तो प्लैटफ़ॉर्म के हिसाब से पैसे चुकाने के लिए ऐप्लिकेशन और वेब पर आधारित पेमेंट ऐप्लिकेशन बनाने का तरीका जानें.