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

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

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 के लिए पेमेंट ऐप्लिकेशन बनाने वाले डेवलपर के लिए बनी गाइड में, किसी प्लैटफ़ॉर्म के हिसाब से पेमेंट ऐप्लिकेशन बनाने का तरीका जानें.
• वेब-आधारित पेमेंट ऐप्लिकेशन डेवलपर के लिए बनी गाइड में, वेब-आधारित पेमेंट ऐप्लिकेशन बनाने का तरीका जानें.