Element: <ins-credit-card>
Defines a credit card UI that display the brand, last 4 digits, its expiration and if its expired.
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>
Code Snippet
<ins-credit-card></ins-credit-card>
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>
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>
Code Snippet
<ins-credit-card brand="" last-four="test" expiry-month="13" expiry-year="12345" full-year value="card_128kjh21387kasd2h"> </ins-credit-card>
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>
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 |
EVENT | DESCRIPTION |
---|---|
insClick | Triggers an event when the card is clicked |
insClose | Triggers an event when the close button is clicked |
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.