Credit Card

Last updated on August 02, 2024.

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
  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
  expired
  brand="visa"
  last-four="3456"
  expiry-month="6"
  expiry-year="19"
  value="card_128kjh21387kasd2h">
</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"
  active
  brand="visa"
  last-four="7890"
  expiry-month="4"
  expiry-year="2024"
  full-year
  value="card_128kjh21387kasd2h"
  compact>
</ins-credit-card>

<ins-credit-card
  expired
  brand="discover"
  last-four="5555"
  expiry-month="1"
  expiry-year="2000"
  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
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
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
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.