मानक ब्राउज़र एपीआई भुगतान अनुरोध

क्या आप जानते हैं कि कई आधुनिक ब्राउज़रों में एक अंतर्निहित एपीआई है जिसे भुगतान अनुरोध कहा जाता है? यह एपीआई डब्ल्यू 3 सी मानक में वर्णित है, जिसका उद्देश्य बिलिंग और संपर्क जानकारी के साथ काम का समर्थन करना है। यहाँ Developers.google.com पर मानक का अवलोकन किया गया है। एमडीएन वेबसाइट पर इस एपीआई के कार्यान्वयन की समीक्षा बताती है कि भुगतान अनुरोध डेवलपर ब्राउज़र टूल देता है जो उपयोगकर्ताओं को अपने पसंदीदा भुगतान प्रणालियों और प्लेटफार्मों को ऑनलाइन स्टोर के साथ जोड़ने की अनुमति देता है। इससे वस्तुओं और सेवाओं के लिए भुगतान करने, इस प्रक्रिया को गति देने और सरल बनाने की सुविधा बढ़ जाती है। विशेष रूप से, उदाहरण के लिए, भुगतान अनुरोध एपीआई उपयोगकर्ता को केवल एक बार अपनी बिलिंग जानकारी और पता दर्ज करने की अनुमति देता है, और प्रत्येक साइट पर एक ही जानकारी दर्ज नहीं करता है। इस API का समर्थन करने वाली सभी साइटों पर भुगतान उपयोगकर्ता के लिए समान होगा। भुगतान अनुरोध एपीआई में अन्य मूल्यवान विशेषताएं हैं। उनमें से - विकलांग उपयोगकर्ताओं के लिए भुगतान टूल की उपलब्धता के साथ समस्याओं को हल करना, विभिन्न उपयोगकर्ता उपकरणों के बीच भुगतान डेटा का सिंक्रनाइज़ेशन, मानकीकृत त्रुटि हैंडलिंग टूल।



सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, एपीआई भुगतान अनुरोध के व्यावहारिक उपयोग के प्रदर्शन के लिए समर्पित है। यह तुरंत ध्यान देने योग्य है कि भुगतान अनुरोध एपीआई एक प्रयोगात्मक तकनीक है जो भविष्य में अच्छी तरह से बदल सकती है। हालांकि, इस सामग्री के लेखक का कहना है कि इसके बावजूद, वह उसके साथ परिचित होने के लिए योग्य है। उन्हें विश्वास है कि इस तकनीक का एक उज्ज्वल भविष्य है, और यह कि इसमें जो बदलाव किए जा सकते हैं, वे बहुत अधिक के साथ काम करने के बुनियादी सिद्धांतों को प्रभावित नहीं करेंगे।

मूल बातें

भुगतान अनुरोध एपीआई के व्यापक रूप से अपनाने से ऑनलाइन भुगतान प्रणालियों के निर्माण और उपयोग में शामिल सभी को लाभ होगा। विशेष रूप से, प्रोग्रामर और वेबसाइट के मालिकों के लिए, इसका मतलब भुगतान स्वीकृति प्रणालियों के निर्माण की सुविधा होगा, और उपयोगकर्ताओं के लिए, सामानों और सेवाओं के लिए भुगतान की प्रक्रिया को सरल और तेज करना होगा।

जावास्क्रिप्ट में इस एपीआई का उपयोग करने के लिए, आपको सबसे पहले एक PaymentRequest ऑब्जेक्ट बनाना होगा। इसे बनाने की आज्ञा इस प्रकार है:

 new PaymentRequest(methodData: fn, details: fn, options?); 

PaymentRequest निर्माता दो आवश्यक पैरामीटर और एक वैकल्पिक पारित किया गया PaymentRequest :

