इस पेज का अनुवाद Cloud Translation API से किया गया है.

सर्विस वर्कर के साथ पेमेंट से जुड़े लेन-देन को पूरा करना

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

ईजी कितामुरा

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

सर्विस वर्कर के साथ पेमेंट से जुड़े लेन-देन करना — सर्विस वर्कर के साथ पेमेंट के लेन-देन करना

"रनटाइम पेमेंट पैरामीटर में बदलाव", इवेंट के उस सेट को कहते हैं जिसकी मदद से व्यापारी/कंपनी और पेमेंट हैंडलर, उपयोगकर्ता के पेमेंट हैंडलर के साथ इंटरैक्ट करते समय मैसेज का लेन-देन कर सकते हैं. सर्विस वर्कर के साथ वैकल्पिक भुगतान जानकारी मैनेज करने के बारे में ज़्यादा जानें.

व्यापारी/कंपनी से पेमेंट के अनुरोध का इवेंट मिला है

जब कोई ग्राहक आपके वेब पर काम करने वाले पेमेंट ऐप्लिकेशन से पेमेंट करने का विकल्प चुनता है और व्यापारी/कंपनी न्योता 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 });
}

फ़्रंटएंड से तैयार सिग्नल पाएं

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

[payment handling] फ़्रंटएंड:

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 handling] फ़्रंटएंड:

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 handling] फ़्रंटएंड:

  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 handling] फ़्रंटएंड:

  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 handling] फ़्रंटएंड

इसे आज़माने के लिए:

https://paymentrequest-demo.glitch.me/ पर जाएं.
पृष्ठ के निचले हिस्से पर जाएं.
पेमेंट का बटन जोड़ें दबाएं.
पेमेंट के तरीके के आइडेंटिफ़ायर फ़ील्ड में https://paymenthandler-demo.glitch.me डालें.
फ़ील्ड के बगल में मौजूद पैसे चुकाएं बटन को दबाएं.

अगले चरण

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

सर्विस वर्कर के साथ पेमेंट की वैकल्पिक जानकारी मैनेज करना