Having to add the same credit card multiple times to the same app

Question

Seeking suggestions on any elegant or useful ways to handle technical limitation resulting in sub-optimal usability.

I have a retail app that sells products across 3 different channels:

1. In physical store
2. Online
3. Via a monthly recurring subscription

The punchline is: due to the retailer using different checkout vendors/services on the backend, a user who wants to buy things must add and save a credit card to the app (including the exact same credit card) for each service used. You read that correctly.

So the app experience would go something like this:

(followed by having to add the same credit card in each different channel)

Seeking suggestions on:

1. Since we know this is inelegant, should we say as much to users?
2. How in the UI would any messaging manifest? A sticky info bar at the top of the payments section? A tooltip or message on the empty state of one of the payment channels along the lines of "Wondering why your saved payment method from another area isn't here?"
3. Are there any elegant ways of solving even with the technical limitation still present? (there is no solution possible that permits passing one credit card entry to other product channels).

Answer 1

After the comments, if all the payment methods must be filled indistinctly despite the "mandatory" nature of having to maintain the same content, at a visual level it is hardly understandable that the action to be carried out appears only in the parent menu and this serve for each of the three options, each of these being independent. Rather, each item should contain a specific title referring to this action. For example, we are not managing the subscriptions, but rather the method of payment for purchases by subscription; and in the singular, since according to the description it's a single method. For me the visual logic of each option should be:

Manage Suscription Payment Method
Manage In-Store Payment Method
Manage Online Store Payment Method

From there, the explanatory text could go in the same parent menu as a tooltip or descriptive tag.

Answer 2

While this isn't an ideal situation, I think you're on the right track for potential ways to at least acknowledge it to your users when it actually comes up in the checkout experience.

I would keep any "where's my saved payment method?" link/tooltip small and given a secondary action treatment, but in close proximity to the most logical field where the user might have that question. I would keep the explanation plain and concise, so that you don't introduce any more friction in the process of apologizing for the inconvenience.

Some other ideas to consider:

• A checkbox to "Save this payment method for all my [channel] purchases" (so that it's a little more clear the method is being saved just for that specific channel.
• Provide a dedicated space in the Account/Profile area to manage all saved payment methods, organized and separated by channel. That seems like an opportunity to communicate when no payment method is saved with a blank state, as well as a logical second home for your explanation about the need for multiple saved methods even when it is the same credit card.