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

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

ईजी कितामुरा

मिलिका मिहाजलिया

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

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

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

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

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

इसमें ट्रांज़ैक्शन आईडी शामिल है

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

कारोबारी, PaymentMethodData ऑब्जेक्ट की data प्रॉपर्टी के हिस्से के तौर पर, ट्रांज़ैक्शन आईडी पास कर सकता है.

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

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

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

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

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

क्या ग्राहक के पास पेमेंट ऐप्लिकेशन उपलब्ध है?

अगर ग्राहक के डिवाइस पर पेमेंट ऐप्लिकेशन उपलब्ध है, तो canMakePayment() के PaymentRequest तरीके से 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
  });
});

ध्यान दें: व्यापारी/कंपनी की पुष्टि करने वाला इवेंट सिर्फ़ Apple Safari तक ही सीमित है. मई 2020 से, Chromium पर आधारित ब्राउज़र ने इस इवेंट को लागू नहीं किया है.

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

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