Web Payments API से जुड़े अपडेट

वेब पेमेंट में हुए नए बदलावों के बारे में अप-टू-डेट रहें.

वेब पेमेंट की सुविधा, 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 पेमेंट के तरीके से हटा दिया गया

PaymentAddress.languageCode को basic-card के शिपिंग पतों और बिलिंग पतों से हटा दिया गया है. पेमेंट के अन्य तरीकों (जैसे, 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> फ़्लैग का इस्तेमाल भी किया जा सकता है.