gavruk/angular-card

Angular directive for card https://github.com/jessepollak/card

angular-card

Angular directive for card https://github.com/jessepollak/card

Demo

http://jessepollak.github.io/card/

Installation

npm

npm install angular-card

Usage

name is required for form and inputs (you can use any unique name)

width is optional, it can be set on the element or the options object (defaults to 350)

<form action="#"
  name="cardForm"
  data-card
  data-width="500"
  data-card-container="#card-container"
  data-placeholders="cardPlaceholders"
  data-options="cardOptions"
  data-messages="cardMessages">

  <div>
    <input placeholder="Card number" type="text" name="CardNumber" card-number data-ng-model="card.number" />

    <input placeholder="Full name" type="text" name="CardName" card-name data-ng-model="card.name" />
  </div>
  <div>
    <input placeholder="MM / YYYY" type="text" name="CardExpiry" card-expiry data-ng-model="card.expiry" />

    <input placeholder="CVC" type="text" name="CardCvc" card-cvc data-ng-model="card.cvc" />

    <input type="button" value="Change card" data-ng-click="changeCard()" />
    <input type="button" value="Clear" data-ng-click="clear()" />
  </div>

</form>

angular.module('app', ['gavruk.card'])
.controller('ExampleCtrl', ['$scope', function($scope) {

  $scope.card = {
    name: 'Mike Brown',
    number: '5555 4444 3333 1111',
    expiry: '11 / 2020',
    cvc: '123'
  };

  $scope.cardPlaceholders = {
    name: 'Your Full Name',
    number: 'xxxx xxxx xxxx xxxx',
    expiry: 'MM/YY',
    cvc: 'xxx'
  };

  $scope.cardMessages = {
    validDate: 'valid\nthru',
    monthYear: 'MM/YYYY',
  };

  $scope.cardOptions = {
    debug: false,
    formatting: true,
    width: 500 //optional
  };

}]);

Using multiple fields for card expiry

Simply use 2 input fields for the expiry, and pass either month, or year to the directive.

<input placeholder="MM" type="text" name="CardExpiryMonth" card-expiry="month" data-ng-model="card.expiryMonth" />
<input placeholder="YYYY" type="text" name="CardExpiryYear" card-expiry="year" data-ng-model="card.expiryYear" />

angular-card's Issues

ionic.bundle.js:26794 TypeError: Card is not a constructor

I tried to use this plugin on Ionic but I got this error message: "ionic.bundle.js:26794 TypeError: Card is not a constructor".
I'm using exactly the Example from this repository. What goes wrong?

Card is undefined

Hi I've loaded angular-card and card.js, when I try and run my application I'm getting an exception at new Card(opts). Looking at card.js it looks as though that it should be new card(opts) and not new Card(opts) at line 84.

Thanks

It works before minification but not after

Javascript error Unknown provider: tProvider <- t after Rails minification Angularjs
It works before minification but not after then it has to be an issue with something somewhere not using the min-safe injection method.
http://stackoverflow.com/questions/18950181/javascript-error-unknown-provider-tprovider-t-after-rails-minification-angul

Does not work with forms that the html atribute "name" contains DOT (.)

Does not work with forms that has name attr equals "form.cardForm", for example:

<form name="form.cardForm">

Error output:
"Failed to execute 'querySelectorAll' on 'Document': '[name=form.cardForm]' is not a valid selector."(card.js:862:19)

I solved this problem changing the query selector:

'[name=' + attributes.name + ']'

to

'[name="' + attributes.name + '"]' 

at card.js line 41

Angular 2

Anyway I can use it with angular 2?

There is no way to not to specify width

Basically in js card library you can skip specification of width. Like its done on demo page
https://jessepollak.github.io/card/
var card = new Card({ form: '.active form', container: '.card-wrapper' })
this way width wont be set at all.
But in angular-card its always set to either data-width or 350 and there no way to dont specify it at all.
https://github.com/gavruk/angular-card/blob/master/src/card.js#L51

