Implement duplicated payment methods detection mechanism

[timur27]

Description

Recently, we explored technical approaches to identify duplicate payment methods enabled by plugins on a store. Two solutions were proposed, the simplest one and a more sophisticated one. The simplest solution is based on preparing the hardcoded list of known payment method names used across different plugins and check if the payment method name matches the list multiple times. The more sophisticated approach bases on defining the new contract for plugins to follow by extending the main gateway class.

Finally, it was concluded that the feature should be developed in two steps

1. The simplest solution will be built in WooPayments.
2. Once the feature impact is proven, the sophisticated approach should be implemented in WooCommerce.

This issue is to implement 1️⃣ from the list above and implement it in WooPayments.

Additional context

• paJDYF-ck0-p2 represents the P2 post, containing both solutions
• The spike PR containing drafts for both solutions is Spikes: Payment method duplicates detecting  woocommerce/woocommerce#44617
• Main discussion threads are in paJDYF-ck0-p2#comment-23314 and paJDYF-ck0-p2#comment-23652

Acceptance criteria

1. Duplicate detection mechanism is developed further in Spikes: Payment method duplicates detecting  woocommerce/woocommerce#44617, or a separate PR is created, which takes the most relevant pieces from the spike implementation.
2. Duplicates finding implementation from WC_Gateway_Duplicates_Finder_Static_List is modified further and reaches production readiness.
3. A notification is implemented that notifies about duplicates found.
   • This step includes confirming the right way to show notification with Product and Design.

If step 3 turns out to significantly impact this feature's complexity, it can be split into a separate issue and worked on after this issue is implemented.

[timur27]

Please add your planning poker estimate with Zenhub @FangedParakeet

[timur27]

Hi @pierorocca @elizaan36 👋 As we continue with the technical implementation, I wanted to present some initial options for UI notifications that seem feasible, with the aim of getting your feedback and any suggestions you might have. Some of the proposals might appear to be in a rough draft form, but I hope they effectively convey the intended ideas. Please feel free to share your insights and recommendations, I'm eager to align with you all and adjust accordingly.

1️⃣ Checkbox changes and tooltip (b208412)

We can modify the checkbox's color, as I did for Klarna, though it's barely noticeable until the recording is viewed in fullscreen. Additionally, we can introduce a tooltip for further clarity.

Screen.Recording.2024-03-29.at.13.38.37.mov

2️⃣ New settings section with icons of duplicated payment methods (f3de0a6)

I think it should be also possible to make icons within this section clickable. For instance, once clicked, payment method in WooPayments is disabled. I don't think this type of feature behind the click is what we'd want, but just an example.

duplicate-section-with-icons.mov

3️⃣ Payment method icons (76da189)

We could frame icons for duplicated payment methods with e.g. red border. I attempted to design something using Figma, but wasn't successful. Furthermore, we could, of course, add a hover text to the icon.

icon-hover-text.mov

4️⃣ Admin notice (6157b45)

I also keep in mind the suggestion from Elizabeth (paJDYF-ck0-p2#comment-23886) about WooPayments screen before onboarding and agree with the concerns. However, the detection will work only when two or more payment methods of the same type are already enabled. We can definitely think about some notes for merchants to increase awareness. This can be easily done independently from duplicates detection implementation efforts.

I will be AFK next Monday, but will do my best to iterate starting Tuesday on all the feedback which I will receive. Thank you for your time and help!

@pierorocca In the coming week, I plan to ask a few additional questions concerning the feature. For example, whether to offer merchants the ability to designate certain types of payment methods as exempt from duplicate detection, or if it would be beneficial to allow merchants disable the detection feature under certain circumstances.

[pierorocca]

Hey @timur27. Love your initiative to explore options. Well done.

1. Checkbox changes - Agree it's barely noticeable and it's not a pattern one would see elsewhere so I'd strongly advise against that approach. Let's keep a checkbox as a checkbox.

2. The red border option is similar to 1. in that it's not a known pattern. It's also not a11y compliant and would easily violate brand guidelines. That option is not feasible.

3. New Duplicated Section - This is a cool idea. It's very clear what that is saying. I'd include a Learn more link to documentation at the end of the section copy.

4. Another pattern we have for WooPay and Apple Pay/Google Pay incompatibilities is to place a yellow inline notification below the payment method. The notification offers clear affordance of important information and the pattern is known and used throughout the admin. i.e. it's used in accordance with the notification system. Downside is that every duplicated payment method would have the inline notice. In only one extreme case I've seen 3 duplicates, however, the majority of duplicated cases will have only one overlap with some sites having two overlapping methods.

My question is would 3. be overkill 1) if the majority of sites have only one duplicate? 2) the settings and payment refreshes reduce the occurence of future duplicates?

