`canMakePayment` always returns `null`

[MarkRabey]

Summary

I'm having trouble getting the button to display. The result from canMakePayment is always null. Code:

React.useEffect(() => {
    if (stripe) {
      const pr = stripe.paymentRequest({
        country: 'US',
        currency: 'usd',
        total: {
          label: 'Demo total',
          amount: 1099,
        },
        requestPayerName: true,
        requestPayerEmail: true,
      });

      pr.canMakePayment().then((result) => {
        if (result) {
          setPaymentRequest(pr);
        }
      });
    }
  }, [stripe]);

Other information

I am using https, although it is on localhost. I'm not sure that has an impact at all or not. I have added payment methods as well.

[graceg-stripe]

Hi @MarkRabey, can you confirm that you have a payment method saved in your browser when testing it? This can either be an apple pay card in Safari, google pay card or browser card in Chrome.

Here is our API reference and canMakePayment will resolve to null outside our supported cases. You can also double check your setup by visiting this documentation, and a button should show up on the top of the page if your have everything setup correctly (see the screenshot attached below).

Thanks!

[MarkRabey]

@graceg-stripe The payment button was not showing on the documentation screen. Interestingly, I did have a payment method saved and if I had DevTools emulate a mobile browser the documentation showed the button.. What was missing in my settings seems to be that "Allow sites to check if you have payment methods saved" was disabled. That seems to have resolved the issue. Thanks!