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