वेब पर पेमेंट करने की सुविधा देने वाले अपने वेब-आधारित पेमेंट ऐप्लिकेशन को वेब पेमेंट के हिसाब से अडजस्ट करने और ग्राहकों को बेहतर उपयोगकर्ता अनुभव देने का तरीका.
पेमेंट ऐप्लिकेशन रजिस्टर होने के बाद, व्यापारियों/कंपनियों/कारोबारियों से पेमेंट के अनुरोध स्वीकार किए जा सकते हैं. इस पोस्ट में, रनटाइम के दौरान सेवा वर्कर से पेमेंट लेन-देन को मैनेज करने का तरीका बताया गया है. उदाहरण के लिए, जब कोई विंडो दिखती है और उपयोगकर्ता उससे इंटरैक्ट करता है.
"रनटाइम पेमेंट पैरामीटर में बदलाव", इवेंट के एक सेट को दिखाता है. इसकी मदद से, उपयोगकर्ता के पेमेंट हैंडलर के साथ इंटरैक्ट करने के दौरान, व्यापारी/कंपनी और पेमेंट हैंडलर, मैसेज का आदान-प्रदान कर सकते हैं. ज़्यादा जानने के लिए, सेवा वर्कर की मदद से, ज़रूरी नहीं
व्यापारी/कंपनी से पेमेंट का अनुरोध मिलने पर
जब कोई ग्राहक आपके वेब-आधारित पेमेंट ऐप्लिकेशन से पेमेंट करने का विकल्प चुनता है और व्यापारी/कंपनी/कारोबारी
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 |
Payment Request API को दी गई 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 });
}
फ़्रंटएंड से 'तैयार है' सिग्नल पाना
पेमेंट हैंडलर विंडो खुलने के बाद, सर्विस वर्कर को पेमेंट ऐप्लिकेशन के फ़्रंटएंड से, तैयार होने के सिग्नल का इंतज़ार करना चाहिए. सेवा वर्कर, तैयार होने पर ज़रूरी जानकारी को फ़्रंटएंड को भेज सकता है.
[payment handler] frontend:
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;
…
[payment handler] frontend:
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 |
पेमेंट के तरीके से जुड़ा डेटा, जो व्यापारी/कंपनी को पेमेंट प्रोसेस करने के लिए ज़रूरी जानकारी देता है. |
[payment handler] frontend:
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()
को पास किए गए प्रॉमिस को हल कर सकता है, ताकि व्यापारी/कंपनी को यह पता चल सके कि लेन-देन रद्द कर दिया गया है.
[payment handler] frontend:
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
[payment handler] service worker
[payment handler] frontend
इसे आज़माने के लिए:
- https://paymentrequest-demo.glitch.me/ पर जाएं.
- पृष्ठ के निचले हिस्से पर जाएं.
- पेमेंट का तरीका जोड़ें बटन दबाएं.
- पैसे चुकाने के तरीके का आइडेंटिफ़ायर फ़ील्ड में
https://paymenthandler-demo.glitch.me
डालें. - फ़ील्ड के बगल में मौजूद, पेमेंट करें बटन दबाएं.
अगले चरण
इस लेख में, हमने सेवा वर्कर की मदद से पेमेंट ट्रांज़ैक्शन को ऑर्केस्ट्रेट करने का तरीका जाना है. अगले चरण में, सेवा वर्कर में कुछ और ऐडवांस सुविधाएं जोड़ने का तरीका जानें.