This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@vemlavaraloucagamers/vg-credit-card

3.0.1 • Public • Published

Vg-Credit-Card

This component is only for Vue.js 3+

Deprecated Package

This package has been deprecated and is no longer actively maintained. We recommend switching to the @vlalg-nimbus/nb-payments as a replacement for this one. The new package provides improved features, better performance, and ongoing support.



npm npm Snyk Vulnerabilities for npm package Snyk Vulnerabilities for GitHub Repo


This is a component credit card.

Installation

npm install @vemlavaraloucagamers/vg-credit-card

# or

yarn add @vemlavaraloucagamers/vg-credit-card

Usage

// main.js
import { createApp } from 'vue'
import App from './App.vue'

import VgCreditCard from '@vemlavaraloucagamers/vg-credit-card'
import "@vemlavaraloucagamers/vg-credit-card/dist/style.css";

const app = createApp(App)
app.use(VgCreditCard)
app.mount('#app')
// page.vue
<template>
  <VgCreditCard />
</template>

<template>
  <vg-credit-card />
</template>

<template>
  <vg-credit-card></vg-credit-card>
</template>

Props

Items with an (*) mean they are required

name Value type Default Description
vgId (*) 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
formExpMonthText 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
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.
formShadow Boolean false Defines the form box shadow.
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.
cardShadow Boolean false Defines the card box shadow.
cardCcvColor String '#333' Defines the card ccv text color. Accepts Color name and Hex
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.

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)

Example

// page.vue
<template>
  <VgCreditCard
    vg-id="vg-credit-card-one"
    :show-form="true"
    chip-model="two"
    :flip-on-hover="true"
    :form-shadow="true"
    form-input-background="white"
    form-input-border="magenta"
    form-input-active-color="yellow"
    @card-values="somethingReturned"
  />
</template>

<script setup>
  const somethingReturned = () => {
    console.log('VgCreditCard something returned')
  }

  return {
    somethingReturned
  }
</script>
# console when something returned
VgCreditCard something returned

License

MIT

Package Sidebar

Install

npm i @vemlavaraloucagamers/vg-credit-card

Weekly Downloads

2

Version

3.0.1

License

none

Unpacked Size

366 kB

Total Files

7

Last publish

Collaborators

  • tonhaosantos