[settings] UPE feature flag design update

[frosso]

Description

In the newest designs, it looks like the UPE feature flag changed from being displayed in a banner to being displayed as a chackbox.
(please confirm with UX) checking the checkbox should redirect to the UPE onboarding wizard.

Questions

• Does checking the checkbox redirect to the onboarding wizard?
• Does the redirect happen immediately after saving or immediately after checking it?
  • If it happens immediately after checking the checkbox, is it acceptable to not save the pending changes on the settings?
• Should we still display a banner in giropay/Sofort/etc. (other UPE payment methods) when UPE is disabled?
• Should we also remove the inbox notification to enable UPE? (WC_Stripe_UPE_Availability_Note)
• Any other questions?

Acceptance criteria

• UX matches the designs
• Behavior has been clarified
• Functionality is implemented

[LevinMedia]

@frosso @RafaelFunchal

(please confirm with UX) checking the checkbox should redirect to the UPE onboarding wizard.

Affirmative 👍

[frosso]

@LevinMedia thanks for confirming!

• Does the redirect happen immediately after saving or immediately after checking it?
  • If it happens immediately after checking the checkbox, is it acceptable to not save the pending changes on the settings?

[LevinMedia]

On second thought - that doesn't really make sense, it seems like the first time around it should be a button that launches the experience, then after it's set up, it can be toggled on or off with the check mark - cc @jarekmorawski

[jarekmorawski]

@LevinMedia I've thought about it hard while workin on this part of the experience and couldn't figure out how to fit in there a button that would later turn into a checkbox. It seemed logical to me to let folks enable and disable the new experience in exactly the same way. Also, checking a box shows an intent ("I want to enable the new UX") and after the stepper, people will see the end result (the box is checked = the new UX is on).

Given that we've got a more distinguishable button in the Inbox note, I'd stick to the checkbox and add a loader to it so that people know that something's going on in the background when they turn it on.

[frosso]

@jarekmorawski it's no problem to convert the experience to a checkbox.
But when does the stepper come into play? Does the user get redirected after checking the checkbox?

If that's the case, are there concerns that the redirect would "break" the user's expectations when checking a checkbox? (i.e.: the user is just checking a checkbox, not clicking on a link)
What would happen to the rest of the settings displayed on the page that haven't yet been persisted? Would it be acceptable to not save the rest of the pending changes on the settings page?

[jarekmorawski]

Hiya! 👋

Does the user get redirected after checking the checkbox?

That's the idea. Ideally, we'd add a loading state to the checkbox to let them know something's going on in the background. We could let them check the box without going through the setup, but that raises concern that they'd never do it. Without the immediate redirection, we're left with similarly unappealing alternatives:

• redirecting people after they save settings
• adding a link/button to the checkbox (what if they miss it?)
• sending an Inbox note
• immediately turning on the new UX (without additional config it may break the checkout)

I'm happy to explore it a little further, though. @LevinMedia, do you have any thoughts?

Would it be acceptable to not save the rest of the pending changes on the settings page?

Can they be cached so that changes are visible to people when they finish/cancel UPE setup? Then, they'd proceed to save changes as usually (if people finished setup, UPE would be turned on and saved in the background separately from other settings).

[frosso]

Can they be cached so that changes are visible to people when they finish/cancel UPE setup? Then, they'd proceed to save changes as usually (if people finished setup, UPE would be turned on and saved in the background separately from other settings).

The wizard is on a separate page and unfortunately, a page redirect resets the state of a form :(

[jarekmorawski]

I understand. 🤔 Maybe we could add an affordance to let people know the button is linked to an external flow?

cc @LevinMedia

[cesarcosta99]

Jumping in to share an idea, maybe the whole sentence "Try the new checkout experience (early access)" could be a link to the onboarding? Or even turn it into a button? It could be that the user think they just need to tick the box to enable it. We could add a notice/subtitle saying "You will be redirected to the onboarding" or "Your current changes will be discarded" too.

@jarekmorawski can you please share the link we should use for the "submitting your feedback" text?

[jarekmorawski]

Or even turn it into a button?

That's a great idea and after exploring it a little, David and I arrived at a different, but simpler solution. After checking the box and saving settings (which solves us the "Should we discard changes?" dilemma), we'd show a toast message pointing merchants to Settings > Payments where they'd enable/disable and add payment methods.

We skip the stepper entirely in Stripe, because the payment method are managed differently from WCP.

Here's a brief video of what it'd look like. I'll update the designs in Figma.

toast.mov

@jarekmorawski can you please share the link we should use for the "submitting your feedback" text?

It'd the same CS survey link that we've in Settings > Payments > Payment methods table > Provide feedback:

https://woocommerce.survey.fm/woocommerce-stripe-upe-opt-out-survey

[cesarcosta99]

@jarekmorawski I think that really solves most of the questions we had, thank you!

We skip the stepper entirely in Stripe, because the payment method are managed differently from WCP.

That lead us to the remaining questions:

1. Should we still display a banner in giropay/Sofort/etc. (other UPE payment methods) when UPE is disabled or non-UPE methods such as Alipay?
   
2. Should we also remove the inbox notification to enable UPE? (WC_Stripe_UPE_Availability_Note)

If the answer to 1 is "no", it means the onboarding stepper will be completely removed indeed.

[jarekmorawski]

Hi @cesarcosta99! 👋

Should we still display a banner in giropay/Sofort/etc. (other UPE payment methods) when UPE is disabled or non-UPE methods such as Alipay?

No. I don't think the banner is needed anymore.

Should we also remove the inbox notification to enable UPE? (WC_Stripe_UPE_Availability_Note)

No, I'd leave the notification as it. It currently takes you to the stepper, but now it could enable the UPE in the background and display the toast with a link to the payment methods settings.

[dechov]

Will there still be a "Disable" option from the menu of the "Payment methods" view? If so, we may want to word it more clearly: "Disable new checkout experience"?

Also, when disabling using that option, I'm seeing a potentially misleading message about payment methods requiring UPE:

If that will still show, we may want to adjust that wording (though it can also be a separate issue).

[jarekmorawski]

Will there still be a "Disable" option from the menu of the "Payment methods" view?

Yup! In Stripe, the message has been tweaked a little.