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