[EP-2614] Show credit card type icon

[canac]

Description

Show the credit card type icon next to the credit card number input after the user starts typing it in.

I made the icon small because it can make the input too narrow to show the entire number in normal checkout. I didn't want to make the "Name on Card" input any narrower because it is already a little small. Let me know if you have any feedback on layout, sizing, or placement.

EP-2614

Testing

• Regular checkout
  • Go to https://give-stage2.cru.org/payment-methods.html
  • Switch to the Credit Card tab
  • Type "4111 1111 1111 1111" in the card number field
  • Check that the Visa icon appears next to the credit card number input

• Branded checkout
  • Go to https://give-stage2.cru.org/branded-checkout.html
  • Switch to the Credit Card tab
  • Type "4111 1111 1111 1111" in the card number field
  • Check that the Visa icon appears next to the credit card number input

Checklist:

• I have given my PR a title with the format "EP-(JIRA#) (summary sentence max 80 chars)"
• I have applied the appropriate labels (Add the label "On Staging" to get the branch automatically merged into staging)
• I have requested a review from another person on the project
• I have checked that stage-branch-merger successfully merged my branch to staging or manually merged it myself
• I have tested my changes in staging for regular checkout
• I have tested my changes in staging for branded checkout

[stage-branch-merger]

I see you added the "On Staging" label, I'll get this merged to the staging branch!

[dr-bizz]

With testing this, I realised we don't accept Diners Club or UnionPay. Which might not be a big issue.

https://docs.stripe.com/testing

[wrandall22]

We at least used to accept Diners Club. I forget if we stopped at some point for some reason.

[dr-bizz]

Thank you for adding this. We will not be able to deploy this until the new year, due to the code freeze. I will approve when freeze is over.

What are your thoughts on having the card icon in the input?

[canac]

Diner's Club should work. There's a spec for it. UnionPay is not supported by the type detector in cru-payments.

What are your thoughts on having the card icon in the input?

I like that idea! I'll probably circle back to that after our MPDX work. It shouldn't be too hard to implement.

[dr-bizz]

QA done. I will create a new PR for the secure change as that is not part of this PR