[Shipping Labels] Show card images with on selected payment method

[joshheald]

In #6241 we added card brand images to the refund confirmation screen, to help merchants and customers better identify the card used for payment.

We also show card details in the shipping label purchase flow: it would be good to reuse some of this work to show the card images there too. Anything which helps merchants be sure they're using the right card for payment could save people from accounting headaches!

Note the accessibility and localization on the Refund Confirmation screen too: Card network names are deliberately not localized either on-screen, or in accessibility labels. The last 4 digits are read out individually rather than as a number, e.g. "four two four two" not "four thousand two hundred and forty two"

Shipping label summary	Payment card detail

Example from Refund Confirmation

[pmusolino]

cc @woocommerce/mobile-designers

[joe-keenan]

Hey @joshheald, this is a great idea. Looks like I just need to check if it’s ok to move the checkmark icon to the right side. I’ll get some designs back to you soon.
Do you know if we can get/show the expiry date, too?

[joshheald]

Hi Joe, Yes, we can get the expiry date both for shipping label payment methods, and if we want to put that on the refund confirmation screen too 😊

…

On Thu, Mar 17, 2022 at 5:27 AM joe-keenan ***@***.***> wrote: Hey @joshheald <https://github.com/joshheald>, this is a great idea. Looks like I just need to check if it’s ok to move the checkmark icon to the right side. I’ll get some designs back to you soon. Do you know if we can get/show the expiry date, too? — Reply to this email directly, view it on GitHub <#6261 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAS3THDVAAPP6U2OTDUVFODVAK7CNANCNFSM5O673QWQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[joe-keenan]

Excellent. I’ve done some designs for you here.
I tried adding the expiry date to the refund screen, but it felt unbalanced because of the type heading (WooCommerce Payments / Credit Card), so I’ve left it as-is for now. I’ve also kept the sizing/spacing on the refund screen the same, even though I’ve changed it on these new designs (which I had to do so that the text lined up across multiple rows).

This made me think, though: What is the difference between this selection screen and the refund one? Does the refund screen ever offer multiple choices? If so, how do we display the “WooCommerce Payments” type heading on each row?
My gut is telling me we should use this card component on the refund screen, and group cards under a “WooCommerce Payments” subheading if there is more than one card attached to that payment method. What do you think?

[joshheald]

Excellent. I’ve done some designs for you here.

Thanks! I'm not sure who will be implementing this but these look good.

This made me think, though: What is the difference between this selection screen and the refund one? Does the refund screen ever offer multiple choices?

You've picked it out – the difference is that here there's a choice of cards on the shipping screen, because you're paying for something and need to decide how.

On the refund confirmation screen, there's no choice, the screen shows you which card the refund will (or should) go to. The card number, image, and expiration, are to help the customer identify that so that they know where to expect the funds.

For Interac In-Person Payment refunds, they have to be done to the same card as was used to pay, so the numbers help the customer choose the right card to put in the reader.

If so, how do we display the “WooCommerce Payments” type heading on each row? My gut is telling me we should use this card component on the refund screen, and group cards under a “WooCommerce Payments” subheading if there is more than one card attached to that payment method. What do you think?

I don't think we need to do this now, but if we were to offer a choice or use this component in another context in future, I agree with this. The "WooCommerce Payments" would get repetitive otherwise.