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
NPM
npm install @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')
Nuxt 3
import NbPaymentsComponents from '@vlalg-nimbus/nb-payments'
import "@vlalg-nimbus/nb-payments/dist/style.css";

export default defineNuxtPlugin(context => {
  context.vueApp.use(NbPaymentsComponents)
})

To use, simply call the component, in this case it will be NbCreditCard or nb-credit-card.

Mode 1
<template>
  <NbCreditCard />
</template>
Mode 2
<template>
  <nb-credit-card />
</template>
Mode 3
<template>
  <nb-credit-card></nb-credit-card>
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

nameValue typeDefaultDescription
nbId (*)StringSets the id attribute to differentiate from other components
showFormBooleanfalseDefines whether to use the form
chipModelString'two'Defines the model of the card chip. Accepts the following values 'one' or 'two'
cardNumberStringSets 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, ...)
cardNameStringSets 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, ...)
cardExpMonthStringSets 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
cardExpYearStringSets 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
yearsArrayDefines 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
cardCcvStringSets 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, ...)
flipOnHoverBooleanfalseDefines 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
formNumberTextString'card number'Defines the text that appears on the form for the card number field
formHolderTextString'card holder'Defines the text that appears on the form for the card holder name field
formExpMonthTextString'expiration mm'Defines the text that appears on the form for the card expiration month field
formExpMonthDefaultTextString'month'Defines the text of the first option of the month select
formExpYearTextString'expiration yy'Defines the text that appears on the form for the card expiration year field
formExpYearDefaultTextString'year'Defines the text of the first option of the year select
formCcvTextString'ccv'Defines the text that appears on the form for the form ccv field
cardHolderTextString'cardholder name'Defines the text that appears on the card for the form ccv field
cardExpirationTextString'expiration'Defines the text that appears on the card for the form ccv field
cardCcvTextString'ccv'Defines the text that appears on the card for the form ccv field
formBackgroundString'#fff'Defines the form background color. Accepts Color name and Hex
formColorString'#999'Defines the form text color. Accepts Color name and Hex
formRadiusString'5'Defines the form border radius. Min is 1 and Max is 30
formShadowBooleanfalseDefines the form box shadow.
formInputBackgroundString'#fff'Defines the input background color. Accepts Color name and Hex
formInputColorString'#444'Defines the input color. Accepts Color name and Hex
formInputActiveColorString'#B2B2B2'Defines the active input border color. Accepts Color name and Hex
formInputBorderString'#B2B2B2'Defines the input border color. Accepts Color name and Hex
formInputRadiusString'10'Defines the input border radius. Min is 1 and Max is 30
cardBackgroundString'#fff'Defines the card background color. Accepts Color name and Hex
cardColorString'#999'Defines the card text color. Accepts Color name and Hex
cardRadiusString'5'Defines the card border radius. Min is 1 and Max is 30
cardShadowBooleanfalseDefines the card box shadow.
cardCcvColorString'#333'Defines the card ccv text color. Accepts Color name and Hex

Events

nameReturn typeDescription
card-valuesObjectTriggered 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)