• methodData पैरामीटर भुगतान सेवा प्रदाता के बारे में जानकारी रखने वाली वस्तुओं की एक सरणी है। यह, उदाहरण के लिए, समर्थित भुगतान विधियों के बारे में जानकारी है।
• details पैरामीटर एक ऐसी वस्तु है जिसमें एक विशिष्ट भुगतान के बारे में जानकारी होती है। उदाहरण के लिए, कुल भुगतान राशि, कर राशि, शिपिंग लागत।
• options पैरामीटर, वैकल्पिक, एक ऐसी वस्तु है जिसमें अतिरिक्त भुगतान जानकारी होती है।

आप MDN के साथ प्रलेखन में जानकारी पा सकते हैं कि भुगतान अनुरोध API केवल HTTPS का उपयोग करके किया जा सकता है। यह काफी स्पष्ट है कि यह एपीआई किसके साथ काम करता है।

यहां पेमेंट रिक्वेस्ट एपीआई के साथ उपयोगकर्ता की बातचीत कैसी दिखती है।


भुगतान अनुरोध एपीआई का उपयोग करना

जैसा कि आप देख सकते हैं, भुगतान प्रणाली सीधे ब्राउज़र में एकीकृत है। इसका मतलब है कि भुगतान को पूरा करने के लिए आपको असुरक्षित पुनर्निर्देशन कार्यों का उपयोग करने की आवश्यकता नहीं है, आपको किसी भी बाहरी एपीआई का उपयोग करने की आवश्यकता नहीं है। सब कुछ सीधे ब्राउज़र में होता है।

यहां एक परियोजना है जिसमें एक स्क्रीन का कार्यान्वयन प्रस्तुत किया गया है, जो उपयोगकर्ता को सहेजे गए भुगतान कार्ड डेटा की एक सूची दिखा रहा है।


सहेजे गए कार्ड

भुगतान अनुरोध एपीआई के साथ काम करने के व्यावहारिक उदाहरण पर विचार करें।

परियोजना का अवलोकन

यदि आप अपने दम पर इस परियोजना के साथ प्रयोग करना चाहते हैं, जिसका हम विश्लेषण करेंगे, तो आप निम्नलिखित कमांड निष्पादित कर सकते हैं:

 git clone https://github.com/indreklasn/payments-request-api-example.git && yarn && yarn start 

यह उचित रिपॉजिटरी को क्लोन करता है, प्रोजेक्ट निर्भरता स्थापित करता है, और सर्वर शुरू करता है, जो localhost:3000 पर उपलब्ध है localhost:3000 । कृपया ध्यान दें कि विचाराधीन आवेदन अनुसंधान उद्देश्यों के लिए स्थानीय प्रणाली में लॉन्च किया गया है।

आवेदन का मुख्य पृष्ठ बहुत सरल है। यह एक ऑनलाइन स्टोर के इंटरफ़ेस के टुकड़े की नकल करता है जो आपको एक निश्चित उत्पाद को "टोकरी में डालने" की अनुमति देता है। चेकआउट प्रक्रिया शुरू करने के लिए, BUY बटन पर क्लिक करें।


आवेदन पृष्ठ

हम एक बहुत ही सरल एप्लिकेशन के साथ काम कर रहे हैं। इसलिए, हम "ऑनलाइन स्टोर" के इंटरफ़ेस से संबंधित सभी तर्क और app.js फ़ाइल में भुगतान के लिए app.js हैं:

 let count = 0 const cartIncrementButton = document.getElementById('cartIncrement') const cartDecrementButton = document.getElementById('cartDecrement') const countElement = document.getElementById('count') const buyButton = document.getElementById('purchase') function init() {   countElement.innerHTML = count  cartIncrementButton.addEventListener('click', () => {    count++    countElement.innerHTML = `${count}$`  })   cartDecrementButton.addEventListener('click', () => {    if (count === 0) return    count--    countElement.innerHTML = `${count}$`  }) } init() 

