किसी लेन-देन की अवधि

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

Eiji Kitamura

Milica Mihajlija

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

वेब पेमेंट का इस्तेमाल करने के फ़ायदों के बारे में ज़्यादा जानने के लिए, वेब पेमेंट की मदद से, पेमेंट ऐप्लिकेशन को बेहतर बनाना लेख पढ़ें.

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

इस प्रोसेस में छह चरण शामिल हैं:

1. व्यापारी/कंपनी, पेमेंट ट्रांज़ैक्शन शुरू करता है.
2. व्यापारी/कंपनी, पेमेंट करने के लिए बटन दिखाती है.

3. ग्राहक, पेमेंट बटन दबाता है.

   

4. ब्राउज़र पेमेंट ऐप्लिकेशन को लॉन्च करता है.

   

5. अगर खरीदार किसी भी जानकारी (जैसे कि शिपिंग के विकल्प या उनका पता) में बदलाव करता है, तो कारोबारी या कंपनी, बदलाव के हिसाब से लेन-देन की जानकारी अपडेट करती है.

   

6. जब खरीदार खरीदारी की पुष्टि करता है, तो कारोबारी या कंपनी पेमेंट की पुष्टि करके लेन-देन पूरा करती है.

   

पहला चरण: व्यापारी/कंपनी/कारोबारी, पेमेंट ट्रांज़ैक्शन शुरू करता है

जब कोई ग्राहक खरीदारी करने का फ़ैसला करता है, तो व्यापारी/कंपनी/कारोबारी PaymentRequest ऑब्जेक्ट बनाकर, पेमेंट ट्रांज़ैक्शन शुरू करता है. इस ऑब्जेक्ट में लेन-देन के बारे में अहम जानकारी शामिल होती है:

• लेन-देन को प्रोसेस करने के लिए, पेमेंट के स्वीकार किए गए तरीके और उनका डेटा.
• जानकारी, जैसे कि कुल कीमत (ज़रूरी है) और आइटम के बारे में जानकारी.
• ऐसे विकल्प जिनमें व्यापारी/कंपनी/कारोबारी, शिपिंग की जानकारी का अनुरोध कर सकते हैं. जैसे, शिपिंग का पता और शिपिंग का विकल्प.
• व्यापारी/कंपनी, बिलिंग पते, पैसे चुकाने वाले व्यक्ति के नाम, ईमेल, और फ़ोन नंबर का अनुरोध भी कर सकते हैं.
• व्यापारी/कंपनी/कारोबारी, PaymentRequest में शिपिंग का टाइप (shipping, delivery या pickup) भी शामिल कर सकते हैं. हालांकि, यह जानकारी शामिल करना ज़रूरी नहीं है. पेमेंट ऐप्लिकेशन, अपने यूज़र इंटरफ़ेस (यूआई) में सही लेबल दिखाने के लिए, उस जानकारी का इस्तेमाल संकेत के तौर पर कर सकता है.

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});

लेन-देन की जानकारी मिलने पर, ब्राउज़र पेमेंट के तरीके के आइडेंटिफ़ायर के आधार पर, PaymentRequest में बताए गए पेमेंट ऐप्लिकेशन ढूंढने की प्रोसेस शुरू करता है. इस तरह, कारोबारी या कंपनी जब लेन-देन के लिए तैयार हो जाएगी, तब ब्राउज़र यह तय कर पाएगा कि पेमेंट के लिए कौनसा ऐप्लिकेशन इस्तेमाल करना है.

डिस्कवरी प्रोसेस के काम करने के तरीके के बारे में ज़्यादा जानने के लिए, पेमेंट का तरीका सेट अप करना लेख पढ़ें.

दूसरा चरण: व्यापारी/कंपनी/कारोबारी, पेमेंट करने के लिए बटन दिखाता है

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

PaymentRequest इंस्टेंस का इस्तेमाल करके, व्यापारी/कंपनी यह क्वेरी कर सकती है कि ग्राहक के पास पेमेंट ऐप्लिकेशन उपलब्ध है या नहीं.

क्या खरीदार के पास पेमेंट ऐप्लिकेशन है?

अगर खरीदार के डिवाइस पर पेमेंट ऐप्लिकेशन उपलब्ध है, तो PaymentRequest का canMakePayment() तरीका true दिखाता है. "उपलब्ध" का मतलब है कि ऐसे पेमेंट ऐप्लिकेशन का पता लगाया जा सकता है जो पेमेंट के तरीके के साथ काम करता हो. साथ ही, प्लैटफ़ॉर्म के हिसाब से पेमेंट ऐप्लिकेशन इंस्टॉल हो या वेब पर आधारित पेमेंट ऐप्लिकेशन रजिस्टर किए जाने के लिए तैयार हो.

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

तीसरा चरण: खरीदार, पेमेंट करने के लिए बटन दबाता है

जब खरीदार पेमेंट बटन दबाता है, तो व्यापारी/कंपनी/कारोबारी PaymentRequest इंस्टेंस के show() तरीके को कॉल करता है. इससे पेमेंट यूज़र इंटरफ़ेस (यूआई) लॉन्च होना तुरंत शुरू हो जाता है.

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

पेमेंट यूज़र इंटरफ़ेस (यूआई) के लॉन्च को टालना

