Woocommerce-services: Edit Order: automatically go back to order page after entering credit card

[v18]

Scenario:

1. Go to edit order page for the first time
2. See that you can print a label after adding a credit card
3. Click the add credit card link
4. Select a credit card
5. 😕 <- what now?
   Solution: after saving the credit card, we automatically redirect the user back to the edit order page

Related to: #1086

[olaolusoga]

Thought I had commented on the related issue (#1086). We should add a link to the confirmation notification that appears in the top right when a users selects a credit card.

Reason: Redirecting back will most likely be jarring for users who land on the credit card step outside the edit order page path. Showing a text link that says "Create a label now" (or something along those lines) should keep it vague enough to nudge people who haven't seen the create a label widget, and those who came from there

[dechov]

Is that still a concern if we redirect only in the case where you were referred from the edit order page? I do see how the redirect may be jarring anyway, and how the link may be preferable, but I'm not sure.

Also, is rendering the credit card portion of the shipping label settings in a modal right on the edit order page another option worth considering?

Separate but adjacent issue: as @msdesign21 highlighted in p7bbVw-21q-p2, there's no obvious next step after successfully adding a card in Calypso. Is there anything we can do about that, and is there any overlap with this issue? (Somewhat relevant discussion in https://github.com/Automattic/woocommerce-services/issues/1014: in Store on WP.com, it will show a modal for adding a card instead of redirecting to /me/billing)

[dechov]

Another option is to put the card options right in the "create new label" view, which I think would make some sense from a "checkout flow" perspective. (If one is already configured, it'll just show a line of text confirming and offering to change, as worked out in https://github.com/Automattic/wp-calypso/issues/16570.) This could possibly show up in the bare right-side pane — past ideas about what else to do with that space (https://github.com/Automattic/woocommerce-services/issues/819) also focused on "checkout details", and I would think that the card info would be complementary. (cc: @kellychoffman)

Related items: a) the "Add another credit card" href should be tweaked as per https://github.com/Automattic/woocommerce-services/issues/1014#issuecomment-308284702, and b) it might help to have an obvious way to refresh the list — either a button or periodic polling — since as of now you have to know to refresh the shipping label settings page.

[olaolusoga]

Also, is rendering the credit card portion of the shipping label settings in a modal right on the edit order page another option worth considering?

Another option is to put the card options right in the "create new label" view, which I think would make some sense from a "checkout flow" perspective.

AFAIK, conversation has been to keep credit card things within wordpress.com for security reasons. If it's changed, and we can add the checkout flow to wp-admin, that'd be stellar.

[v18]

Is that still a concern if we redirect only in the case where you were referred from the edit order page? I do see how the redirect may be jarring anyway, and how the link may be preferable, but I'm not sure.

Solution 1

@olaolusoga To solve the specific flow/usability problem outlined in this issue, would it be ok to redirect only users who have come from the 'Edit Order' page, i.e. from this screen:

If a redirect is too jarring even in this case, what else can we do - maybe a link that says 'Take me back to my order'?

Solution 2

@dechov also mentioned this possible solution to the same problem:

Another option is to put the card options right in the "create new label" view, which I think would make some sense from a "checkout flow" perspective.

If I understood that correctly, then this would add the options either to this screen:

I think this can make for a great solution, but it's not something that solvable in August or in the short term because:

1. We'll need to design it first, including the flows for what happens when a credit card has not yet been entered on WP.com (we can't redirect back to wp-admin yet)
2. It's not the most straightforward change - we'll need to be able to show the label purchase flow without a credit card

Proceeding to solve the current usability issue

My preference would be to go with solution #1 so that we can fix the usability problem we encountered during the test (e.g. redirect users coming directly _from_ the Edit Order screen back to the Edit Order screen after saving a new credit card, when possible), and then implement solution #2 once we have a decision & design for it.

[olaolusoga]

Is that still a concern if we redirect only in the case where you were referred from the edit order page?

Not at all. The jarring statement was for other scenarios where users might not be cognizant of the create a label widget, and landed on credit card page pre edit order. @dechov

To solve the specific flow/usability problem outlined in this issue, would it be ok to redirect only users who have come from the 'Edit Order' page, i.e. from this screen:

Agree @v18 . Solution #1 would be a quick win.

Solution #2 might need more thinking/fleshing out to see what the best way to handle collecting credit card info in wp-admin is. Agree on tackling later.

[v18]

Cool 👍 Going to go for solution #1 for now :D

[v18]

@dechov mentioned we should also directly link to the 'add a credit card' page: https://wordpress.com/me/purchases/add-credit-card

[dechov]

https://github.com/Automattic/woocommerce-services/pull/1300 implements Solution 1. The most straightforward approach to Solution 2 may be to just show the same credit card info notice in the label purchase sidebar, but have it open the label settings in a modal — or just the payment section, since the other settings can go (or already are) directly in the sidebar.

[msdesign21]

I'm not sure #2 solution (entering card details directly from the order/customer site) can ever be considered secure without a SSL on someone's site. Since this is technically not required for WCS (even though all stores should have it) I wouldn't feel comfortable looking at this option.

[dechov]

@msdesign21 Solution 2 referred only to where the card selection would show up, not the add card form. (We currently show it only at /wp-admin/admin.php?page=wc-settings&tab=shipping&section=label-settings.) This is how it looks by default if a card is already selected:

We did have a separate idea to attempt loading the add credit card form in an iframe, but we've yet to try it and I'm not sure how much promise it has, and we still might fall back to a separate tab in the non-SSL case.

[msdesign21]

Ah thank you for the clarification!

[v18]

@dechov afaik this is done in wp-admin now, right? Are there any other changes, either in Calypso or wp-admin, that we'd like to make that are related to this issue?

[dechov]

@v18 I think this can be closed (via https://github.com/Automattic/woocommerce-services/pull/1300). "Solution 2" above is still an enhancement that I favor but is sufficiently captured in https://github.com/Automattic/wp-calypso/pull/22890

[v18]

Not sure if you want to close or keep this issue open - leaving it up to you.