Safari: show() must be triggered by user activation.

[socsieng]

Launching the Payment Request from via a hash change raises the following error in Safari:

SecurityError: show() must be triggered by user activation.

This currently triggered by (https://github.com/google-developer-training/pwa-ecommerce-demo/blob/master/project/app/scripts/modules/cart-view.js#L37):

this._checkoutBtn.addEventListener('click', this._goToPayment.bind(this));

and (https://github.com/google-developer-training/pwa-ecommerce-demo/blob/master/project/app/scripts/modules/cart-view.js#L78):

_goToPayment() {
    pushLocationHash('pay');
}

[sarahec]

Here's what's happening:

• Chrome sees the click and sets a flag that lets PaymentRequest::show run (which is why I was able to push the hash and let the next screen take it.)
• Safari expects you to show the payment screen from the event handler.

This is why e-commerce sites have ApplePay buttons on the "cart" page rather than on "payments". The vendor-specific payment modes essentially take the place of the checkout screen.

I want to have a chat with our Payments and UX people before making any changes, but you can do this in the meantime:

1. Add an ApplePay button, and Google Wallet, and so on.
2. Change the checkout button to "Pay with credit card" and move it next to the other payment methods.
3. Move the PaymentRequest trigger into that checkout handler.
4. Add a regular link to bring up the checkout screen.

It's almost an anti-pattern setting up payment this way, but it's also what everybody seems to be doing. I'll keep you posted if we come up with a better answer.

Thanks for reporting this,
Sarah