Add credit card image when displaying cards on file

Need help Plugins
1

Hi I am using stripe to process payments on my bubble app. I am trying to have a popup that displays users card info from stripe. I am trying to put an image in that has ‘visa’ or ‘mastercard’ logo that displays based on conditional ‘If Stripe’s Credit Card Brand is ‘visa’’ show this image. BC stripe does not return card image values(that I know of) and I am trying to upload my own with the conditionals. Does anyone know a good source to find the brand images for credit card networks? Or is there a way to do it natively in bubble?

2

I kind of like the simplistic look if you did a thick bordered, rounded corner group to represent the card with one of these logos in a corner somewhere
https://www.iconshock.com/credit-card-icons/

2 Likes
3

Hi there, @anon31591471… is your question only about getting the logos or is it about the conditionals, too? For the logos, the minimalist in me likes Tyler’s suggestion a lot. About the conditions, they should be easy to construct given that all credit cards of a certain brand start with the same number (American Express = 3, Visa = 4, Mastercard = 5, Discover = 6). So, you could just truncate the credit card number to a single digit and display the appropriate logo based on that digit… but maybe you already knew that and I have misunderstood the question… hope not.

Best…
Mike

2 Likes
4

Thank you @mikeloc and @tylerboodman! I will use the Iconshock images. I would use the credit card brand numbers @mikeloc but since I am using Stripe (because I dont want to have to bother with being PCI compliant) I can only access the last four digits of the card.

1 Like
5

Does Stripe return the brand of card being used? How many are you looking to consider? Just a few or a lot? If a lot you could create a lookup table so your card image can search for the one that matches the Stripe value

1 Like
6

Stripe does return the brand, it returns the 4 big ones (visa, mastercard, etc.) and a few international ones. I am just going to do conditionals for the 4 big domestic ones.

7

Yep then do another conditional if it’s none of the big ones then do some generic icon :+1:

1 Like
8

Stripe even recommends IconShock in their support article about this Where to find logos for accepted credit card types : Stripe: Help & Support

1 Like
9

That may or may not be where I found it :flushed:

1 Like