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

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

Eiji Kitamura

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

पेमेंट के तरीके में बदलाव करने के बारे में व्यापारी/कंपनी को बताना

पेमेंट ऐप्लिकेशन में, पेमेंट के अलग-अलग तरीकों के साथ कई पेमेंट इंस्ट्रूमेंट इस्तेमाल किए जा सकते हैं.

उदाहरण के लिए, ऊपर दी गई टेबल में, ग्राहक A के वेब-आधारित वॉलेट में दो क्रेडिट कार्ड और एक बैंक खाता रजिस्टर है. इस मामले में, ऐप्लिकेशन तीन पेमेंट इंस्ट्रूमेंट (****1234, ****4242, ******123) और दो पेमेंट तरीकों (क्रेडिट कार्ड जारी करने वाली कंपनी 1 और बैंक X) को मैनेज कर रहा है. पेमेंट लेन-देन के दौरान, पेमेंट ऐप्लिकेशन खरीदार को पेमेंट के किसी एक तरीके को चुनने की अनुमति दे सकता है. इसके बाद, खरीदार उस तरीके का इस्तेमाल करके व्यापारी/कंपनी को पेमेंट कर सकता है.

पेमेंट ऐप्लिकेशन, पेमेंट का पूरा रिस्पॉन्स भेजने से पहले, व्यापारी/कंपनी को यह बता सकता है कि खरीदार ने पेमेंट का कौनसा तरीका चुना है. यह तब काम आता है, जब व्यापारी/कंपनी/कारोबारी को पेमेंट के किसी खास तरीके के ब्रैंड के लिए छूट वाला कैंपेन चलाना हो.

पेमेंट हैंडलर एपीआई की मदद से, पेमेंट ऐप्लिकेशन, सेवा वर्कर के ज़रिए व्यापारी/कंपनी/कारोबारी को "पेमेंट का तरीका बदला गया" इवेंट भेज सकता है. इससे, पेमेंट के नए तरीके के आइडेंटिफ़ायर की सूचना मिलती है. सेवा वर्कर को पेमेंट के नए तरीके की जानकारी के साथ PaymentRequestEvent.changePaymentMethod() को शुरू करना चाहिए.

पेमेंट ऐप्लिकेशन, PaymentRequestEvent.changePaymentMethod() के लिए वैकल्पिक दूसरे आर्ग्युमेंट के तौर पर methodDetails ऑब्जेक्ट को पास कर सकते हैं. इस ऑब्जेक्ट में, पैसे चुकाने के ऐसे तरीके की जानकारी हो सकती है जिसे व्यापारी/कंपनी को बदलाव की प्रोसेस को प्रोसेस करने के लिए ज़रूरत पड़ती है.

[पेमेंट हैंडलर] service-worker.js

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'PAYMENT_METHOD_CHANGED':
        const newMethod = e.data.paymentMethod;
        const newDetails = e.data.methodDetails;
        // Redact or check that no sensitive information is passed in
        // `newDetails`.
        // Notify the merchant of the payment method change
        details =
          await payment_request_event.changePaymentMethod(newMethod, newDetails);
      …

जब व्यापारी/कंपनी को Payment Request API से paymentmethodchange इवेंट मिलता है, तो वह पेमेंट की जानकारी अपडेट कर सकती है और PaymentDetailsUpdate ऑब्जेक्ट के साथ जवाब दे सकती है.

[merchant]

request.addEventListener('paymentmethodchange', e => {
  if (e.methodName === 'another-pay') {
    // Apply $10 discount for example.
    const discount = {
      label: 'special discount',
      amount: {
        currency: 'USD',
        // The value being string complies the spec
        value: '-10.00'
      }
    };
    let total = 0;
    details.displayItems.push(discount);
    for (let item of details.displayItems) {
     total += parseFloat(item.amount.value);
    }
    // Convert the number back to string
    details.total.amount.value = total.toString();
  }
  // Pass a promise to `updateWith()` and send updated payment details
  e.updateWith(details);
});

जब व्यापारी या कंपनी जवाब देती है, तो PaymentRequestEvent.changePaymentMethod() के तौर पर रिटर्न किया गया प्रॉमिस, PaymentRequestDetailsUpdate ऑब्जेक्ट के साथ रिज़ॉल्व हो जाएगा.

[पेमेंट हैंडलर] service-worker.js

…
        // Notify the merchant of the payment method change
        details = await payment_request_event.changePaymentMethod(newMethod, newDetails);
        // Provided the new payment details,
        // send a message back to the frontend to update the UI
        postMessage('UPDATE_REQUEST', details);
        break;
…

फ़्रंटएंड पर यूज़र इंटरफ़ेस (यूआई) को अपडेट करने के लिए, ऑब्जेक्ट का इस्तेमाल करें. पेमेंट के तरीके की अपडेट की गई जानकारी दिखाना लेख पढ़ें.

व्यापारी/कंपनी को शिपिंग पते में हुए बदलाव के बारे में बताना

