Insites Docs Web Components V2Data EntryCredit Card

Credit Card

Last updated on March 25, 2025.

Element: <ins-credit-card>

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

Complete Example

Code Snippet

<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>
Default State

Code Snippet

<ins-credit-card></ins-credit-card>
Static Data Source

Code Snippet

<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

Code Snippet

<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

Code Snippet

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

Code Snippet

<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>

 

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
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

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.