Stripe's support team confirmed to me that a green SSL verification is required.
"One of the prerequisites for the payment request button is that the
page the payment request is located on will have to be served as
secure with a valid certificate. This is a requirement for both
production and development."
Here is an experiment. Browse to a site in Chrome where the URL says "Secure https:" in green, such as https://stackoverflow.com. Open the developer console, and paste in these commands (from here) and press Enter:
const supportedPaymentMethods = [
{
supportedMethods: 'basic-card',
}
];
const paymentDetails = {
total: {
label: 'Total',
amount:{
currency: 'USD',
value: 0
}
}
};
const options = {};
const request = new PaymentRequest(
supportedPaymentMethods,
paymentDetails,
options
);
request.show();
You'll then see a payment request modal pop up.
But if you browse to your own local site that where the address bar says in red "Not secure" (and "https" is crossed out), and if you try to run that same code in the console, no payment request modal will pop up (even if you've added a security exception for the domain).
So, apparently Chrome (and probably other browsers) prevent Stripe (and other tools like Stripe) from accessing that browser functionality when the connection isn't fully secure.
UPDATE from Stripe:
While Chrome iOS does include a PaymentRequest implementation, it does not allow PaymentRequest to be used from an iframe which prevents Stripe's payment request button element from working. We're working with the Chrome team to get this resolved in a future release.
In order for Apple Pay to work in the iOS Simulator or on a test device the domain must be publicly accessible and registered through the Stripe dashboard (https://dashboard.stripe.com/account/apple_pay) or API. https://stripe.com/docs/stripe-js/elements/payment-request-button#verifying-your-domain-with-apple-pay We recommend using a tool like ngrok (ngrok.com) to create a public-facing domain with a valid HTTPS certificate that tunnels to your local environment.
canMakePayment()working locally, I'd LOVE your thoughts! Thanks! – Orcutt