पेमेंट ऐप्लिकेशन, पेमेंट लेन-देन के हिस्से के तौर पर, व्यापारी/कंपनी को खरीदार का शिपिंग पता दे सकते हैं.

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

इसके अलावा, ग्राहक अपने पसंदीदा पेमेंट ऐप्लिकेशन में अपने पते की जानकारी रजिस्टर कर सकते हैं और अलग-अलग व्यापारियों/कंपनियों के लिए उसका फिर से इस्तेमाल कर सकते हैं.

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

• व्यापारी/कंपनी यह तय कर सकती है कि खरीदार, प्रॉडक्ट की शिपिंग के लिए क्षेत्रीय पाबंदी (उदाहरण के लिए, सिर्फ़ देश में शिपिंग) को पूरा करता है या नहीं.
• व्यापारी/कंपनी/कारोबारी, शिपिंग पते के इलाके के हिसाब से शिपिंग के विकल्पों की सूची बदल सकता है. उदाहरण के लिए, अंतरराष्ट्रीय नियमित या एक्सप्रेस.
• व्यापारी/कंपनी, पते के आधार पर शिपिंग के लिए तय किया गया नया शुल्क लागू कर सकती है और कुल कीमत अपडेट कर सकती है.

पेमेंट हैंडलर एपीआई की मदद से, पेमेंट ऐप्लिकेशन, शिपिंग के नए पते की सूचना देने के लिए, सेवा वर्कर से व्यापारी/कंपनी/कारोबारी को "शिपिंग के पते में बदलाव" इवेंट भेज सकता है. सर्विस वर्कर्स को नए पते के ऑब्जेक्ट के साथ PaymentRequestEvent.changeShippingAddress() को शुरू करना चाहिए.

[पेमेंट हैंडलर] service-worker.js

...
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'SHIPPING_ADDRESS_CHANGED':
        const newAddress = e.data.shippingAddress;
        details =
          await payment_request_event.changeShippingAddress(newAddress);
      …

व्यापारी/कंपनी को Payment Request API से shippingaddresschange इवेंट मिलेगा, ताकि वह अपडेट किए गए PaymentDetailsUpdate के साथ जवाब दे सके.

[merchant]

request.addEventListener('shippingaddresschange', e => {
  // Read the updated shipping address and update the request.
  const addr = request.shippingAddress;
  const details = getPaymentDetailsFromShippingAddress(addr);
  // `updateWith()` sends back updated payment details
  e.updateWith(details);
});

जब व्यापारी या कंपनी जवाब देती है, तो रिटर्न किया गया प्रॉमिस PaymentRequestEvent.changeShippingAddress(), PaymentRequestDetailsUpdate ऑब्जेक्ट के साथ रिज़ॉल्व हो जाएगा.

[पेमेंट हैंडलर] service-worker.js

…
        // Notify the merchant of the shipping address change
        details = await payment_request_event.changeShippingAddress(newAddress);
        // Provided the new payment details,
        // send a message back to the frontend to update the UI
        postMessage('UPDATE_REQUEST', details);
        break;
…

फ़्रंटएंड पर यूज़र इंटरफ़ेस (यूआई) को अपडेट करने के लिए, ऑब्जेक्ट का इस्तेमाल करें. पेमेंट के तरीके की अपडेट की गई जानकारी दिखाना लेख पढ़ें.

शिपिंग के विकल्प में हुए बदलाव के बारे में व्यापारी/कंपनी/कारोबारी को बताना

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

• मुफ़्त शिपिंग
• एक्सप्रेस शिपिंग
• अंतरराष्ट्रीय शिपिंग
• प्रीमियम अंतरराष्ट्रीय शिपिंग

हर सदस्यता के लिए अलग-अलग शुल्क लिया जाता है. आम तौर पर, तेज़ तरीके/विकल्प ज़्यादा महंगे होते हैं.

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

व्यापारी/कंपनी/कारोबारी के Payment Request API में बताए गए शिपिंग के विकल्पों की सूची, PaymentRequestEvent की प्रॉपर्टी के तौर पर, पेमेंट ऐप्लिकेशन के सेवा वर्कर को भेजी जाती है.

