# angular-card

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

Latest version **0.3.13** (published 2017-11-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-card
pnpm add angular-card
yarn add angular-card
bun add angular-card
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.13 |
| Published | 2017-11-22 |
| First published | 2015-11-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sergey Gavruk |
| Maintainers | duluca, gavruk |
| Keywords | angular, credit, card |

## Links

- npm: https://www.npmjs.com/package/angular-card
- Repository: https://gavruk@github.com/gavruk/angular-card
- Homepage: https://github.com/gavruk/angular-card#readme
- Issues: https://github.com/gavruk/angular-card/issues
- npm.io page: https://npm.io/package/angular-card

## Dependencies (1)

- [card](https://npm.io/package/card.md) ^2.4.0

## Recent versions

- 0.3.13 (latest) — 2017-11-22
- 0.3.12 — 2017-10-14
- 0.3.11 — 2017-07-03
- 0.3.10 — 2017-06-05
- 0.3.7 — 2016-02-15
- 0.3.6 — 2015-11-05
- 0.3.5 — 2015-11-05
- 0.3.4 — 2015-11-05

## README

angular-card
============

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

![screen shot 2014-12-20 at 4 37 52 pm](https://cloud.githubusercontent.com/assets/507195/5514998/9a252c80-8866-11e4-81ad-dea3dc5e6870.png)

## 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)

```html
<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>
```

```js
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.

```js
<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" />
```

---
_Source: https://npm.io/package/angular-card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._