वेब पेमेंट में क्या नया है, इसके बारे में अप-टू-डेट रहें.
वेब पेमेंट की सुविधा साल 2016 से ब्राउज़र पर सार्वजनिक तौर पर उपलब्ध है. मुख्य सुविधा—पेमेंट अनुरोध एपीआई—अब कई ब्राउज़र पर उपलब्ध है: Chrome, Safari, Edge, और जल्द ही Firefox होगा. अगर आपने वेब पेमेंट का इस्तेमाल पहले नहीं किया है, तो शुरू करने के लिए "वेब पेमेंट की खास जानकारी" देखें.
पेमेंट अनुरोध एपीआई और Payment हैंडलर API के लॉन्च होने के बाद से, इनसे जुड़ी खास जानकारी में कुछ बदलाव किए गए हैं. इन बदलावों से आपके काम करने के कोड पर कोई असर नहीं पड़ेगा. हालांकि, हमारा सुझाव है कि आप इन पर ध्यान दें. इस पोस्ट में, इन अपडेट की खास जानकारी दी गई है. साथ ही, यह एपीआई में हुए बदलावों का डेटा इकट्ठा करती रहेगी.
नया तरीका: hasEnrolledInstrument()
पेमेंट अनुरोध एपीआई के पिछले वर्शन में, canMakePayment() का इस्तेमाल यह पता लगाने के लिए किया गया था कि उपयोगकर्ता के पैसे चुकाने का तरीका मौजूद है या नहीं. हाल ही में खास जानकारी में किए गए अपडेट के मुताबिक, canMakePayment() की सुविधाओं में बदलाव किए बिना, इसे hasEnrolledInstrument() से बदल दिया गया है.
hasEnrolledInstrument() तरीके को इस्तेमाल करने के लिए, सभी ब्राउज़र की सहमति है.
Chrome ने इसे वर्शन 74 में लागू किया है और Webkit और Gecko, दोनों में गड़बड़ियां ट्रैक करने वाली हैं. हालांकि, जून 2019 तक इन्हें लागू नहीं किया गया है.
hasEnrolledInstrument() के नए तरीके का इस्तेमाल करने के लिए, कुछ ऐसा दिखने वाला कोड बदलें:
// Checking for instrument presence.
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
कुछ ऐसा दिखने वाले कोड के साथ:
// Checking for instrument presence.
if (request.hasEnrolledInstrument) {
// hasEnrolledInstrument() is available.
request.hasEnrolledInstrument().then(handleInstrumentPresence).catch(handleError);
} else {
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
}
canMakePayment() अब इंस्ट्रुमेंट की मौजूदगी की जांच नहीं करता
hasEnrolledInstrument() अब उपयोगकर्ता के पेमेंट करने के तरीके की जांच मैनेज करता है. इसलिए, canMakePayment() को सिर्फ़ पेमेंट ऐप्लिकेशन की उपलब्धता देखने के लिए अपडेट किया गया है.
canMakePayment() में किए गए इस बदलाव को सिर्फ़ hasEnrolledInstrument() को लागू करना होगा. जून 2019 से, इसे Chrome 74 में लागू कर दिया गया है
लेकिन दूसरे ब्राउज़र में नहीं. hasEnrolledInstrument()
तरीका इस्तेमाल करने से पहले, यह देख लें कि उपयोगकर्ता के ब्राउज़र में यह तरीका उपलब्ध है या नहीं.
// Checking for payment app availability without checking for instrument presence.
if (request.hasEnrolledInstrument) {
// `canMakePayment()` behavior change corresponds to
// `hasEnrolledInstrument()` availability.
request.canMakePayment().then(handlePaymentAppAvailable).catch(handleError);
} else {
console.log("Cannot check for payment app availability without checking for instrument presence.");
}
languageCode को पेमेंट के basic-card तरीके से हटाया गया
basic-card के शिपिंग पतों और बिलिंग पतों से PaymentAddress.languageCode को निकाल दिया गया है. पेमेंट के अन्य तरीकों, जैसे कि Google Pay के बिलिंग पतों पर कोई असर नहीं पड़ेगा.
यह बदलाव Chrome 74, Firefox, और Safari में लागू कर दिया गया है.
PaymentRequest.show() को अब detailsPromise का विकल्प देना होता है. हालांकि, यह ज़रूरी नहीं है
PaymentRequest.show() की मदद से व्यापारी/कंपनी को, कुल कीमत का पता चलने से पहले, पेमेंट के अनुरोध का यूज़र इंटरफ़ेस (यूआई) दिखाया जा सकता है. व्यापारी/कंपनी के पास समय खत्म होने से पहले, detailsPromise की समस्या हल करने के लिए 10 सेकंड होंगे. यह सुविधा सर्वर साइड से तेज़ दोतरफ़ा यात्रा के लिए बनाई गई है.
यह सुविधा, Chrome 75 और Safari पर भेज दी गई है.
// Not implemented in Chrome 74 and older.
// There's no way to feature-detect this, so check a few
// older versions of Chrome that you're seeing hit your servers.
if (/Chrome\/((6[0-9])|(7[0-4]))/g.exec(navigator.userAgent) !== null) {
return;
}
// Supported in Chrome 75+.
request.show(new Promise(function(resolveDetailsPromise, rejectDetailsPromise) {
// Find out the exact total amount and call
// `resolveDetailsPromise(details)`.
// Use a 3 second timeout as an example.
window.setTimeout(function() {
resolveDetailsPromise(details);
}, 3000); // 3 seconds.
}))
.then(handleResponse)
.catch(handleError);
PaymentRequestEvent.changePaymentMethod()
पेमेंट हैंडलर एपीआई PaymentRequestEvent.changePaymentMethod() सुविधा से पेमेंट हैंडलर की अनुमति मिलती है (उदाहरण के लिए, Google Pay) का इस्तेमाल किया जाएगा.onpaymentmethodchange changePaymentMethod() ऐसा प्रॉमिस दिखाता है जिसमें कीमत की अपडेट की गई जानकारी के साथ व्यापारी या कंपनी से जवाब मिलता है. उदाहरण के लिए, टैक्स का हिसाब लगाना.
PaymentRequestEvent.changePaymentMethod() और paymentmethodchange इवेंट, दोनों Chrome 76 में उपलब्ध हैं. साथ ही, Webkit ने अपनी टेक्नोलॉजी की झलक में paymentmethodchange इवेंट को लागू किया है.
// In service worker context, `self` is the global object.
self.addEventListener('paymentrequest', (evt) => {
evt.respondWith(new Promise((confirmPaymentFunction, rejectPaymentFunction) => {
if (evt.changePaymentMethod === undefined) {
// Not implemented in this version of Chrome.
return;
}
// Notify merchant that the user selected a different payment method.
evt.changePaymentMethod('https://paymentapp.com', {country: 'US'})
.then((responseFromMerchant) => {
if (responseFromMerchant === null) {
// Merchant ignored the 'paymentmethodchange' event.
return;
}
handleResponseFromMerchant(responseFromMerchant);
})
.catch((error) => {
handleError(error);
});
}));
});
व्यापारी का उदाहरण:
if (request.onpaymentmethodchange === undefined) {
// Feature not available in this browser.
return;
}
request.addEventListener('paymentmethodchange', (evt) => {
evt.updateWith(updateDetailsBasedOnPaymentMethod(evt, paymentDetails));
});
बेहतर लोकल डेवलपमेंट
Chrome 76 में डेवलपर की उत्पादकता को बढ़ाने के लिए, दो छोटे सुधार किए गए हैं. अगर आपके लोकल डेवलपमेंट एनवायरमेंट में, खुद से हस्ताक्षर किए गए सर्टिफ़िकेट का इस्तेमाल किया जाता है, तो अब आपके पास --ignore-certificate-errors कमांड लाइन फ़्लैग का इस्तेमाल करने का विकल्प है. इससे Chrome को अपने डेवलपमेंट एनवायरमेंट में, Web Payments API को अनुमति देने के लिए ऐसा किया जा सकता है. अगर आपने ऐसे लोकल वेब सर्वर का इस्तेमाल किया है जो एचटीटीपीएस के साथ काम नहीं करता, तो --unsafely-treat-insecure-origin-as-secure=<origin> फ़्लैग का इस्तेमाल भी किया जा सकता है, ताकि Chrome, एचटीटीपी ऑरिजिन को एचटीटीपीएस के तौर पर दिखाए.