[merchant]

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: { transactionId: '****' }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  shippingOptions: [{
    id: 'standard',
    label: 'Standard',
    amount: { value: '0.00', currency: 'USD' },
    selected: true
  }, {
    id: 'express',
    label: 'Express',
    amount: { value: '5.00', currency: 'USD' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {  requestShipping: true });

पेमेंट ऐप्लिकेशन, व्यापारी/कंपनी/कारोबारी को यह बता सकता है कि खरीदार ने शिपिंग के लिए कौनसा विकल्प चुना है. यह जानकारी, कारोबारी और खरीदार, दोनों के लिए अहम है. ऐसा इसलिए, क्योंकि शिपिंग के विकल्प को बदलने पर प्रॉडक्ट की कुल कीमत भी बदल जाती है. बाद में पेमेंट की पुष्टि करने के लिए, कारोबारी या कंपनी को नई कीमत की जानकारी देनी होगी. साथ ही, खरीदार को भी इस बदलाव के बारे में बताना होगा.

Payment Handler API की मदद से, पेमेंट ऐप्लिकेशन, सेवा वर्कर से व्यापारी/कंपनी/कारोबारी को "शिपिंग के विकल्प में बदलाव" इवेंट भेज सकता है. सेवा वर्कर को शिपिंग के नए विकल्प के आईडी के साथ, PaymentRequestEvent.changeShippingOption() को शुरू करना चाहिए.

[पेमेंट हैंडलर] service-worker.js

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'SHIPPING_OPTION_CHANGED':
        const newOption = e.data.shippingOptionId;
        details =
          await payment_request_event.changeShippingOption(newOption);
      …

व्यापारी/कंपनी को Payment Request API से shippingoptionchange इवेंट मिलेगा. व्यापारी/कंपनी को इस जानकारी का इस्तेमाल करके, कुल कीमत अपडेट करनी चाहिए. इसके बाद, अपडेट की गई कीमत के साथ PaymentDetailsUpdate का जवाब देना चाहिए.

[merchant]

request.addEventListener('shippingoptionchange', e => {
  // selected shipping option
  const shippingOption = request.shippingOption;
  const newTotal = {
    currency: 'USD',
    label: 'Total due',
    value: calculateNewTotal(shippingOption),
  };
  // `updateWith()` sends back updated payment details
  e.updateWith({ total: newTotal });
});

जब व्यापारी या कंपनी जवाब देती है, तो PaymentRequestEvent.changeShippingOption() के तौर पर रिटर्न किया गया प्रॉमिस, PaymentRequestDetailsUpdate ऑब्जेक्ट के साथ रिज़ॉल्व हो जाएगा.

[पेमेंट हैंडलर] service-worker.js

…
        // Notify the merchant of the shipping option change
        details = await payment_request_event.changeShippingOption(newOption);
        // Provided the new payment details,
        // send a message back to the frontend to update the UI
        postMessage('UPDATE_REQUEST', details);
        break;
…

फ़्रंटएंड पर यूज़र इंटरफ़ेस (यूआई) को अपडेट करने के लिए, ऑब्जेक्ट का इस्तेमाल करें. पेमेंट के तरीके की अपडेट की गई जानकारी दिखाना लेख पढ़ें.

पेमेंट के तरीके की अपडेट की गई जानकारी दिखाना

व्यापारी/कंपनी/कारोबारी, पेमेंट की जानकारी अपडेट करने के बाद, .changePaymentMethod(), .changeShippingAddress(), और .changeShippingOption() से मिले प्रॉमिस, एक ही PaymentRequestDetailsUpdate ऑब्जेक्ट के साथ रिज़ॉल्व हो जाएंगे. पेमेंट हैंडलर, इस नतीजे का इस्तेमाल करके यूज़र इंटरफ़ेस (यूआई) में, कुल कीमत और शिपिंग के विकल्पों को अपडेट कर सकता है.

व्यापारी/कंपनी/कारोबारी को इन वजहों से गड़बड़ियां दिख सकती हैं:

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

गड़बड़ी की स्थिति दिखाने के लिए, इन प्रॉपर्टी का इस्तेमाल करें:

• error: गड़बड़ी की ऐसी स्ट्रिंग जिसे कोई भी व्यक्ति आसानी से पढ़ सकता है. यह ग्राहकों को दिखाने के लिए सबसे सही स्ट्रिंग है.
• shippingAddressErrors: AddressErrors ऐसा ऑब्जेक्ट जिसमें हर पते की प्रॉपर्टी के हिसाब से, गड़बड़ी की पूरी जानकारी वाली स्ट्रिंग होती है. यह तब मददगार होता है, जब आपको ऐसा फ़ॉर्म खोलना हो जिसमें ग्राहक अपने पते में बदलाव कर सके और आपको उसे सीधे अमान्य फ़ील्ड पर ले जाना हो.
• paymentMethodErrors: पेमेंट के तरीके से जुड़ी गड़बड़ी का ऑब्जेक्ट. व्यापारियों/कंपनियों/कारोबारियों से, गड़बड़ी की जानकारी स्ट्रक्चर्ड फ़ॉर्मैट में देने के लिए कहा जा सकता है. हालांकि, वेब पेमेंट्स स्पेसिफ़िकेशन के लेखकों का सुझाव है कि इसे सामान्य स्ट्रिंग के तौर पर ही रखा जाए.

नमूना कोड

इस दस्तावेज़ में आपको जो सैंपल कोड दिखे हैं उनमें से ज़्यादातर, यहां दिए गए काम करने वाले सैंपल ऐप्लिकेशन के कुछ हिस्से थे:

https://paymenthandler-demo.glitch.me

[payment handler] service worker

[payment handler] frontend

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

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