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

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

Eiji Kitamura

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

कारोबारी या कंपनी को पेमेंट का तरीका बदलने की सूचना दें

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

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

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

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

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

[पेमेंट हैंडलर] 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);
      …

जब कारोबारी को पेमेंट से paymentmethodchange इवेंट मिलता है API का अनुरोध करें, तो वे भुगतान विवरण अपडेट कर सकते हैं और PaymentDetailsUpdate ऑब्जेक्ट है.

[व्यापारी/कंपनी]

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;
…

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

कारोबारी या कंपनी को शिपिंग का पता बदलने की सूचना दें

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

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

इसके अलावा, ग्राहक अपने पते की जानकारी पसंदीदा भुगतान ऐप्लिकेशन चुनें और विभिन्न व्यापारियों के लिए इसका फिर से उपयोग करें.

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

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

पेमेंट हैंडलर एपीआई की मदद से, पेमेंट ऐप्लिकेशन "शिपिंग पता" भेज सकता है बदलो" नई शिपिंग को सूचित करने के लिए सर्विस वर्कर की ओर से व्यापारी को इवेंट इससे पहले ही अपने कारोबार के हिसाब से name@yourcompany.com जैसा कोई ईमेल पता बनाएं. सर्विस वर्कर को शुरू करना चाहिए 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);
      …

व्यापारी/कंपनी को पेमेंट से shippingaddresschange का इवेंट मिलेगा एपीआई का अनुरोध करें, ताकि वे अपडेट किए गए PaymentDetailsUpdate का इस्तेमाल करके जवाब दे सकें.

[व्यापारी/कंपनी]

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;
…

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

कारोबारी या कंपनी को शिपिंग के विकल्प में बदलाव की सूचना दें

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

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

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

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

व्यापारी के भुगतान अनुरोध API में दर्ज शिपिंग विकल्पों की सूची यह है पेमेंट ऐप्लिकेशन के सर्विस वर्कर को दी जाती है. PaymentRequestEvent.

[व्यापारी/कंपनी]

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 });

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

पेमेंट हैंडलर एपीआई की मदद से, पेमेंट ऐप्लिकेशन "शिपिंग का विकल्प" भेज सकता है बदलो" कारोबारी या कंपनी को सर्विस वर्कर से मिला इवेंट. सर्विस वर्कर को शुरू करना 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);
      …

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

[व्यापारी/कंपनी]

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: पेमेंट के तरीके से जुड़ी गड़बड़ी का ऑब्जेक्ट. सवाल पूछें चाहते हैं कि वे किसी स्ट्रक्चर्ड गड़बड़ी की जानकारी दें, लेकिन Web Payments की खास बातें का सुझाव है कि इसे एक साधारण स्ट्रिंग रखें.

नमूना कोड

इस दस्तावेज़ में मौजूद ज़्यादातर सैंपल कोड, यहां दिए गए कोड से लिए गए हैं काम करने वाला सैंपल ऐप:

https://paymenthandler-demo.glitch.me

[पेमेंट हैंडलर] सर्विस वर्कर

[पेमेंट हैंडलर] फ़्रंटएंड

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

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