woocommerce / woocommerce-gateway-stripe

The official Stripe Payment Gateway for WooCommerce
https://wordpress.org/plugins/woocommerce-gateway-stripe/
232 stars 204 forks source link

UI Improvements #490

Open WPprodigy opened 6 years ago

WPprodigy commented 6 years ago

Stripe is one of our most popular payment gateways. With the latest feature additions, it's UI has kinda turned into a mess. Here are some enhancement ideas that I'd be happy to help with. Before starting though, I wanted to get some feedback as well as maybe reach out to our designers?

WC > Settings > Checkout

With just Stripe installed on a fresh WooCommerce site, the checkout settings turn into this: http://cld.wthms.co/J2Imne & http://cld.wthms.co/WURYKL. This looks quite cluttered, and could be confusing to a customer who just installed one plugin and only wants the main stripe gateway. Each extra settings page, aside from the main Stripe page, is just an activation toggle and title/description field. It's the same three options for all 8 of the other menu pages.

My proposal is to remove these 8 extra sub-menu pages, and instead house the options in the main Stripe settings. Since we only need to collect three settings for each, it could perhaps be a simple table like this: http://cld.wthms.co/jE96aT (with input field for description as well and toggling for status).

It could also be cool, if possible, to only show the extra gateway option if it has been enabled on the user's Stripe account.

I'm aware that this is likely something WooCommerce core currently forces (an extra settings page for each gateway), but seems reasonable to create some extra filters/hooks if necessary to prevent this need.

WC > Settings > Checkout > Stripe

This page has also become quite cluttered with settings. Many of the settings aren't clear what they do, I believe this is because we used Stripe's development terminology for features rather than what would make sense to the customer.

Let's take a look at a few of the settings: http://cld.wthms.co/hZ2Nik

1) "Inline Credit Card Form"

I read this setting and description, but still did not understand it until I tested. For those wondering, it is http://cld.wthms.co/nfzPWO versus http://cld.wthms.co/LlgtbH (inline). Suppose it makes sense after seeing it, but that's the point :). How could this better be described? Maybe a toggle between two example layout grids?

2) "Capture charge immediately"

Pretty well known thing with gateways, but not all merchants will understand. A toggle between Capture and Authorize Only could be more descriptive.

3) "Enable Stripe Checkout"

The naming for this option is the most annoying thing in the world when it comes to communicating with customers in support. For example, "Are you using Stripe Checkout?" is just a silly thing to say, and goes right over most people's heads.

For those wondering, this is what this setting does when enabled: http://cld.wthms.co/4nWvVz. Instead of using Stripe's terminology here, I recommend we describe what it is / what it is doing instead.

4) "Enable Payment via Saved Cards"

Pretty descriptive, but could be better as this only describes one part of the feature. Perhaps more notable, this option also allows customers to save credit cards/tokens to their account - securely.

5) "Payment Request Buttons"

When enabled, you get some more settings: http://cld.wthms.co/Gausei. Those three extra settings seem pretty odd to me, as that's the sort of thing we usually leave up to the theme and customizations - decisions, not options.

And then while "Payment Requests" is the terminology Stripe uses, I'm not sold that it's the best customer facing term we could use to describe Apply Pay and Chrome Payments.

Also, I believe Payment Requests can be enabled even while the default Stripe gateway is disabled. With this being the case, it seems odd where this setting is currently listed. This option should be more inline with the other gateways that can be enabled/disabled.


Lastly, all of the settings on WC > Settings > Checkout > Stripe could be categorized and grouped a bit better IMO. And perhaps many of them could be found underneath a toggle-able "Advanced Settings" toggle.

roykho commented 6 years ago

When enabled, you get some more settings: http://cld.wthms.co/Gausei. Those three extra settings seem pretty odd to me, as that's the sort of thing we usually leave up to the theme and customizations - decisions, not options.

From what I remember, those are trademarks designs so people cannot customize them to their liking.

kellychoffman commented 6 years ago

I'm going to walk through this flow again this week so its super fresh in my mind before responding, but overall: YES, there are a lot of improvements we can make here. Thanks for bringing this up.

BurlesonBrad commented 6 years ago

Caleb, dont forget that sometime soon, Roy's gonna have to take out at least one of those since Bitcoin is being discontinued.

https://stripe.com/blog/ending-bitcoin-support

stripe-bitcoin

ahmed-sigmalux commented 6 years ago

Another UI issue: selecting both "Enable Stripe Checkout" and "Enable Payment via Saved Cards" generates duplicate "save to account" checkboxes. The checkbox first appears on the checkout page itself, right below the credit card description. A duplicate checkbox then appears within the Stripe checkout itself.

If "Enable Stripe Checkout" is selected, then also selecting "Enable Payment via Saved Cards" should NOT add a "save to account" checkbox to the checkout page. It should only show the "save to account" checkbox within the Stripe checkout itself.