angular-card

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

Demo

https://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 data-messages="cardMessages" data-options="cardOptions" data-placeholders="cardPlaceholders" data-card-container="#card-container" data-width="500" data-card="" name="cardForm" action="#">

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

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

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

    <input data-ng-click="changeCard()" value="Change card" type="button">
    <input data-ng-click="clear()" value="Clear" type="button">
  </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 data-ng-model="card.expiryMonth" name="CardExpiryMonth" type="text" placeholder="MM">
<input data-ng-model="card.expiryYear" name="CardExpiryYear" type="text" placeholder="YYYY">