Provide better UX for unsupported browsers/Safari 6 support about braintree-web-drop-in

[lilaconlee]

Thanks for the feedback! In Safari, we expect some errors due to our use of PostMessage but they should be purely cosmetic. This was also brought up as an issue for braintree-web as well.

As for older browser support, we'll take a look to see what we can do to improve the unsupported browser experience.

[dpolivy]

@lilaconlee Thanks. I think it'd be helpful for this to be in the drop-in UI, so every site doesn't need to implement this by itself! Our browser support is a bit broader than yours, so having a better experience for these edge cases would be useful.

[dpolivy]

@lilaconlee It seems that Safari 8 on iOS, which is supposed to be supported, is having the same problem as Safari 6. The blocked frame message is spewing to the console multiple times a second, and the form will not move forward.

Can you take a look? (I can open a separate issue if necessary.)

[lilaconlee]

I haven't been able to replicate the form being blocked, but I'll look into the console errors. We expect some console errors in the console in Safari, but not that many.

If you can provide any additional replication information, we can definitely take a better look into why the form won't move forward. I've been testing on an iOS 8 simulator with our demo app.

[lilaconlee]

The cross domain error messages are coming from our PayPal component and folks are working on a fix. You can follow the GitHub issue for those errors here.

Still, that should be unrelated to the issues you're seeing with the form, so please keep us updated with any additional information you find.

[dpolivy]

@lilaconlee I am also able to reproduce the issue with your demo app on BrowserStack using an iPad Air 2 with iOS 8. Any chance you have access to that? Easy repro for me. I'm happy to do a remote session with you to show you if that's easier.

[lilaconlee]

#202 should fix the functionality and styling in older iOS Safari. We'll get it reviewed and get it in with the next release. Thanks for reporting it!

[dpolivy]

Great, looking forward to trying the fix. Is the demo app updated with this yet so I can try it out?

[lilaconlee]

We keep the demo app running the latest released version, so it won't be updated until the next release.

If you want to checkout the fix-ios-safari-8 branch and follow the development instructions you can run the demo app locally. Once everything is built, you should be able to run npm run development to serve the app at port 4567.

[lilaconlee]

@dpolivy The iOS 8 card form submission bug is fixed as of 1.3.1 and is available to test on our demo app.

The styling in older versions of iOS should still be improved, so we'll leave the issue open until that has been addressed.

[dpolivy]

I was able to test on Safari 7 and 8, and both were able to proceed to the payment step, which is great to see. Thanks for the quick fix.

I did notice that the green circle graphic isn't rendering properly, hopefully that's what you're still planning to address in the future.

[lilaconlee]

We've improved the UI for older versions of mobile safari as part of 1.4.0. Let us know if there's something we didn't catch!