Why its needed? Because in card library there a logic for scaling if width is set, and it appears that its broken e.g. on mobile devices it increase size of card instead of decreasing it.
jessepollak/card#262
workaround would be to skip width definition at all, but it doesn't seem to be possible with angular-card

Not working into modal

Hi,

I'm error when using modal panel with cordova ionic
Moving it to normal container (not modal) works perfectly.

Erro's message: TypeError: el.insertAdjacentHTML is not a function

Is this an known issue?

best regards Bruno

Cannot visualize the card

TypeError: undefined is not a function

Support for using multiple inputs for one field

Card supports using multiple inputs for one field. Wouldn't it be a good idea to support it here?

Maybe creating additional directives, e.g. cardFirstName, cardLastName, cardMonthExpiry, cardYearExpiry...

Bad link to css

I think the link to the css is wrong, in fact, I cannot see if I clone the project or if I try to build it in another way

"GET /bower_components/card/lib/css/card.css" Error (404): "Not found"

I am not able to work it out with ionic framework

heres example.js

<form action="#"
  name="cardForm"
  data-card
  data-width="500"
  data-card-container="#card-container"
  data-placeholders="cardPlaceholders"
  data-options="cardOptions"
  data-messages="cardMessages"
  >

  <div>
      <input placeholder="Card number" type="text" name="CardNumber" card-number data-ng-model="card.number" />

      <input placeholder="Full name" type="text" name="CardName" card-name data-ng-model="card.name" />
  </div>
  <div>
      <input placeholder="MM / YYYY" type="text" name="CardExpiry" card-expiry data-ng-model="card.expiry" />

      <input placeholder="CVC" type="text" name="CardCvc" card-cvc data-ng-model="card.cvc" />

      <input type="button" value="Change card" data-ng-click="changeCard()" />
      <input type="button" value="Clear" data-ng-click="clear()" />
  </div>

</form>

<div id="card-container"></div>

<script src="lib/card/lib/js/card.js" type="text/javascript"></script>

