Admin Center Preview - Error messages when adding a billing method

[Mourad Louha]

Hi there,

I noticed error messages thrown by the Admin Center Preview, when I try to add a billing method. For that, I selected in my German Admin Center Abrechnung / Zahlungsmethoden and added a new entry.

It does not matter, which kind of billing method I select. As soon as I enter wrong data to a field, I get an error message. They look like the folling screenshots.

Note: the forms look similar to the forms I mentionned here and where I did some suggestions and posted some issues for them.

Best,

Mourad

[#2]

Hi @Mourad Louha 

We will get it looked by the right team and get back to you on it. 

Staff

[#3]

@Mourad Louha 

Thanks for providing this valuable feedback - I  am struggling to repo this issue  on my account and I know the commerce team have checked in a number of  changes  since this was flagged - when you have a chance this week would it be possible to check on the latest new build deployed in preview Env and let me know if you still have same issues and share images and steps of the problem as I will share  with the team then. 

much appreciated ! 

Gemma

[#4]

Hi @Gemma Devine,

thanks :) Unfortunately, I still can reproduce errors when adding billing methods. However, contrarly to my last test at the time of my original post above, it seems now for me, that not all fields always produce the error. But some still do.

For the following test, I used Firefox in its latest version and cleaned/deleted all cookies, cache, etc. in that browser. I did the test it in my German Admin Center. These are the steps, I have done.

Step 1

I logged in to the Admin Center and went to the section for adding billing methods, in German Abrechnung / Zahlungsmethoden. Looks like this ...

Step 2

After then, I added a new billing method through Zahlungsmethode hinzufügen. I am asked to choose between a credit/debit card or a bank account. I selected a credit card. Then, I reach this ...

Step 3

At the dialog start, all fields are empty. Now, I just entered XXX in the field for the credit card number. And I jumped to another field by selecting it with the mouse or pressing tab. Then, I get an error message in a red bar.

This error message, translated back to English by me, states: An error occured on our side. Please try again later (CV: 0tSR5tYTT0+Vw76T.0.12).

Step 4

I tried to add a real credit card by cancelling all and restarting from the home page of my admin center and reselecting the billing methods section. Adding a credit card without doing any mistake when entering the data worked fine. So, I think, the problem for the billing methods is the display or the error message when entering invalid data.

Step 5

Once I added a credit card, I can find it on the list of billing methods and click on the entry for getting more details. It looks like the following screenshot.

There is a button Zahlungsdetails bearbeiten for editing my data. This button leads to the same dialog, as when I add a new credit card. And, if I change something there to invalid data - e.g. my postal code which should be a number, but I enter letters - then I get the same red error message bar.

Hope that helps :)

Best,

Mourad

[#5]

thanks so Much Mourad- very helpful indeed. I will redirect this to the commerce team this evening to review further and we will get back to you again

thx again
Gemma

[#6]

@Mourad Louha -   The Commerce team got back on this issue - they have recently launched a new payment method experience. Instead of the add payment method flow showing up in a new page as you had -  the flow  has now changed and shows up in a side pane on the same page as the list of payment methods

Would it be possible for you to try again with the new experience and let me know if you still experience an error notification for filling out invalid inputs in the form? If it is still the case with the new experience - then they will further look into it but they believe the new form should have an improved experience for handling input errors now. Thanks in advance! Gemma

thanks again 

Gemma

[#7]

Hi @Gemma Devine,

thanks, that's good news. I did a test in Chrome and Firefox (private mode). My Admin Center (still) shows the preview mode active. It looks now like the following screenshot for a credit or debit card:

So, I did not get the error notification from my original post, when entering invalid data to the form. That's fine :)

However, what I noticed while testing is that, if I click outside the side pane, e.g. accidentally, it closes directly and I have to start again. And I noticed, that the name field correctly disallows evident invalid characters, such as for example currency signs for Dollars ($), Pounds (£), Yens (¥), brackets (<, >) and so on (?, /, ...). But not Euros (€).

If I try to add the credit card when having invalid data in the form, then I get an error message on the top and that's good too.

If, having this error message displayed, I switch to a bank account, the form correctly shows me then the emtpy bank account fields, but the error message is still visible. Meaning the input fields are resetted each time, I switch from one account type to another, but the error message not.

Best,

Mourad

[#8]

@Mourad Louha  - many thanks again for trying out the new form  - much appreciated, glad new UI has improved experience. I have sent on the feedback to the team on your error case to take a look further. The new form will become the default experience this month now so they will be monitoring the feature closely for error cases like what you reported and customer feedback as well. 

thanks again for detailed feedback and testing out the new admin experience for German users  ! 

cheers

Gemma

[#9]

Dear @Mourad Louha, latest info on this issue from Gemma:

"multiple fixes and changes have been checked in on this …. issues should now be fixed"

We seem to have difficulties to repro the various issues on our side so we can't give a 100% guarantee that everything's fixed. It'd be great if you could check this yourself as well, if you've got a spare minute.

Many thanks as always! Janna

[#10]

Dear @Janna Braeuning,

thank you very much for the info, thanks to Gemma and the team for the fixings :)

I will do some tests in the next days too, and, if I find something, post it here.

Best,

Mourad

[#11]

@Mourad Louha - thank you - keep in mind that some of your edge cases may still be repro/by design but the team have worked through the feedback.

Please do keep me posted - hopefully the experience has improved over the last few weeks

cheers

Gemma 

[#12]

Hi @Gemma Devine,

yes, my experience is better for me than before. Thanks! But I have some questions: in my second last post, I mentionned the outside click behaviour and the error message with the red background. I can still see these issues. Is that something that has been improved and I cannot see yet? Or is it something by design?

Best,

Mourad

[#13]

@Mourad Louha - sorry for the delayed response on this. The Billing teams have fixed up a lot of issues and so error messages should no longer be appearing.

I know it has been a while but since you last raised issues do you think experience and UI issues flagged at time have since improved ? If you see anything you feel they should address please let me know and will go back to the team. 

Thanks again 

Gemma

[#14]

Hi @Gemma Devine,

it has been a while, since I last used/tried the dialogue. If I login to my Admin Center and navigate to the billing methods (in German Zahlungsmethoden) I am getting a message, that this page will be moved to another page Rechnungen und Zahlungen.

I don't know the exact original English name of that menu entry Rechnungen und Zahlungen, should be something like Invoices and Billings. Looks like the following screenshot.

I can already find a section there - Zahlungsmethoden - clicking there brings me to a page, where I can add a new billing method and I reach the billing methods dialog. This looks like the following screenshot.

It seems for me, that some changes have been done. However, what's still present for me, is that clicking outside of the dialog closes it - contrarly to other dialog panes in the Admin Center.

The € character is (as before) not considered as invalid character in the name field. The translation into German of the error message Falsch formatierter Name des Karteninhabers for an invalid name is not optimal. But, if I remember well, I posted that issue in another post here during a competition and I don't know its status.

Best,

Mourad

[#15]

Hi @Mourad, the latest info on this issue is that it has been fixed and should no longer repro. Thanks and greetings, Janna

[#16]

Hi @Janna Braeuning,

thanks a million :)

Best,

Mourad