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

पेमेंट अनुरोध एपीआई बड़े लेवल पर कैसे काम करता है, इसके बारे में जानें.

एजी कितामुरा

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

जब कोई खरीदार आपकी वेबसाइट से कुछ खरीदने की कोशिश करता है, तो साइट को खरीदार से क्रेडिट/डेबिट कार्ड की जानकारी और वैकल्पिक तौर पर, शिपिंग की प्राथमिकता जैसी अन्य जानकारी मांगनी चाहिए. पेमेंट अनुरोध एपीआई (PR 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' }
  }
};

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

पेमेंट प्रोसेस शुरू करने से पहले, कारोबारी यह देख सकता है कि उपयोगकर्ता और पेमेंट का माहौल, पेमेंट करने के लिए तैयार है या नहीं.

canMakePayment() को कॉल करने से यह पता चलता है कि ब्राउज़र, ऑब्जेक्ट में बताए गए कम से कम एक पेमेंट के तरीके पर काम करता है या नहीं.

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') की प्रोसेस पूरी करके, पेमेंट के अनुरोध के यूज़र इंटरफ़ेस (यूआई) को बंद किया जा सकता है.

अगला

वेब से पेमेंट करने की सुविधा के बारे में ज़्यादा जानें.