Update the UX for unsupported countries

[csmcneill]

Description

If a merchant attempts to onboard with WooPayments but their store country at WooCommerce > Settings > General is not set to a supported country, the merchant will see a modal that lists supported countries before they are allowed to continue.

There are two issues with this modal:

1. The modal contains a super long bulleted list.

We've added numerous countries since this modal was first introduced in #2181:

As a result, it now scrolls:

One solution could be to split up these countries into two columns to take advantage of the white space on the right-side of the modal.

2. The modal suggests that we have documentation related to setting up business entities in foreign countries.

We do not (and I don't believe that we should) advise our users on how to set up a business entity in another country. Currently this link is misleading as it directs prospective merchants to information that we do not offer aside from a blurb about ensuring that a business is registered in a supported country:

NOTE: If you’re using WooPayments for a business, the relevant country is the one where your business is registered, not the one in which you personally live. For example, if you live in South Africa but your business is registered in the Netherlands, you can use WooPayments for that business.

I think that this should be changed to something along the lines of:

Learn more about supported countries.

Acceptance criteria

• First requirement
• Second requirement
• Third requirement
• etc.

Designs

Testing instructions

1. Create a new site.
2. Select an unsupported country during the Woo onboarding flow or manually at WooCommerce > Settings > General (e.g., Mexico).
3. Navigate to Payments and attempt to onboard.
4. Note the modal design and the verbiage at the bottom of the modal.

Dev notes

Additional context

[zmaglica]

@anu-rock this issue affects Onboarding, so I will move it to the team Moltres (Other Teams queue) as a part of the Gamma issues triage process.

[anu-rock]

Good points, @csmcneill. I like your suggestions. If @elizaan36 is also okay with the suggestions, we could try and prioritize it soon. It should be a fairly quick one.

cc @elazzabi who worked on this modal last year and might be interested in providing his thoughts.

[elizaan36]

Thanks for the ping @anu-rock.

Could we simply remove the modal and direct to the documentation in the notice? I wouldn't recommend adding a second column to the modal as we need to consider smaller screen sizes, and we can better communicate to the merchant in the docs.

@csmcneill We may have discussed this in Slack a few days ago, but there's an opportunity to gauge interest from other countries that would like to use WooPayments, maybe in a survey link from the docs?

FYI I'm going to have a closer look and share a P2 hopefully next week on the non supported countries flows but I think this is a good quick win.

[anu-rock]

Thanks for your quick reply, @elizaan36 🙌 I'll look forward to your P2.

[csmcneill]

there's an opportunity to gauge interest from other countries that would like to use WooPayments, maybe in a survey link from the docs?

We generally ask folks to open (or vote for) a feature request if they want to see WooPayments expand to their country.

We have this section in the supported countries documentation which directs folks to the feature request portal.

I can imagine that adding an embedded survey would provide a more delightful experience for folks in unsupported countries, but it may be more difficult for us to gauge demand than the feature request portal since:

1. Folks can just upvote feature requests their country if they're logged into Woo.com.
2. Creating a feature request requires a Woo.com account, which prevents spam.

[elazzabi]

I believe this would be a quick win and a good improvement to our UX. I'm willing to work on it if we have a design proposal. cc @elizaan36, let me know if you have a proposal or draft for this!

[elizaan36]

hey team, Here's the proposal. Let me know what you think.

User in unsupported country

The goals are:

• To make the Payments screen more useful for users who aren't supported by WooPayments
• Make it clear that WooPayments features aren't available
• Present the information they need in a readable and accessible way, with links for further reading

Copy

Notice

WooPayments is not currently available in your location. To be eligible for WooPayments, your business address must be in one of the supported countries.

Card

Title

WooPayments is not available in your region

Inline notice

If you want to use WooPayments, but it’s not available in your country, please vote for your country to be supported on the WooPayments feature requests page.

Popover

Discover additional payment providers

[csmcneill]

@elizaan36 I love the recommendations, though I am concerned about the inability to continue onboarding even if the user is in an unsupported geo.

@timmy5685 How do you recommend we handle the UI if a merchant tries to onboard with WooPayments but their location in the core WooCommerce settings is in an unsupported region? Do we want to completely lock someone out from onboarding in these situations, or should we provide them with a path to onboard that has a teensy bit more friction (e.g., an option tucked away in the ellipsis menu popover)?

[elizaan36]

It's not great UX to indicate that you can continue when you won't be able to. Another option could be to move the country switcher to the Payments connect screen somehow. Here's a quick sketch to illustrate the idea, not final design!

[timmy5685]

@elizaan36 - in the event that we know a merchant isn't eligible for WooPayments, I think we should consider making the "discover additional payment providers" more visible. Rather than an ellipses, could we show alternatives below similar to how we do when the WooPayments plugin isn't installed? ("Other payment providers" section in the screenshot below)

Something like this would feel like less of a dead end to @csmcneill's point above and hopefully keep them moving. It also let's us position our preferred options while still giving them a link to others of those aren't the right fit.

As for the location setting - I like this concept. I think it could be helpful to incorporate the "Business Location" and "update" link (assuming this goes to the settings page) into the WooPayments modal. I don't think we need this when the country is supported - but it could be dynamically shown in the tile when WooPayments is unsupported.

[elizaan36]

could we show alternatives below similar to how we do when the WooPayments plugin isn't installed?

Yes, makes sense. There are a couple ways we've explored doing this.

Payment partners + Search

This is probably more suited to the WooPayments > WooCommerce project as a core feature.

Payment partners in a list

Similar to the payments task example you shared.

Both options link out to the Marketplace for additional discovery.

I think it could be helpful to incorporate the "Business Location" and "update" link (assuming this goes to the settings page) into the WooPayments modal.

In the mockups I integrated the country picker into the tile as a dropdown.

Thanks for brainstorming this with me @timmy5685 and @csmcneill ! I've been meaning to share everything on P2 soon and we can chat about it there but this is very helpful. Feel free to share additional comments here or in Figma. (VLWDmeuIXQ7XAK4flyqTFO-fi)

[csmcneill]

@elizaan36 This looks absolutely wonderful. I think this does a great job of being more partner-aware, preventing folks from signing up with they are in an unsupportable country, while also providing them with means of changing their details to facilitate onboarding. This is rad AF <3

I agree with your sentiment about the two versions. The payment partner list option seems to be much easier to implement as we can leverage existing design/code, and we can use that as a stepping stone to get to the searchable option (if/when we decide to go that route).

[elazzabi]

@elizaan36 @csmcneill I started working on this, and it was straightforward to get the first part of the design:

However, other payment methods recommendation was never something we've done in WooPayments, it was WooCommerce (core). From a WooPayments perspective, we don't know what's available in a specific country. And it's a bad idea to move this to WooPayments, given we'll need to maintain yet another list of countries/payment methods combos.

That being said, I like the end goal here, but it requires WooPayments and Core to live in the same code base. So, what do you think about an intermediary state where we can deliver value with what we currently have (and can do)? Maybe we can link to the same page we link in the "Get Paid" task? (part of onboarding in WooCommerce)

The Get Paid page looks like this:

cc @anu-rock @vladolaru

[vladolaru]

@elazzabi Not an answer to your questions, but I think this issue is still being explored by Design & Product. I don't think it is ready for Engineering.

[vladolaru]

However, other payment methods recommendation was never something we've done in WooPayments, it was WooCommerce (core). From a WooPayments perspective, we don't know what's available in a specific country. And it's a bad idea to move this to WooPayments, given we'll need to maintain yet another list of countries/payment methods combos.

@elazzabi could we get this information from WC core, the same way the WC core does for its internal needs? This would avoid duplication and impose a single source of truth.

[elizaan36]

Maybe we can link to the same page we link in the "Get Paid" task? (part of onboarding in WooCommerce)

I wouldn't recommend linking to the Get paid task. We've explored an option simply linking to the Marketplace, which would provide easier access, search, and discovery of the payment methods merchants need. One possibility is to place the marketplace link in the action button.

Question - If presenting the payment options in the list by pulling info from WC core isn't possible, would it be more feasible to implement the Marketplace search option in WooPayments? I think this was the preferred option but not sure if it's out of scope.

[elazzabi]

@elizaan36 I managed to get the recommendations directly from Core (thanks @vladolaru for the hint) 🎉 . So we can implement any UI we believe is best for merchants 🙌

[anu-rock]

Update:

Designs for the unsupported country flow were finalized in paJDYF-dgT-p2.

[anu-rock]

We are pausing this effort - pe4Hk0-1aY-p2#comment-1436.

[anu-rock]

We'll revisit this as part of the wider native onboarding overhaul.