वेब पर आधारित पेमेंट ऐप्लिकेशन को वेब पेमेंट के हिसाब से बनाने और खरीदारों को बेहतर उपयोगकर्ता अनुभव देने का तरीका जानें.
पेमेंट ऐप्लिकेशन के रजिस्टर होने के बाद, कारोबारियों या कंपनियों से पेमेंट के अनुरोध स्वीकार किए जा सकते हैं. इस पोस्ट में बताया गया है कि रनटाइम के दौरान (यानी कि जब कोई विंडो दिखाई जाती है और उपयोगकर्ता उससे इंटरैक्ट कर रहा होता है) पर किसी सर्विस वर्कर से किए गए पेमेंट के लेन-देन को कैसे व्यवस्थित किया जाए.
"रनटाइम पेमेंट पैरामीटर में बदलाव" का मतलब उन इवेंट के सेट से है जिनकी मदद से, उपयोगकर्ता और पेमेंट हैंडलर से इंटरैक्ट करते समय, व्यापारी और पेमेंट हैंडलर को मैसेज भेजने और पाने की सुविधा मिलती है. सर्विस वर्कर के साथ, पैसे चुकाने की वैकल्पिक जानकारी को मैनेज करने के बारे में ज़्यादा जानें.
कारोबारी से पेमेंट के अनुरोध वाला इवेंट पाएं
जब कोई ग्राहक आपके वेब पर आधारित पेमेंट ऐप्लिकेशन से पेमेंट करने का विकल्प चुनता है और व्यापारी/कंपनी/कारोबारी
PaymentRequest.show() के ज़रिए पेमेंट करता है, तो आपके सर्विस वर्कर को एक paymentrequest इवेंट मिलेगा. इवेंट को कैप्चर करने और अगली कार्रवाई की तैयारी करने के लिए, सर्विस वर्कर में इवेंट लिसनर जोड़ें.
[पेमेंट हैंडलर] service-worker.js:
…
let payment_request_event;
let resolver;
let client;
// `self` is the global object in service worker
self.addEventListener('paymentrequest', async e => {
if (payment_request_event) {
// If there's an ongoing payment transaction, reject it.
resolver.reject();
}
// Preserve the event for future use
payment_request_event = e;
…
सुरक्षित रखे गए PaymentRequestEvent में इस लेन-देन के बारे में अहम जानकारी
है:
| प्रॉपर्टी का नाम | कंपनी का ब्यौरा |
|---|---|
topOrigin |
ऐसी स्ट्रिंग जो टॉप-लेवल वेब पेज के ऑरिजिन के बारे में बताती है (आम तौर पर, पेमेंट पाने वाला व्यापारी या कंपनी). कारोबारी या कंपनी के ऑरिजिन की पहचान करने के लिए, इसका इस्तेमाल करें. |
paymentRequestOrigin |
ऐसी स्ट्रिंग जो शुरू होने की जगह के बारे में बताती है. जब व्यापारी, पेमेंट के अनुरोध वाले एपीआई को सीधे तौर पर शुरू करता है, तब यह topOrigin जैसा हो सकता है. हालांकि, अगर पेमेंट गेटवे जैसे किसी तीसरे पक्ष की ओर से iframe के अंदर से एपीआई को शुरू किया जाता है, तो यह मामले से अलग हो सकता है.
|
paymentRequestId |
पेमेंट रिक्वेस्ट एपीआई को उपलब्ध कराई गई PaymentDetailsInit की id प्रॉपर्टी. अगर कारोबारी या कंपनी यह कार्रवाई नहीं करती है, तो ब्राउज़र अपने-आप जनरेट हुआ आईडी उपलब्ध कराएगा.
|
methodData |
पेमेंट के तरीके से जुड़ा डेटा, जो व्यापारी/कंपनी/कारोबारी ने PaymentMethodData के तौर पर दिया था.
पेमेंट से जुड़े लेन-देन की जानकारी पाने के लिए इसका इस्तेमाल करें.
|
total |
PaymentDetailsInit के लिए व्यापारी/कंपनी/कारोबारी की ओर से दी गई कुल रकम.
यूज़र इंटरफ़ेस (यूआई) बनाने के लिए इसका इस्तेमाल करें, ताकि ग्राहक को चुकाई जाने वाली कुल रकम के बारे में पता चल सके.
|
instrumentKey |
उपयोगकर्ता ने इंस्ट्रुमेंट बटन चुना. यह आपके दिए गए instrumentKey को पहले से दिखाता है. खाली स्ट्रिंग से पता चलता है कि उपयोगकर्ता ने कोई इंस्ट्रुमेंट तय नहीं किया है.
|
वेब पर आधारित पेमेंट ऐप्लिकेशन का फ़्रंटएंड दिखाने के लिए, पेमेंट हैंडलर विंडो खोलें
paymentrequest इवेंट मिलने पर, पेमेंट ऐप्लिकेशन PaymentRequestEvent.openWindow() पर कॉल करके पेमेंट हैंडलर विंडो खोल सकता है. पेमेंट हैंडलर विंडो में ग्राहकों को आपके पेमेंट ऐप्लिकेशन का इंटरफ़ेस दिखेगा. इस इंटरफ़ेस पर, वे पुष्टि कर सकते हैं, शिपिंग पता और विकल्प चुन सकते हैं, और पेमेंट की अनुमति दे सकते हैं. पेमेंट फ़्रंटएंड पर पेमेंट मैनेज करना (यह सुविधा जल्द ही उपलब्ध होगी) में, हम फ़्रंटएंड कोड लिखने का तरीका बताएंगे.
PaymentRequestEvent.respondWith() के साथ एक सुरक्षित प्रॉमिस पास करें, ताकि आने वाले समय में पेमेंट के नतीजे से जुड़ी समस्या हल की जा सके.
[पेमेंट हैंडलर] service-worker.js:
…
self.addEventListener('paymentrequest', async e => {
…
// Retain a promise for future resolution
// Polyfill for PromiseResolver is provided below.
resolver = new PromiseResolver();
// Pass a promise that resolves when payment is done.
e.respondWith(resolver.promise);
// Open the checkout page.
try {
// Open the window and preserve the client
client = await e.openWindow(checkoutURL);
if (!client) {
// Reject if the window fails to open
throw 'Failed to open window';
}
} catch (err) {
// Reject the promise on failure
resolver.reject(err);
};
});
…
प्रॉमिस को आर्बिट्ररी टाइम में रिज़ॉल्व करने के लिए, सुविधाजनक PromiseResolver पॉलीफ़िल का इस्तेमाल किया जा सकता है.
class PromiseResolver {
constructor() {
this.promise_ = new Promise((resolve, reject) => {
this.resolve_ = resolve;
this.reject_ = reject;
})
}
get promise() { return this.promise_ }
get resolve() { return this.resolve_ }
get reject() { return this.reject_ }
}
फ़्रंटएंड से जानकारी का लेन-देन करना
पेमेंट ऐप्लिकेशन का सर्विस वर्कर, ServiceWorkerController.postMessage() के ज़रिए पेमेंट ऐप्लिकेशन के फ़्रंटएंड को मैसेज भेज सकता है. फ़्रंटएंड से मैसेज पाने के लिए, message इवेंट सुनें.
[पेमेंट हैंडलर] service-worker.js:
// Define a convenient `postMessage()` method
const postMessage = (type, contents = {}) => {
if (client) client.postMessage({ type, ...contents });
}
फ़्रंटएंड से तैयार सिग्नल पाएं
पेमेंट हैंडलर विंडो खुलने पर, सर्विस वर्कर को पेमेंट ऐप्लिकेशन फ़्रंटएंड से रेडी-स्टेट सिग्नल मिलने का इंतज़ार करना चाहिए. सर्विस वर्कर के पास ज़रूरी जानकारी तैयार होने पर, फ़्रंटएंड को उसे भेजने का विकल्प होता है.
[पेमेंट हैंडलर] फ़्रंटएंड:
navigator.serviceWorker.controller.postMessage({
type: 'WINDOW_IS_READY'
});
[पेमेंट हैंडलर] service-worker.js:
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
// `WINDOW_IS_READY` is a frontend's ready state signal
case 'WINDOW_IS_READY':
const { total } = payment_request_event;
…
लेन-देन की जानकारी फ़्रंटएंड को भेजें
अब पेमेंट के तरीके की जानकारी भेजें. इस मामले में, आपको सिर्फ़ पेमेंट के अनुरोध की कुल रकम ही भेजी जा रही है. हालांकि, अगर आप चाहें, तो और जानकारी भी भेजी जा सकती है.
[पेमेंट हैंडलर] service-worker.js:
…
// Pass the payment details to the frontend
postMessage('PAYMENT_IS_READY', { total });
break;
…
[पेमेंट हैंडलर] फ़्रंटएंड:
let total;
navigator.serviceWorker.addEventListener('message', async e => {
switch (e.data.type) {
case 'PAYMENT_IS_READY':
({ total } = e.data);
// Update the UI
renderHTML(total);
break;
…
ग्राहक के पेमेंट क्रेडेंशियल वापस करना
जब ग्राहक भुगतान को अनुमति देता है, तो फ़्रंटएंड, सर्विस वर्कर को आगे बढ़ने के लिए पोस्ट मैसेज भेज सकता है. व्यापारी को नतीजा वापस भेजने के लिए, PaymentRequestEvent.respondWith() को दिए गए प्रॉमिस को रिज़ॉल्व किया जा सकता है.
कोई PaymentHandlerResponse ऑब्जेक्ट पास करें.
| प्रॉपर्टी का नाम | कंपनी का ब्यौरा |
|---|---|
methodName |
पेमेंट करने के लिए इस्तेमाल किया जाने वाला, पेमेंट के तरीके का आइडेंटिफ़ायर. |
details |
पेमेंट के तरीके से जुड़ा डेटा, जो कारोबारी या कंपनी को पेमेंट प्रोसेस करने के लिए ज़रूरी जानकारी देता है. |
[पेमेंट हैंडलर] फ़्रंटएंड:
const paymentMethod = …
postMessage('PAYMENT_AUTHORIZED', {
paymentMethod, // Payment method identifier
});
[पेमेंट हैंडलर] service-worker.js:
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'PAYMENT_AUTHORIZED':
// Resolve the payment request event promise
// with a payment response object
const response = {
methodName: e.data.paymentMethod,
details: { id: 'put payment credential here' },
}
resolver.resolve(response);
// Don't forget to initialize.
payment_request_event = null;
break;
…
पेमेंट की प्रक्रिया रद्द करना
ग्राहक को लेन-देन रद्द करने की अनुमति देने के लिए, फ़्रंटएंड ऐसा करने के लिए सर्विस वर्कर को एक पोस्ट संदेश भेज सकता है. इसके बाद सर्विस वर्कर null के साथ PaymentRequestEvent.respondWith() को दिए गए वाद का समाधान व्यापारी को यह बताने के लिए कर सकता है कि लेन-देन रद्द किया गया है.
[पेमेंट हैंडलर] फ़्रंटएंड:
postMessage('CANCEL_PAYMENT');
[पेमेंट हैंडलर] service-worker.js:
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'CANCEL_PAYMENT':
// Resolve the payment request event promise
// with null
resolver.resolve(null);
// Don't forget to initialize.
payment_request_event = null;
break;
…
नमूना कोड
इस दस्तावेज़ में देखे गए सभी सैंपल कोड, यहां दिए गए सैंपल ऐप्लिकेशन से लिए गए हैं:
https://paymenthandler-demo.glitch.me
[पेमेंट हैंडलर] सर्विस वर्कर
[पेमेंट हैंडलर] फ़्रंटएंड
इसे आज़माने के लिए:
- https://paymentrequest-demo.glitch.me/ पर जाएं.
- पृष्ठ के निचले हिस्से पर जाएं.
- पेमेंट बटन जोड़ें दबाएं.
- पेमेंट के तरीके के आइडेंटिफ़ायर फ़ील्ड में
https://paymenthandler-demo.glitch.meडालें. - फ़ील्ड के बगल में मौजूद, पेमेंट करें बटन दबाएं.
अगले चरण
इस लेख में हमने एक सर्विस वर्कर से पेमेंट के लेन-देन को व्यवस्थित करने का तरीका जाना. अगला कदम, सर्विस वर्कर में कुछ और बेहतर सुविधाएं जोड़ने का तरीका जानना है.