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

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

Eiji Kitamura

Milica Mihajlija

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

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

इस लेख में आपको किसी कारोबारी या कंपनी की वेबसाइट पर किए गए पेमेंट के तरीके की जानकारी दी गई है. इससे आपको यह समझने में मदद मिलती है कि पेमेंट ऐप्लिकेशन को इंटिग्रेट करने की सुविधा कैसे काम करती है.

इस प्रोसेस में छह चरण होते हैं:

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 इंस्टेंस का इस्तेमाल करके, कारोबारी या कंपनी यह क्वेरी कर सकती है कि ग्राहक के पास पेमेंट ऐप्लिकेशन उपलब्ध हो.

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

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

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

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

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

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

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

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

पेमेंट के यूज़र इंटरफ़ेस (यूआई) को आगे बढ़ाने के लिए, कारोबारी या कंपनी, 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 पेमेंट ऐप्लिकेशन के लिए डेवलपर की गाइड.
• वेब पर आधारित पेमेंट ऐप्लिकेशन के डेवलपर के ऐप्लिकेशन में, वेब पर आधारित पेमेंट ऐप्लिकेशन बनाने का तरीका जानें गाइड देखें.