पेमेंट अनुरोध एपीआई कैसे काम करता है

जानें कि Payment Request API, बेहतर तरीके से कैसे काम करता है.

Eiji Kitamura

Payment Request API

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

बुनियादी स्ट्रक्चर

PaymentRequest ऑब्जेक्ट बनाने के लिए, दो पैरामीटर ज़रूरी हैं: पेमेंट के तरीके और पेमेंट की जानकारी. इसके अलावा, पेमेंट के विकल्प पैरामीटर का तीसरा वैल्यू देना ज़रूरी नहीं है. कोई बुनियादी अनुरोध इस तरह बनाया जा सकता है:

const request = new PaymentRequest(paymentMethods, paymentDetails);

आइए, देखें कि हर पैरामीटर को कैसे बनाया और इस्तेमाल किया जाता है.

पेमेंट के तरीके

पहला पैरामीटर, paymentMethods, एक कलेक्शन वैरिएबल में, पैसे चुकाने के उन तरीकों की सूची है जिनका इस्तेमाल किया जा सकता है. कलेक्शन में मौजूद हर एलिमेंट में दो कॉम्पोनेंट होते हैं, supportedMethods और ज़रूरत पड़ने पर data.

supportedMethods के लिए, व्यापारी/कंपनी/कारोबारी को पेमेंट के तरीके का आइडेंटिफ़ायर, जैसे कि https://bobbucks.dev/pay बताना होगा. data का मौजूद होना और उसका कॉन्टेंट, supportedMethods के कॉन्टेंट और पेमेंट ऐप्लिकेशन उपलब्ध कराने वाले के डिज़ाइन पर निर्भर करता है.

पेमेंट ऐप्लिकेशन उपलब्ध कराने वाली कंपनी को यह जानकारी देनी होगी.

// Supported payment methods
const paymentMethods = [{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: {
    ... // Optional parameters defined by the payment app provider.
  }
}];

पेमेंट के तरीके की जानकारी

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

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

const paymentDetails = {
  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' }
  }
};

देखें कि पेमेंट का तरीका उपलब्ध है या नहीं

PaymentRequest ऑब्जेक्ट बनाते समय, Chrome यह जांच करता है कि उपयोगकर्ता और एनवायरमेंट, पेमेंट करने के लिए तैयार हैं या नहीं.

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

request.canMakePayment().then(result => {
  if (result) {
    // This browser supports the specified payment method.
  } else {
    // This browser does NOT support the specified payment method.
  }
}).catch(e => {
  // An exception
});

MDN पर PaymentRequest.canMakePayment() के बारे में ज़्यादा जानें

show() तरीका

ऊपर दिखाए गए तरीके से दो पैरामीटर सेट करने और request ऑब्जेक्ट बनाने के बाद, show() तरीके को कॉल किया जा सकता है. इससे, पेमेंट ऐप्लिकेशन का यूज़र इंटरफ़ेस दिखता है.

request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});

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

आखिर में, पेमेंट के अनुरोध वाले यूज़र इंटरफ़ेस (यूआई) को बंद किया जा सकता है. इसके लिए, पीएसपी से मिले नतीजे के आधार पर, response.complete('success') या response.complete('fail') का इस्तेमाल करके प्रोसेस पूरी करें.

अगला लेख

वेब पेमेंट के बारे में ज़्यादा जानें.