जब कोई खरीदार आपकी वेबसाइट से कुछ खरीदने की कोशिश करता है, तो साइट को खरीदार से पेमेंट की जानकारी मांगनी चाहिए. साथ ही, खरीदार से अन्य जानकारी भी मांगी जा सकती है. जैसे, शिपिंग के लिए पसंदीदा विकल्प. Payment Request API (PR API) का इस्तेमाल करके, यह काम आसानी से किया जा सकता है.
पेमेंट का बुनियादी स्ट्रक्चर
PaymentRequest ऑब्जेक्ट बनाने के लिए, दो पैरामीटर की ज़रूरत होती है: payment
methods और payment details. इसके अलावा, तीसरा पेमेंट के विकल्प पैरामीटर जोड़ना ज़रूरी नहीं है. इस तरह का बेसिक अनुरोध बनाया जा सकता है:
const request = new PaymentRequest(paymentMethods, paymentDetails);
देखें कि हर पैरामीटर कैसे बनाया जाता है और उसका इस्तेमाल कैसे किया जाता है.
पेमेंट के तरीके
पहला पैरामीटर, paymentMethods, एक ऐरे वैरिएबल में पेमेंट के उन तरीकों की सूची है जिनका इस्तेमाल किया जा सकता है. ऐरे में मौजूद हर एलिमेंट में दो कॉम्पोनेंट होते हैं: supportedMethods और data. 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 ऑब्जेक्ट बनाने के बाद, request तरीके को कॉल किया जा सकता है. इससे पेमेंट ऐप्लिकेशन का यूज़र इंटरफ़ेस दिखता है.show()
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
पेमेंट ऐप्लिकेशन का यूज़र इंटरफ़ेस कैसा दिखेगा, यह पूरी तरह से पेमेंट ऐप्लिकेशन उपलब्ध कराने वाली कंपनी पर निर्भर करता है. जब खरीदार पेमेंट करने के लिए सहमत हो जाता है, तब कारोबारी या कंपनी को एक JSON ऑब्जेक्ट भेजा जाता है. इसमें पैसे ट्रांसफ़र करने के लिए ज़रूरी सभी जानकारी होती है. इसके बाद, कारोबारी या कंपनी, पेमेंट प्रोसेस करने के लिए इसे पीएसपी को भेज सकती है.
आखिर में, पीएसपी से मिले नतीजे के आधार पर, response.complete('success') या response.complete('fail') का इस्तेमाल करके, पेमेंट के अनुरोध वाले यूज़र इंटरफ़ेस (यूआई) को बंद किया जा सकता है.
अगला
वेब पेमेंट के बारे में ज़्यादा जानें.