Credit/Debit and Google Pay/Apple Pay unlike BNPL do not appear in the guided wizard and they're in the top 3 of duplicated methods. Another reason of many the guided wizard placement is not a feasible option.

4. Makes the most sense to me because that's our design system and current pattern for info warning on settings. 3. I can also support if @elizaan36 feels that's a good value add. 1 & 2 are to be avoided.

[elizaan36]

hey @timur27 this is great! I agree with @piero's notes above.

New Duplicated Section

This would make sense if the duplicated extensions could appear and be accessible from here.

Another pattern we have for WooPay and Apple Pay/Google Pay incompatibilities is to place a yellow inline notification below the payment method.

I'd recommend this pattern as well. It provides a clear enough indication in context of the duplicated PM. Here's a quick sketch to illustrate the idea.

Ideally with the error message we'd provide a clear summary of the problem and next steps on how to solve it. Would this require a link to wp plugins to deactivate the duplicate extension?

[timur27]

@pierorocca @elizaan36 Thanks for the feedback, I agree with everything mentioned by you all earlier.

New Duplicated Section

This would make sense if the duplicated extensions could appear and be accessible from here.

@elizaan36 This should be possible.

Screen.Recording.2024-04-03.at.16.43.40.mov

We can choose another form to display the list. We can also open links to plugins in a new browser window. Alternatively, we could consider making the icon clickable and navigate to the plugin settings, but then the question is which plugin should be linked if multiple gateways are enabling the payment method.

Since duplicated extensions can appear/be available from the WooPayments settings screen, are we considering accepting this approach?

If yes, below are a few more questions

• You may have observed during the demo that the list includes 'WooPayments.' Should we retain it in the list, or would it be preferable to avoid repetition? This consideration arises because the notification occurs on the same screen where merchants can already view the payment methods enabled by WooPayments.
• Would stretching icons across the full width align better with our design principles? This question is basically to cover scenarios when only one duplicate icon is present and the ways to display it the best way possible.
• Should the yellow inline notification still be implemented together with the new section?

Inline notification

1️⃣ Just FYI in some cases e.g. Apple Pay/Google Pay might be represented as following

2️⃣

Ideally with the error message we'd provide a clear summary of the problem and next steps on how to solve it. Would this require a link to wp plugins to deactivate the duplicate extension?

We have two potential options: we can either provide a link to the WooCommerce Settings page where all the gateways are located, or we can explore a method to list all the plugins that enable the payment method, thus allowing merchants to open them directly from the notice (similar to the demo above)

3️⃣
I've noticed the 'close' button to dismiss the notification, which makes perfect sense! Following this, a few questions arise:

1. After a merchant closes the notice and refreshes the page, should the notice reappear?
2. If not, does it imply that after clicking the 'close' button, we intend to mark this particular payment method to be skipped by the duplicate detection mechanism? If yes, should this change be permanent?

@pierorocca A bit related to the previous questions: do we want to allow merchants to disable/enable this feature from the Settings screen by introducing a checkbox? Alternatively, we could implement a server-side feature flag to control the feature for specific stores if we see such a need.

