How to show only last 4 digits of credit/debit card in Bubble app development

One of the most common setups while building apps/websites is to have payment methods set. But, how does one do this, if the end goals require one to look like the image below:

Here’s How to do it with Mangopay through Bubble API connector

MangoPay provides an endpoint to which you could connect - Card Object endpoint. This Alias parameter will return a partially obfuscated version of the credit card number as a string.

On the design side, you just look it up and display it as in the image itself and can use it in the workflow as something like the result of the step and get the alias :truncate from end to and write it to the current user.

Here’s an example of the UI side: https://atomicfusion.io/asset/text-credit-card-last-4-94100?view=explore

You can also do it with Stripe via the API connector

Stripe does it in a similar way. You could use the API connector to make an API call to Stripe’s Retrieve a Card endpoint. It returns a JSON object containing a field with just the card’s last 4 digits, so you can use them in your UI as required.

It’s way easier to use a plugin that does this for you since it requires you to pass the customerID and the cardID while making this API call.

Here's the link to the thread - https://forum.bubble.io/t/how-to-show-only-last-4-digits-of-credit-debit-card/225139/3

Hope this helped. 🔓