New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

ngx-card

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-card

Angular 2+ wrapper for card.js

  • 0.2.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
750
decreased by-22.68%
Maintainers
1
Weekly downloads
 
Created
Source

ngx-card npm version License: MIT

Build Status Codacy Badge

Angular 2+ wrapper for card.js

card

https://ihym.github.io/ngx-card/

Installation

Install through npm:

npm install --save ngx-card

If you use SystemJS to load your files, you should adjust your configuration to point our UMD bundle:

map: {
  ...
  'ngx-card/ngx-card': 'node_modules/ngx-card/bundles/ngx-card.umd.js'
}
Dependencies

This library depends on https://github.com/jessepollak/card (tested with 2.3.0). We don't ship with the library, but you have to take care of including it in your page. There are various ways to achieve this, for example by adding this at the end of your <body>:

<script src="https://unpkg.com/card@2.3.0/dist/card.js"></script>

API

[card]

Input
  • container: any: A selector or DOM element for the form where users will be entering their information

  • card-width: number: default 350px

  • messages: any = {validDate: 'valid\ndate', monthYear: 'mm/yyyy'}: Strings for translation

  • placeholders: any = {number: '•••• •••• •••• ••••', name: 'Full Name', expiry: '••/••', cvc: '•••'}: Placeholders for rendered fields

  • masks: any;

  • formatting: boolean = true;

  • debug: boolean = false: If true, will log helpful messages for setting up Card

[card-number]

[card-name]

[card-expiry]

[card-cvc]

Usage

Once installed you need to import our main module into yours. You should end up with code similar to this:

import {MyComponent} from '...';
import {CardModule} from 'ngx-card/ngx-card';

@NgModule({
  imports: [..., CardModule],
  declarations: [MyComponent, ...],
})
export class MyModule {}

Modify slightly your form by adding the correct directives in your form elements.

You can have multiple form elements that render to a single field (i.e. you have a first and last name input).

To use ngx-card with this functionality, just rearrange your form elements in the correct order and add the proper directives. For example,

<form card
  container=".card-container"
  card-width="500"
  [messages]="messages"
  [placeholders]="placeholders"
  [masks]="masks"
  formatting="false"
  debug="true">

  <input type="text" name="number" card-number/>
  <input type="text" name="first-name" card-name/>
  <input type="text" name="last-name" card-name/>
  <input type="text" name="expiry" card-expiry/>
  <input type="text" name="cvc" card-cvc/>
</form>

Contribute

Build

npm run build

If you want to watch your source files for changes and build every time use:

npm start

Note: Generated output is placed into the node_modules/ngx-card folder.

Demo

The best way to see your changes in action, is to use our demo page locally. Run:

npm run demo

which will create a development server accessible through http:localhost:1111. In conjunction with npm start in another command tab you have a fully working environment!

All demo resources can be found in the /demo folder.


MIT © Vasilis Diakomanolis

Keywords

FAQs

Package last updated on 22 Aug 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc