वेब पेमेंट में हुए नए बदलावों के बारे में अप-टू-डेट रहें.
वेब पेमेंट की सुविधा, 2016 से ब्राउज़र में सार्वजनिक तौर पर उपलब्ध है. मुख्य सुविधा, पेमेंट रिक्वेस्ट एपीआई, अब कई ब्राउज़र पर उपलब्ध है: Chrome, Safari, Edge, और जल्द ही Firefox पर भी उपलब्ध होगा. अगर आपने वेब पेमेंट की सुविधा पहले कभी इस्तेमाल नहीं की है, तो शुरू करने के लिए "वेब पेमेंट की खास जानकारी" देखें.
पेमेंट रिक्वेस्ट एपीआई और पेमेंट हैंडलर एपीआई के लॉन्च होने के बाद, इनकी खास बातों में कई बदलाव किए गए हैं. इन बदलावों से, आपके काम करने वाले कोड पर कोई असर नहीं पड़ेगा. हालांकि, हमारा सुझाव है कि आप इन पर ध्यान दें. इस पोस्ट में उन अपडेट के बारे में बताया गया है. साथ ही, एपीआई में होने वाले बदलावों को इकट्ठा किया जाएगा.
नया तरीका: 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 को वेब पेमेंट्स एपीआई की अनुमति देने में मदद मिलती है. अगर एचटीटीपीएस के साथ काम न करने वाले किसी लोकल वेब सर्वर का इस्तेमाल करके डेवलप किया जाता है, तो Chrome को एचटीटीपी ऑरिजिन को एचटीटीपीएस के तौर पर दिखाने के लिए, --unsafely-treat-insecure-origin-as-secure=<origin> फ़्लैग का इस्तेमाल भी किया जा सकता है.