nb-credit-card
This is a credit card component for Vue.js 3+.
Look at the console to see the triggered event
Installation
Yarn
yarn add @vlalg-nimbus/nb-payments
Usage
Vue 3
import { createApp } from 'vue'
import App from './App.vue'
import NbPaymentsComponents from '@vlalg-nimbus/nb-payments'
import "@vlalg-nimbus/nb-payments/dist/style.css";
const app = createApp(App)
app.use(NbPaymentsComponents)
app.mount('#app')
To use, simply call the component, in this case it will be NbCreditCard
or nb-credit-card
.
Mode 1
<template>
<NbCreditCard />
</template>
Preview & Playground
Select the component you want to edit/test
Loading Sandbox...
Props
Items with an (*) mean they are required
name | Value type | Default | Description |
---|---|---|---|
nbId (*) | String | Sets the id attribute to differentiate from other components | |
showForm | Boolean | false | Defines whether to use the form |
chipModel | String | 'two' | Defines the model of the card chip. Accepts the following values 'one' or 'two' |
cardNumber | String | Sets the card number. If showForm is false, this field can be used to pass the value of the card or even when it is active/inactive to pass a value coming from another location (database, other input, ...) | |
cardName | String | Sets the card holder name. If showForm is false, this field can be used to pass the value of the card or even when it is active/inactive to pass a value coming from another location (database, other input, ...) | |
cardExpMonth | String | Sets the card expiration month. If showForm is false, this field can be used to pass the value of the card or even when it is active/inactive to pass a value coming from another location (database, other input, ...). Accepts values from 01 to 12 | |
cardExpYear | String | Sets the card expiration year. If showForm is false, this field can be used to pass the value of the card or even when it is active/inactive to pass a value coming from another location (database, other input, ...). It accepts a value defined in the years property here below | |
years | Array | Defines a list of valid years that must contain the cardExpYear property, if a list is not passed, a list of years is created with the beginning of the year being 5 years before the current one with a total of 15 years. Example: Today is 2022, it will generate a list starting in 2017 and ending in 2032 | |
cardCcv | String | Sets the card ccv. If showForm is false, this field can be used to pass the value of the card or even when it is active/inactive to pass a value coming from another location (database, other input, ...) | |
flipOnHover | Boolean | false | Defines if the card will have a flip when having hover, it can be used in cases where the showForm is false allowing to visualize the ccv since the card by default has the flip when it is receiving interaction in the ccv input when the showForm is true |
formNumberText | String | 'card number' | Defines the text that appears on the form for the card number field |
formHolderText | String | 'card holder' | Defines the text that appears on the form for the card holder name field |
formExpMonthText | String | 'expiration mm' | Defines the text that appears on the form for the card expiration month field |
formExpMonthDefaultText | String | 'month' | Defines the text of the first option of the month select |
formExpYearText | String | 'expiration yy' | Defines the text that appears on the form for the card expiration year field |
formExpYearDefaultText | String | 'year' | Defines the text of the first option of the year select |
formCcvText | String | 'ccv' | Defines the text that appears on the form for the form ccv field |
cardHolderText | String | 'cardholder name' | Defines the text that appears on the card for the form ccv field |
cardExpirationText | String | 'expiration' | Defines the text that appears on the card for the form ccv field |
cardCcvText | String | 'ccv' | Defines the text that appears on the card for the form ccv field |
formBackground | String | '#fff' | Defines the form background color. Accepts Color name and Hex |
formColor | String | '#999' | Defines the form text color. Accepts Color name and Hex |
formRadius | String | '5' | Defines the form border radius. Min is 1 and Max is 30 |
formShadow | Boolean | false | Defines the form box shadow. |
formInputBackground | String | '#fff' | Defines the input background color. Accepts Color name and Hex |
formInputColor | String | '#444' | Defines the input color. Accepts Color name and Hex |
formInputActiveColor | String | '#B2B2B2' | Defines the active input border color. Accepts Color name and Hex |
formInputBorder | String | '#B2B2B2' | Defines the input border color. Accepts Color name and Hex |
formInputRadius | String | '10' | Defines the input border radius. Min is 1 and Max is 30 |
cardBackground | String | '#fff' | Defines the card background color. Accepts Color name and Hex |
cardColor | String | '#999' | Defines the card text color. Accepts Color name and Hex |
cardRadius | String | '5' | Defines the card border radius. Min is 1 and Max is 30 |
cardShadow | Boolean | false | Defines the card box shadow. |
cardCcvColor | String | '#333' | Defines the card ccv text color. Accepts Color name and Hex |
Events
name | Return type | Description |
---|---|---|
card-values | Object | Triggered when the card receives a change in the value of some field, regardless of what it is. An object with all values is returned (number, name, expMonth, expYear, ccv) |
Table of Contents