I am looking into the Payment Request API as a way to streamline payments on our site checkout and have run into a bit of a brick wall on how to use it with card payments. There are a few demos explaining how to use the payment request API, this one seemed to be the simplest and easiest to follow, but it is also quite out of date (as a lot of PR API demos i've found seem to be). Here is my code than runs when the payment button is clicked:

const paymentMethods = [
    {
        supportedMethods: ['basic-card', 'visa', 'mastercard', 'amex'],
        data: {
                supportedNetworks: ['visa', 'mastercard', 'amex']
        }
    }
];

const details = { total: { label: 'Test payment', amount: { currency: 'GBP', value: '1.00' } } };

// Show a native Payment Request UI and handle the result
const request = new PaymentRequest(paymentMethods, details);

request.show()
    .then(response => {
        console.log('yep');
        console.log(response);
    })
    .catch(err => {
        console.error(err);
    });

I get the following error in the console:

Uncaught RangeError: Failed to construct 'PaymentRequest': Invalid payment method identifier format

I did some digging and found that the 'basic-card' supportedMethod is deprecated, and simple references to credit card providers don't seem to be supported anymore. The MDN docs for supportedMethods actually state

Starting with more recent browsers, this parameter is more generic than credit cards, it is a single string, and the meaning of the data parameter changes with the supportedMethods. For example, the Example Pay payment method is selected by specifying the string https://example.com/pay here.

Which is all well and good, but if i want to support Visa or Mastercard credit and debit card payments what URL do i use for them under supported methods? The payment processor for our website is Worldpay, so is this something i'd ask them for? Or do i need to find individual urls for Visa and Mastercard? I have done some googling and can't find anything relevant for either of them. Maybe i'm just bad at googling, but i don't really know how to proceed with this and wondered if anyone else had experience in setting up the payment request API to use credit and debit cards.

Oh, and i'm testing this in Chrome 103 btw.

Thanks