Payment Request fails on chrome 111 but works on chrome 88

[asma1402]

Hello W3C team
Please Help !
I tried to implement a PaymentRequest solution for Merchant sites using our payment method, I created a service worker and a payment handler.
I tested the solution on chrome version 88 and it works just fine, I upgraded the browser to version 111, and now it fails!
and i keep getting this error : "Payment handler is not fully implemented. Cannot set the instruments.
", that means that service worker registration doesn't have an attribute : instriments, i checked in the console logs and yes it dosen't have this, and Uh oh, something bad happened The payment method "https://iour-payment-method.exemple/" is not supported
is there anything new in chrome 111 or older that can explain this behavior ?
and is there any new features or good practices to implement the same solution in chrome 111 and later ?

my service worker is as follows :

self.addEventListener('canmakepayment', e => {
	console.log('canmakepayment', e);
  e.respondWith(new Promise(function(resolve, reject) {
    resolve(true);
  }));
});
async function waitForMessage() {
	return new Promise((resolve, reject) => {
	  self.addEventListener('message', listener = e => {
		self.removeEventListener('message', listener);
		if (!e.data || !e.data.methodName ) {
			reject();
			return;
		}
    try {
      switch (e.data.type) {
        case 'WINDOW_IS_READY':
          resolve(e.data);
          break;
      }
    }catch (error) {
      resolver.reject();
      payment_request_event = null;
    }
		
	});
});
}
self.addEventListener('paymentrequest', evt => {
evt.respondWith((async() => {
	const windowClient = await evt.openWindow('check.html');
	  windowClient.postMessage( {
......
    });
	  const result = await waitForMessage();
	  return result;
	})());
	
  });
// Define a convenient `postMessage()` method
const postMessage = (type, contents = {}) => {
  if (client) client.postMessage({ type, ...contents });
}

My installer goes as follows :

function install(){
	hideElements();
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then((reg) => {
	return navigator.serviceWorker.ready;
}).then((registration) => {
	if (!registration.paymentManager) {
		return;
	}
	if (!registration.paymentManager.instruments) {
		console.log('Payment handler is not fully implemented. Cannot set the instruments.');
		return;
	}
	
	registration.paymentManager.instruments
		.set('instrument-key', {
			name: 'Chrome uses name and icon from the web app manifest',
			//enabledMethods: ['https://exemple.fr/'],
			method: 'https://exemple.fr/',
			
		})
		.then(() => {
			registration.paymentManager.instruments.get('instrument-key')
				.then(instrument => {
						console.log(instrument)
					
						showElement('installed');
					})
				.catch(error => {
						
						showMessage(error);
					});
		})
		
		.catch((error) => {
			console.log('error is' + error);
		});
		
		
})
.catch((error) => {
	console.log('error is' + error);
});
}
else {
    alert('service worker not available on this browser');
  }
}

@rsolomakhin
@adrianhopebailie
@ianbjacobs
@stephenmcgruer

[stephenmcgruer]

Hi there; this question is about Payment Request and Payment Handler, not SPC, so is in the wrong place. However I can give you a quick answer - see also w3c/payment-handler#410 where someone else asked a similar question recently.

Unfortunately PaymentManager.Instruments has been removed from the Payment Handler specification (w3c/payment-handler#409) and from Chromium as of M111.

The concept of a browser-managed instruments never fully matured in the ecosystem, and instead things moved in the direction of just having a payment app which is responsible for handling whatever payment methods it wants to internally to its own logic (server and client).

The still-supported way to install such a payment app is via the JIT path that is mentioned in the spec here, but which there is also a web.dev article on that may be useful - https://web.dev/setting-up-a-payment-method/

I hope that this helps!

[asma1402]

Thank you a lot