यहाँ हमें DOM तत्वों के लिंक मिलते हैं, विशेष रूप से, "माल" की मात्रा बढ़ाने और घटाने के लिए बटन, और हम उन्हें इवेंट हैंडलर देते हैं। कुल राशि इसी पृष्ठ तत्व में प्रदर्शित होती है।

हमारे कोड से cartIncrementButton बटन को एक बटन के रूप में कल्पना की जा सकती है जो आपको कार्ट में कुछ उत्पाद जोड़ने की अनुमति देता है। cartDecrementButton बटन cartDecrementButton टोकरी से माल निकालने की अनुमति देता है, और countElement तत्व में टोकरी में डाले गए सभी सामानों की कीमत प्रदर्शित की जाती है।

भुगतान प्रणाली का कार्यान्वयन

निम्न कोड भी app.js में app.js यह ईवेंट हैंडलर का एक कार्यान्वयन है जो तब होता है जब आप BUY बटन पर क्लिक करते हैं (इसे कोड में buyButton कहा जाता है):

 buyButton.addEventListener('click', () => {   const request = new PaymentRequest(    buildSupportedPaymentMethodData(),    buildShoppingCartDetails()  ); }) 

उपयोगकर्ता द्वारा BUY बटन क्लिक करने के बाद, हम PaymetnRequest ऑब्जेक्ट का एक नया उदाहरण बनाते हैं। हम यहां कुछ ऐसे फंक्शन्स का उपयोग करते हैं जो ऑब्जेक्ट के कंस्ट्रक्टर को पास करने की आवश्यकता को वापस करते हैं। ये फ़ंक्शंस हैं buildSupportedPaymentMethodData और buildShoppingCartDetails ।