stack trace
: TypeError: Card is not a function
at link (http://localhost:8100/lib/angular-card/src/card.js:82:9)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:17476:44
at invokeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17482:9)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16982:11)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16373:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16377:13)
at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16248:30)
at self.appendViewElement (http://localhost:8100/lib/ionic/js/ionic.bundle.js:52345:5)
at Object.switcher.render (http://localhost:8100/lib/ionic/js/ionic.bundle.js:50456:41)
at Object.switcher.init (http://localhost:8100/lib/ionic/js/ionic.bundle.js:50376:20)

i think card.js is not available to controller

Angular 1.x t is not a constructor

TypeError: t is not a constructor at Object.link (http://localhost:8888/lib/js/main.min.js:21:1250) at http://localhost:8888/lib/js/main.min.js:1:5280 at http://localhost:8888/lib/js/main.min.js:2:6864 at yt (http://localhost:8888/lib/js/main.min.js:2:6921) at p (http://localhost:8888/lib/js/main.min.js:1:31661) at a (http://localhost:8888/lib/js/main.min.js:1:27512) at a (http://localhost:8888/lib/js/main.min.js:1:27529) at http://localhost:8888/lib/js/main.min.js:1:27159 at http://localhost:8888/lib/js/main.min.js:1:29704 at r (http://localhost:8888/lib/js/main.min.js:1:28002) <form action="#" name="cardForm" data-card="" data-card-container="#card-container" data-placeholders="cardPlaceholders" data-options="cardOptions" data-messages="cardMessages" class="form-inline creditCardForm ng-pristine ng-valid ng-isolate-scope">

What should I do ?

el.insertAdjacentHTML is not a function

When trying to load the card. (Using your example code) it keeps giving the el.insertAdjacentHTML is not a function error.

when I use browser autocomplete, card number can not format.

when I use browser autocomplete, card number can not format.

container overflow

looks like something needs to be clearfix'd perhaps?

ReferenceError: $ is not defined

This error occurs in card.js on the line that contains:

$(element).card(opts);

Am I required to install jQuery?

Just using card to show pre-existing payment methods. Angular

Hey guys

Im just a little stuck with how to inject the information i want into the card without having to input it into a field first. I already have all the payment details pre populated from braintree and the backend of my web app and i just want a visual representation of those payment methods to show in a list item. So how can i pre populate the card without having to input stuff into a form?

Cheers

cardNumber directive not found

Error: [$compile:ctreq] Controller 'card', required by directive 'cardNumber', can't be found!

Remove requirement on form element

In a project I'm working on, I'm using a multi-part form, with nested ng-forms to validate each step. When trying to integrate angular-card, I get an error, since angular-card uses document.querySelectorAll('form[name="cardForm"]'); specifying a form element. Could this be changed to document.querySelectorAll('[name="cardForm"]'); or possibly document.querySelectorAll('form[name="cardForm"],ng-form[name="cardForm"');
I'm not sure if you'd have an even better suggestion, making this directive even more robust?

Card does not show

when i run this locally i dont see the card in the example

Cannot load module

Hi,
I'm trying to load angular-card module but cannot make it work. Getting below error all the time;

 Uncaught Error: Cannot find module 'card'
Uncaught Error: [$injector:modulerr] Failed to instantiate module serviceboxApp due to:
Error: [$injector:modulerr] Failed to instantiate module gavruk.card due to:
Error: [$injector:nomod] Module 'gavruk.card' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

http://errors.angularjs.org/1.4.10/$injector/nomod?p0=gavruk.card
    at http://localhost:9000/bower_components/angular/angular.js:68:12
    at http://localhost:9000/bower_components/angular/angular.js:2012:17
    at ensure (http://localhost:9000/bower_components/angular/angular.js:1936:38)
    at module (http://localhost:9000/bower_components/angular/angular.js:2010:14)
    at http://localhost:9000/bower_components/angular/angular.js:4472:22
    at forEach (http://localhost:9000/bower_components/angular/angular.js:341:20)
    at loadModules (http://localhost:9000/bower_components/angular/angular.js:4456:5)
    at http://localhost:9000/bower_components/angular/angular.js:4473:40
    at forEach (http://localhost:9000/bower_components/angular/angular.js:341:20)
    at loadModules (http://localhost:9000/bower_components/angular/angular.js:4456:5)

---

Tried updating angular to version that card uses, as below and doesn't work.

8) angular#~1.4.8 which resolved to 1.4.10 and is required by angular-card#0.3.7

Tried putting 'gavruk.card' to app.js and in the controller as below

angular.module('serviceboxApp', [
   'gavruk.card',
  'serviceboxApp.auth',
  'serviceboxApp.admin',
  'serviceboxApp.constants',

and also tried;
 angular.module('serviceboxApp', ['gavruk.card'])

.controller('FinancesCtrl', ['$scope', '$state', 'Auth'  , function($scope, $state, Auth  ) {

this is my index.html and I see the js files included

      <script src="bower_components/card/lib/js/card.js"></script>
      <script src="bower_components/angular-card/src/card.js"></script>

and I'm using the same form template as in github repo readme but still getting the same error.
Do you have any idea what's I'm doing wrong?
Thank you

Support NPM package

Unknown provider: $cardProvider <- $card <- cardNumberDirective

Get all code from example but it is not working.

Only example - working well, but in real project - generate an error.
Could you help?

minsafe problem!

I need to update src/card.js like this. Because of there is problem with minsafe.

angular.module('gavruk.card', [])

.controller('CardCtrl',["$scope",function($scope) {

}])

.directive('card',["$compile",function ($compile) {
return {
restrict: 'A',
scope: {
cardContainer: '@', // required
width: '@',
values: '=',
options: '=',
messages: '=',
},
controller: 'CardCtrl',
link: function (scope, element, attributes, cardCtrl) {
var defaultValues = {
number: '•••• •••• •••• ••••',
name: 'Full Name',
expiry: '••/••',
cvc: '•••'
};
var defaultMessages = {
validDate: 'valid\nthru',
monthYear: 'month/year',
};
var defaultOptions = {
debug: false,
formatting: true
};

  var values = angular.extend(defaultValues, scope.values);
  var messages = angular.extend(defaultMessages, scope.messages);
  var options = angular.extend(defaultOptions, scope.options);


  var opts = {
    // a selector or jQuery object for the container
    // where you want the card to appear
    container: scope.cardContainer, // *required*

    formSelectors: {},

    width: scope.width || 350,

    // Strings for translation - optional
    messages: {
      validDate: messages.validDate,
      monthYear: messages.monthYear
    },

    // Default values for rendered fields - options
    values: {
      number: values.number,
      name: values.name,
      expiry: values.expiry,
      cvc: values.cvc
    },

    formatting: options.formatting, // optional - default true
    debug: options.debug // if true, will log helpful messages for setting up Card
  };

  if (cardCtrl.numberInput && cardCtrl.numberInput.length > 0) {
    opts.formSelectors.numberInput = 'input[name="' + cardCtrl.numberInput[0].name + '"]';
  }
  if (cardCtrl.expiryInput && cardCtrl.expiryInput.length > 0) {
    opts.formSelectors.expiryInput = 'input[name="' + cardCtrl.expiryInput[0].name + '"]';
  }
  if (cardCtrl.cvcInput && cardCtrl.cvcInput.length > 0) {
    opts.formSelectors.cvcInput = 'input[name="' + cardCtrl.cvcInput[0].name + '"]';
  }
  if (cardCtrl.nameInput && cardCtrl.nameInput.length > 0) {
    opts.formSelectors.nameInput = 'input[name="' + cardCtrl.nameInput[0].name + '"]';
  }

  $(element).card(opts);
}

};
}])

.directive('cardNumber',["$compile", function($compile) {
return {
restrict: 'A',
scope: {
ngModel: '='
},
require: ['^card', 'ngModel'],
link: function (scope, element, attributes, ctrls) {
cardCtrl = ctrls[0];
cardCtrl.numberInput = element;
scope.$watch('ngModel', function(newVal, oldVal) {
if (!oldVal && !newVal) {
return;
}
if (oldVal === newVal && !newVal) {
return;
}

    var evt = document.createEvent('HTMLEvents');
    evt.initEvent('keyup', false, true);
    element[0].dispatchEvent(evt);
  });
}

};
}])

.directive('cardName',["$compile", function($compile) {
return {
restrict: 'A',
scope: {
ngModel: '='
},
require: ['^card', 'ngModel'],
link: function (scope, element, attributes, ctrls) {
cardCtrl = ctrls[0];
cardCtrl.nameInput = element;
scope.$watch('ngModel', function(newVal, oldVal) {
if (!oldVal && !newVal) {
return;
}
if (oldVal === newVal && !newVal) {
return;
}

    var evt = document.createEvent('HTMLEvents');
    evt.initEvent('keyup', false, true);
    element[0].dispatchEvent(evt);
  });
}

};
}])

.directive('cardExpiry',["$compile",function($compile) {
return {
restrict: 'A',
scope: {
ngModel: '='
},
require: ['^card', 'ngModel'],
link: function (scope, element, attributes, ctrls) {
cardCtrl = ctrls[0];
cardCtrl.expiryInput = element;
scope.$watch('ngModel', function(newVal, oldVal) {
if (!oldVal && !newVal) {
return;
}
if (oldVal === newVal && !newVal) {
return;
}

    var evt = document.createEvent('HTMLEvents');
    evt.initEvent('keyup', false, true);
    element[0].dispatchEvent(evt);
  });
}

};
}])

.directive('cardCvc',["$compile", function($compile) {
return {
restrict: 'A',
scope: {
ngModel: '='
},
require: ['^card', 'ngModel'],
link: function (scope, element, attributes, ctrls) {
cardCtrl = ctrls[0];
cardCtrl.cvcInput = element;
scope.$watch('ngModel', function(newVal, oldVal) {
if (!oldVal && !newVal) {
return;
}
if (oldVal === newVal && !newVal) {
return;
}

    var evt = document.createEvent('HTMLEvents');
    evt.initEvent('keyup', false, true);
    element[0].dispatchEvent(evt);
  });
}

};
}]);