Skip to content

Component library

Credit Card

Last updated 2 November 2026

Defines a credit card UI that display the brand, last 4 digits, its expiration and if its expired.

Live demo

<ins-credit-card
  label="Credit Card"
  tag="Default"
  active
  expired
  brand="visa"
  last-four="3456"
  expiry-month="9"
  expiry-year="2022"
  full-year
  value="card_128kjh21387kasd2h"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-credit-card>

Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label any - any Defines the label of the component
active boolean false true / false Defines the active state of the element
compact boolean false true / false Small version of the credit card element
expired boolean false true / false Defines if the credit card is expired
expired-label string "Expired" any Defines the label of the expired credit card
brand string - * amex * americanexpress * american express * american-express * dinersclub * diners club * diners-club * discover * jcb * master * mastercard * master card * master-card * unionpay * union pay * union-pay * visa Defines the brand of the card
last-four string Invalid Should be a 4 digit number Defines the last four digit of the card
Note: If the last four digits of the credit card are 0000, then this will be flagged as Invalid.

Reference:
What is the Luhn algorithm and how does it work?
expiry-month string Invalid Should be a 2 digit representation of the month Defines the expiry month of the card
expiry-year string Invalid Should be a 2 digit representation of the year or the full year when full-year attribute is present. Up to 9999 only for full year. Defines the expiry year of the card
full-year boolean false true / false Enables full year value on expiry-year attribute
options string "" any value separated by comma Replaces the remove button to dropdown options
options-icon string "" Insites Font Icons Defines icon of dropdown options
options-color string "" blue / green / positive / warning Defines color of dropdown options
tag string "" any Defines a tag of component
tag-color string "" grey, blue, red, green, yellow, orange, etc. Specify the CSS class used to assign tag color
tag-icon string "" any Defines a icon of the tag
tag-font-color string / CSS hex code "" any Directly set inline CSS 'font-color', this will overwrite the `color & light` property.
tag-background-color string / CSS hex code "" any Directly set inline CSS 'background-color', this will overwrite the `color & light` property.
tag-light string "" any Specify which tag color style to use (light / solid)
tag-outlined boolean false true, false Enables tag outline styling
tag-outline-color string "" grey, blue, red, green, yellow, orange, etc. Specify the CSS class used to assign tag outline color
value any - any Defines the vaue of the element
tooltip string "" - Displays a tooltip beside the label. Supports HTML Content

Events

EVENT DESCRIPTION
insClick Triggers an event when the card is clicked
insClose Triggers an event when the close button is clicked

Examples

Default State

<ins-credit-card></ins-credit-card>

Static Data Source

<ins-credit-card
  label="Credit Card"
  tag="N/A"
  tag-color="red"
  tag-outlined
  expired
  brand="visa"
  last-four="3456"
  expiry-month="6"
  expiry-year="19"
  value="card_128kjh21387kasd2h">
</ins-credit-card>

Options Example

<ins-credit-card
  label="Credit Card"
  last-four="1234"
  expiry-month="12"
  expiry-year="2024"
  brand="amex"
  options="Delete,Archive,Restore"
  options-icon="icon-more-vertical"
  tag="Active Credit Card"
  tag-color="green"
  tag-outlined
  compact>
</ins-credit-card>

<ins-credit-card
  label="Credit Card"
  last-four="1234"
  expiry-month="11"
  expiry-year="2023"
  brand="master-card"
  options="Delete,Archive,Restore"
  options-icon="icon-more-horizontal"
  tag="Active Credit Card"
  tag-color="blue"
  full-year>
</ins-credit-card>

Error State

<ins-credit-card
  brand=""
  last-four="test"
  expiry-month="13"
  expiry-year="12345"
  full-year
  value="card_128kjh21387kasd2h">
</ins-credit-card>

Compact Example

<ins-credit-card
  id="compactEl"
  tag="Selected"
  tag-color="green"
  active
  brand="visa"
  last-four="7890"
  expiry-month="4"
  expiry-year="2099"
  full-year
  value="card_128kjh21387kasd2h"
  compact>
</ins-credit-card>

<ins-credit-card
  expired
  brand="discover"
  last-four="5555"
  expiry-month="1"
  expiry-year="2000"
  expired-label="N/A"
  tag="Expired"
  tag-color="red"
  tag-outlined
  full-year
  value="card_128kjh21387kasdzz"
  compact>
</ins-credit-card>

<script type="text/javascript">
  setTimeout(() => {
    var compactEl = document.getElementById('compactEl');

    compactEl.addEventListener('insClick', el => {
      compactEl.active = !compactEl.active;
    });
  }, 500);
</script>