कुल कीमत तय होने तक पेमेंट यूज़र इंटरफ़ेस (यूआई) बदलने से रोकने का डेमो देखें.

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

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

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

चौथा चरण: ब्राउज़र, पेमेंट ऐप्लिकेशन को लॉन्च करता है

ब्राउज़र, प्लैटफ़ॉर्म के हिसाब से या वेब पर काम करने वाला पेमेंट ऐप्लिकेशन लॉन्च कर सकता है. Chrome यह कैसे तय करता है कि कौनसा पेमेंट ऐप्लिकेशन लॉन्च करना है, इस बारे में ज़्यादा जानें.

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

पेमेंट ऐप्लिकेशन लॉन्च होने पर, उसे पहले चरण में PaymentRequest ऑब्जेक्ट को भेजी गई लेन-देन की जानकारी मिलती है. इसमें ये चीज़ें शामिल हैं:

• पेमेंट के तरीके का डेटा
• कुल किराया
• पेमेंट के विकल्प

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

पांचवां चरण: ग्राहक की कार्रवाइयों के आधार पर, व्यापारी/कंपनी/कारोबारी लेन-देन की जानकारी को कैसे अपडेट कर सकता है

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

कारोबारी या कंपनी को चार तरह के इवेंट मिल सकते हैं:

• पेमेंट का तरीका बदलने से जुड़ा इवेंट
• शिपिंग पते में बदलाव करने से जुड़ा इवेंट
• शिपिंग के विकल्प में बदलाव करने से जुड़ा इवेंट
• कारोबारी या कंपनी की पुष्टि करने से जुड़ा इवेंट

पेमेंट का तरीका बदलने का इवेंट

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

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

शिपिंग पता बदलने का इवेंट

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

अगर कोई खरीदार लेन-देन शुरू होने के बाद, पेमेंट ऐप्लिकेशन में अपना शिपिंग पता अपडेट करता है, तो कारोबारी या कंपनी को एक 'shippingaddresschange' इवेंट भेजा जाएगा. इस इवेंट की मदद से, व्यापारी या कंपनी को नए पते के आधार पर शिपिंग के लिए खरीदार से लिया जाने वाला शुल्क तय करने, कुल कीमत अपडेट करने, और उसे पेमेंट ऐप्लिकेशन पर भेजने में मदद मिलती है.

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

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

शिपिंग के विकल्प में बदलाव करने से जुड़ा इवेंट

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

• स्टैंडर्ड शिपिंग - मुफ़्त
• एक्सप्रेस शिपिंग - 500 रुपये

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

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

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

कारोबारी या कंपनी की पुष्टि करने से जुड़ा इवेंट

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

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

छठा चरण: कारोबारी या कंपनी, पेमेंट की पुष्टि करके लेन-देन पूरा करती है

जब ग्राहक पेमेंट की अनुमति देता है, तो show() तरीका एक प्रॉमिस दिखाता है, जो PaymentResponse पर रिज़ॉल्व होता है. PaymentResponse ऑब्जेक्ट में यह जानकारी शामिल है:

• पेमेंट के नतीजे की जानकारी
• शिपिंग पता
• शिपिंग का विकल्प
• संपर्क जानकारी

इस समय, ब्राउज़र का यूज़र इंटरफ़ेस (यूआई) अब भी लोड होने का संकेत दिखा सकता है. इसका मतलब है कि लेन-देन अभी पूरा नहीं हुआ है.

अगर पेमेंट न होने या गड़बड़ी की वजह से पेमेंट ऐप्लिकेशन बंद हो जाता है, तो show() से मिला प्रॉमिस अस्वीकार हो जाता है और ब्राउज़र पेमेंट लेन-देन को बंद कर देता है.

पेमेंट प्रोसेस करना और उसकी पुष्टि करना

PaymentResponse में मौजूद details, पेमेंट ऐप्लिकेशन से मिला पेमेंट क्रेडेंशियल ऑब्जेक्ट है. कारोबारी या कंपनी, पेमेंट को प्रोसेस करने या उसकी पुष्टि करने के लिए क्रेडेंशियल का इस्तेमाल कर सकती है. यह अहम प्रोसेस कैसे काम करती है, यह पेमेंट हैंडलर पर निर्भर करता है.

लेन-देन पूरा करना या फिर से कोशिश करना

कारोबारी या कंपनी को यह पता चलने के बाद कि लेन-देन पूरा हुआ या पूरा नहीं हुआ, वे इनमें से कोई एक काम कर सकते हैं:

• लेन-देन पूरा करने और लोडिंग इंडिकेटर को हटाने के लिए, .complete() तरीके को कॉल करें.
• ग्राहक को retry() वाले तरीके को कॉल करके, फिर से कोशिश करने दें.

async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

अगले चरण

• पेमेंट का तरीका सेट अप करना सेक्शन में, पेमेंट के तरीके के आइडेंटिफ़ायर का एलान करने का तरीका जानें.
• Android के लिए पेमेंट ऐप्लिकेशन बनाने वाले डेवलपर के लिए बनी गाइड में, किसी प्लैटफ़ॉर्म के हिसाब से पेमेंट ऐप्लिकेशन बनाने का तरीका जानें.
• वेब-आधारित पेमेंट ऐप्लिकेशन डेवलपर के लिए बनी गाइड में, वेब-आधारित पेमेंट ऐप्लिकेशन बनाने का तरीका जानें.