[pierorocca]

Very thorough and thought provoking exploration @timur27. The stacked notification you point out could make a case for the Duplicated Payment Methods section approach. I'm also realizing that, that approach is the most likely to be portable to Core. Would that be a fair assessment?

[pierorocca]

@pierorocca A bit related to the previous questions: do we want to allow merchants to disable/enable this feature from the Settings screen by introducing a checkbox?

@timur27

1. I'd stay clear of this as it might give the impression WooPayments is trying/making it easy to disable a competing payment provider.
2. The merchant should first review the detected state to confirm we detected it correctly and/or that it wasn't by design. For example in my duplicates audit, there were several examples of merchants that used Afterpay on product and cart pages but used WooPayments Afterpay on Checkout. My hypothesis is it was intentional to access the payment method messaging which WooPayments hasn't historically supported.
3. Final rationale for not introducing new checkboxes to disable payment methods is that we don't know what UI/UX another gateway presents to its users when disabling occurs. e.g. a warning, a survey, an offer. We can't short circuit that. The gateway must own that workflow.

As we refresh and streamline gateway settings and move away from individual payment methods as gateways (e.g. condensing the Stripe payment methods into a single settings page), I'd encourage us to keep the UI simple, consistent and optimized so that merchants have a single optimized, and well known place to do their tasks.

[elizaan36]

After a merchant closes the notice and refreshes the page, should the notice reappear?

No, I think the notice is sufficient to inform the merchant that there's a duplicate payment method in this case.

If not, does it imply that after clicking the 'close' button, we intend to mark this particular payment method to be skipped by the duplicate detection mechanism? If yes, should this change be permanent?

Yes. If they choose to dismiss the notice, it's their responsibility to take action from there.

We have two potential options: we can either provide a link to the WooCommerce Settings page where all the gateways are located, or we can explore a method to list all the plugins that enable the payment method, thus allowing merchants to open them directly from the notice (similar to the demo above)

Yep, I think the link out to Payments Settings is the best path to review the duplicate methods currently. In the case of a Stripe-enabled method, the link should direct the user to the subpage where payment methods are listed.

Despite the potential stacked notification edge case, I think the inline notice is the best way forward for this interim solution. I like the Duplicate payment methods section idea but I'd like to take some time to explore a core-first solution, and as I've mentioned prevention will be the best long-term solution. How can we educate and inform merchants of the potential for duplicate methods during payments setup?

[timur27]

Thanks so much for the alignment @pierorocca @elizaan36 - this was really helpful.

I'm also realizing that, that approach is the most likely to be portable to Core. Would that be a fair assessment?

@pierorocca Yes. Once we build the solution in Core, we can definitely use the duplicate detection result to create the stacked notification with a linked plugin list in WooPayments settings, or in WooCommerce settings. Or both.

@pierorocca I also agree with not cluttering settings with numerous checkboxes, particularly if they entail WooPayments assuming responsibility for areas outside its intended scope.

@elizaan36 Understood the requirements regarding the notice and that we won't consider the new section, at least as part of this issue.

How can we educate and inform merchants of the potential for duplicate methods during payments setup?

WooCommerce is designed in a way that it cannot determine which payment methods can be enabled by a gateway until after the gateway has been enabled. Therefore, our educational content wouldn't rely on specific data, but rather, it would offer high-level warnings about potential conflicts with duplicate methods enabled. We certainly have flexibility in implementing where and how to place this content (WooCommerce settings or/and WooPayments overview/settings screen). One immediate thing that might be worth considering: I've just completed the WooPayments onboarding process, and I believe placing the notification on the WooPayments overview screen immediately after onboarding might deter merchants from enabling payment methods through WooPayments. Just sharing my feelings as if I would be a user. To sum, if we'll have any particular needs for this type of notifications, please let me know, and we can think whether to extend the scope of this issue by adding it, or implement these notices in a separate ticket.