निर्माणकर्ता को पहला तर्क buildSupportedPaymentMethodData फ़ंक्शन के लिए कॉल द्वारा buildSupportedPaymentMethodData है। यह ऑब्जेक्ट की एक सरणी देता है जो भुगतान विधियों का समर्थन करता है। यह कार्य app.js में घोषित किया app.js :

 function buildSupportedPaymentMethodData() {  //    :  return [{    supportedMethods: 'basic-card',    data: {      supportedNetworks: ['visa', 'mastercard'],      supportedTypes: ['debit', 'credit']    }  }]; 

कंस्ट्रक्टर, buildShoppingCartDetails लिए दूसरा तर्क, एक फ़ंक्शन कॉल है जो खरीदारी को पूरा करने के लिए आवश्यक जानकारी उत्पन्न करता है।

इस जानकारी में शामिल हो सकता है, उदाहरण के लिए, खरीदे गए सामान का विवरण, उनका मूल्य, कुल खरीद राशि। buildShoppingCartDetails फ़ंक्शन के लिए कोड buildShoppingCartDetails भी है:

 function buildShoppingCartDetails() {  return {    id: 'count-order',    displayItems: [      {        label: 'Example item',        amount: {currency: 'USD', value: '1.00'}      }    ],    total: {      label: 'Total',      amount: {currency: 'USD', value: count }    }  }; } 

ध्यान दें कि यह फ़ंक्शन ऑब्जेक्ट देता है, न कि ऑब्जेक्ट की एक सरणी।

अब हम उपयोगकर्ता को भुगतान करने के लिए एक विंडो दिखाने के लिए तैयार हैं। request ऑब्जेक्ट के .show() विधि को कॉल करें। यह कॉल वादा वापस करेगा। यदि आप वादों से परिचित नहीं हैं, तो इस सामग्री पर एक नज़र डालें। कोड, फिर से, app.js :

 buyButton.addEventListener('click', () => {  const request = new PaymentRequest(    buildSupportedPaymentMethodData(),    buildShoppingCartDetails()  );  request.show().then(paymentResponse => {    console.log(paymentResponse)  }) }) 

परिणामस्वरूप, हमने BUY बटन दबाने के बाद, हमें यह देखना चाहिए कि निम्नलिखित आकृति में क्या दिखाया गया है।


उपयोगकर्ता भुगतान की सहमति

इस कदम पर, आपको सिस्टम में बैंक कार्ड की जानकारी जोड़ना होगा। मैं यहां VISA टेस्ट कार्ड का उपयोग करने की सलाह देता हूं। उपयुक्त फ़ील्ड में कार्ड नंबर, अपना नाम और पता दर्ज करें। हम सिर्फ एपीआई का परीक्षण कर रहे हैं, इसलिए दर्ज किया गया डेटा वास्तविक नहीं हो सकता है।


वीज़ा टेस्ट कार्ड नंबर


कार्ड विवरण दर्ज करें

भुगतान प्रसंस्करण

हमने सिस्टम में कार्ड की जानकारी दर्ज करने और भुगतान की पुष्टि करने के बाद, हमें वादा से लौटाए गए भुगतानप्रदर्शन ऑब्जेक्ट मिलता है।

हम उपयोगकर्ता को यह बताने के लिए उसके .complete () विधि को कहते हैं कि सब कुछ वैसा ही हो रहा है जैसा उसे होना चाहिए। यहाँ कोड में ऐसा दिखता है:

 buyButton.addEventListener('click', () => {  const request = new PaymentRequest(buildSupportedPaymentMethodData(), buildShoppingCartDetails());  request.canMakePayment().then(result => {    if (result) {      request.show().then(paymentResponse => {        console.log(paymentResponse.details)        //    . ,   ,     ,    .        paymentResponse.complete('success')          .then(() => thankYouMessage.style.opacity = 1)      })    }     }) }) 

वह सब है! हमने सिर्फ उस कोड की जांच की, जो एक ऑनलाइन स्टोर की सबसे सरल टोकरी को लागू करने के लिए आवश्यक है।

यहां आवेदन का पूरा प्रदर्शन है।


आवेदन प्रदर्शन

→ यहां आप प्रोजेक्ट का सोर्स कोड पा सकते हैं।

भुगतान अनुरोध API ब्राउज़र के समर्थन के बारे में

यहां caniuse.com के साथ भुगतान अनुरोध API के लिए समर्थन जानकारी दी गई है।


कौन से ब्राउज़र भुगतान अनुरोध API का समर्थन करते हैं?

जैसा कि आप देख सकते हैं, यह एपीआई अपेक्षाकृत नया है, इसलिए इसमें अभी तक विशेष रूप से विस्तृत ब्राउज़र समर्थन नहीं है। अच्छी बात यह है कि यह क्रोम, सफारी, फायरफॉक्स और एज द्वारा समर्थित है। आप शायद इनमें से कम से कम एक ब्राउज़र का उपयोग करते हैं, इसलिए आप आसानी से उन सभी चीजों का अनुभव कर सकते हैं, जिनके बारे में हमने ऊपर बात की थी।

यह ध्यान दिया जाना चाहिए कि भुगतान अनुरोध एपीआई ब्राउज़र के लिए समर्थन के क्षेत्र में अभी भी बहुत काम करना है। यह मोबाइल ब्राउज़र के लिए विशेष रूप से सच है। इसलिए, अगर मुझे अब इस एपीआई का उपयोग करना था, तो मैं अब तक मोबाइल उपकरणों पर इसके काम पर भरोसा नहीं करूंगा।

परिणाम

पेमेंट रिक्वेस्ट एपीआई के पास एक आम और लोकप्रिय तकनीक बनने का हर मौका है। इसलिए, यदि यह तकनीक आपकी रुचि है - यहां , यहां , यहां और यहां - ऐसी सामग्रियां जो आपको इसे बेहतर ढंग से समझने में मदद कर सकती हैं।

प्रिय पाठकों! क्या आप अपनी परियोजनाओं में भुगतान अनुरोध API का उपयोग करने पर विचार कर रहे हैं?