afikderi/v-credit-card

Beautiful credit card form component for vueJS

v-credit-card's Issues

Card number and expiration validation

Hello,

I'm using Firefox and valid card numbers and expirations are being alert as wrong:

I think it's because the attribute pattern="[0-9]*" on the input. Chrome doesn't seem to have a problem with it.

Black cards

The card layout is black and the style is not showing well.

UI - Should flip card to default state

add

@blur = "flipped = false"

in CreaditCard.vue at 'input' on line 59 would be great.

This is going to set the card view to default state (front) when click out of cvv field.

Business credit card issue

Hi, on the name input, we are setting a 20 maxLength, but on the business credit card, they can write up-to 40 words on that input. Is it possible to extend it to 40 words?

How to change display layout?

Like inputing filed on top, and Card shown at bottom?

Validar CVC input security code

necesito validar el campo security el CVC para que permita solo 3 digitos cuando sea TDC diferentes a american express

How do you add validations rules?

How do you go about adding custom validations if using as a component ?

Passing `amount` or extra "disabled" fields

Hey,
First of all thanks for the amazing component, looks great!
I would like to pass some extra fields to the form such as amount, and maybe a short description.
Are you open to PR?
Thanks!

change event not called

Thanks for this. Looks like there might be a bug.

<VCreditCard ref="creditCard" @change="creditInfoChanged" />

methods: {
 creditInfoChanged(values) {
   console.log("good")
   for (const key in values) {
     this.cardInfo[key] = values[key];
   }

   //validate logic 
   this.validateCard = false;
 },
}

The creditInfoChanged function is never called. That's why I put ref and now using this.$refs.creditCard.form to get values when clicked submit button.

Could you look into this?

Custom labels

Hello!

It would be great if I could change labels and placeholders text. I wonder if there are parameters where I can set those values or perhaps you could update the component.

Thanks!

how to add the required attribute

how to add the required attribute

@change not working

For some reason @change is not working. If I leave everything else the same and change it to @cardChanged it starts working on console.log showing the card type as soon as I start typing in numbers. So it's just @change that doesn't work. I don't see any errors in the chrome developer console or vue console.

I tried registering globally and locally.

 npm list vue

+-- [email protected]
+-- [email protected]
| `-- [email protected]
|   `-- [email protected]  deduped
+-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]  deduped
+-- [email protected]
| `-- [email protected]  deduped
+-- [email protected]
| `-- [email protected]  deduped
+-- [email protected]
| `-- [email protected]  deduped
`-- [email protected]
  `-- [email protected]  deduped

npm info v-credit-card

[email protected] | MIT | deps: 2 | versions: 14
Beautiful credit card form component for vueJS

I am running npm run serve for http access.

I tried going into the compiled dist code and adding console.log to the computed and watcher function. Neither of them appear to fire.

computed: {
     fields: function fields() {
         console.log('computed fields() fired');
         return [this.form.name, this.form.cardNumber, this.form.expiration, this.form.security].join('');
     }
...
...
watch: {
    fields: function fields() {
      console.log('@change emitter fired');
      this.$emit('change', Object.assign({}, this.$data.form));
    }

Trans Prop

Very good component but how can I use trans prop? is it possible for you to give a little info or an example. thanks

how to get credit card flag?

Excellent component, but so far it has not been possible to retrieve a flag from the card selected for shipping.

when typing should put in the date which card is selected, master, visa ...