---

As of now, I believe I have all open questions answered. I'll be sure to reach out if anything else comes up in the next days. Thanks again!

[elizaan36]

our educational content wouldn't rely on specific data, but rather, it would offer high-level warnings about potential conflicts with duplicate methods enabled.

Got it. I'll have a think about this. Good point about not wanting to deter merchants from enabling methods within WooPayments.

if we'll have any particular needs for this type of notifications, please let me know, and we can think whether to extend the scope of this issue by adding it, or implement these notices in a separate ticket.

Might be best to use a separate ticket to explore ideas around additional education.

[timur27]

@elizaan36 I'd like to double-check one thing with you

Yep, I think the link out to Payments Settings is the best path to review the duplicate methods currently. In the case of a Stripe-enabled method, the link should direct the user to the subpage where payment methods are listed.

How we'd want to proceed in the scenario when multiple plugins are enabling duplicates?

1. If only one gateway (excl. WooPayments) enables duplicates, we include the link to the settings page of this gateway in the inline notice.
2. If multiple gateways (excl. WooPayments) enable duplicates, we
   • either add the link to WooCommerce Settings to the inline notice
   • or add the list of links to every gateway settings to the inline notice (similar to the stacked notification when I presented the new section)

I'd appreciate your help in choosing one of the above bullet points for 2)
Thank you!

[timur27]

@pierorocca I have an edge case question: if a payment method is enabled in multiple plugins but WooPayments isn't one of them, do we want to show the notice?

It doesn't seem necessary to me, especially in the current phase of notifications within WooPayments Settings, but I'd like to confirm. Thank you!

[pierorocca]

To @elizaan36's point prevention is desirable and this could prevent a merchant from enabling Klarna. It's a nice heads up that they've already got Klarna enabled.

Elizabeth what are your thoughts? If you like the idea of keeping this, would you tweak the message a bit?

[elizaan36]

hi @timur27

If multiple gateways (excl. WooPayments) enable duplicates, we
either add the link to WooCommerce Settings to the inline notice

I didn't realize that there could be three duplicates in some cases, great point. In that case we should add the link to WooCommerce settings > Payments in all use cases.

[elizaan36]

I have an edge case question: if a payment method is enabled in multiple plugins but WooPayments isn't one of them, do we want to show the notice?
To @elizaan36's point prevention is desirable and this could prevent a merchant from enabling Klarna. It's a nice heads up that they've already got Klarna enabled.
Elizabeth what are your thoughts? If you like the idea of keeping this, would you tweak the message a bit?

In your research did you find that this is common? What are examples of the payment processors that would need to be enabled to encounter this scenario?

[pierorocca]

It can happen. We have merchants that use WooPayments just for Apple Pay and Google Pay and Paypal or some other gateway for subscriptions. Thinking through this, this could result in a lot of "preventative" inline notices being displayed. That would be super annoying so my recommendation here @timur27 @elizaan36 is to focus on the best possible notification when the duplication actually materializes and to consider this as part of the core level implementation exploration.

[elizaan36]

focus on the best possible notification when the duplication actually materializes

+1. It makes sense to focus on when we're seeing the duplication within WooPayments for now.

[timur27]

Thanks @pierorocca @elizaan36 I will make sure the inline notice is not shown if a payment method is not enabled in WooPayments. I will also keep the current message text.

[timur27]

@pierorocca @elizaan36 I configured WooPayments, Mollie, Klarna Payments, and Stripe by WooCommerce on this JN site, and it can be tested if you want to see how the feature looks. A couple of things about the feature, as per our previous discussions:

• if a payment method is disabled in WooPayments, duplicate notice isn't shown even if the same payment method is enabled in other two or more plugins
• notice can be dismissed, and once dismissed, it will not appear anymore
• detection mechanism covers credit cards, APMs (incl. BNPLs) and Google Pay/Apple Pay