Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/esbanarango/ember-credit-card

"make your credit card form dreamy in one line of code"
https://github.com/esbanarango/ember-credit-card

credit-card ember ember-addon ember-cli emberjs stripe

Last synced: about 22 hours ago
JSON representation

"make your credit card form dreamy in one line of code"

Host: GitHub
URL: https://github.com/esbanarango/ember-credit-card
Owner: esbanarango
License: mit
Created: 2015-06-04T15:23:48.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2022-12-10T17:03:28.000Z (about 2 years ago)
Last Synced: 2025-01-17T10:06:34.160Z (10 days ago)
Topics: credit-card, ember, ember-addon, ember-cli, emberjs, stripe
Language: JavaScript
Homepage:
Size: 1.86 MB
Stars: 99
Watchers: 2
Forks: 24
Open Issues: 21
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md

Awesome Lists containing this project

awesome-ember - ember-credit-card - "make your credit card form dreamy in one line of code". (Packages / Payments)

README

        # Ember Credit card

![Download count all time](https://img.shields.io/npm/dt/ember-credit-card.svg) [![Build Status](https://travis-ci.org/esbanarango/ember-credit-card.svg)](https://travis-ci.org/esbanarango/ember-credit-card) [![npm version](https://badge.fury.io/js/ember-credit-card.svg)](http://badge.fury.io/js/ember-credit-card) [![Ember Observer Score](http://emberobserver.com/badges/ember-credit-card.svg)](http://emberobserver.com/addons/ember-credit-card) [![Greenkeeper badge](https://badges.greenkeeper.io/esbanarango/ember-credit-card.svg)](https://greenkeeper.io/)

This is an Ember wrapper for the amazing [Card](https://github.com/jessepollak/card) project.

## Installation

`ember install ember-credit-card`

## Usage

![card](http://i.imgur.com/qG3TenO.gif)

```handlebars

```

##### Default

By simply adding `{{credit-card}}` a basic form will be generated:

```handlebars






  {{input type="text" name="number" value=number placeholder='Credit Card Number'}}

  {{input type="text" name="name" value=name placeholder='Name on Credit Card'}}

  {{input type="text" name="expiry" value=expiry}}

  {{input type="text" name="cvc" value=cvc}}

```

##### Specifying settings

You can also specify all the settings that [Card](https://github.com/jessepollak/card/blob/master/src/coffee/card.coffee#L63) supports.

```handlebars

```

##### With template

The default form and inputs used by default are so simple, so you can pass a template to use your own styled inputs.

> Remeber to either use the default name inputs or specify them on the `{{credit-card}}` arguments

```handlebars

  

    


      Credit Card Number:

      {{input type="text" value=creditCard.number name='number' placeholder='Credit Card Number'}}

    


    


      Name on Credit Card:

      {{input type="text" value=creditCard.name name='name' placeholder='Name on Credit Card'}}

    


    


      Expiration:

      {{input type="text" name='expiry' value=creditCard.expiration placeholder='MM/YY'}}

    


    


      CVC:

      {{input type="text" name='cvc' value=creditCard.cvc placeholder='CVC'}}

    


  

```

### Linting

- `yarn lint:js`

- `yarn lint:js --fix`

## Running Tests

- `ember test` – Runs the test suite on the current Ember version

- `ember test --server` – Runs the test suite in "watch mode"

- `ember try:each` – Runs the test suite against multiple Ember versions

### Running the dummy application

- `ember serve`

- Visit the dummy application at [http://localhost:4200](http://localhost:4200).

## License

This project is licensed under the [MIT License](LICENSE.md).

## Support on Beerpay

Hey people! Help me out for a couple of :beers:!

[![Beerpay](https://beerpay.io/esbanarango/ember-credit-card/badge.svg?style=beer-square)](https://beerpay.io/esbanarango/ember-credit-card) [![Beerpay](https://beerpay.io/esbanarango/ember-credit-card/make-wish.svg?style=flat-square)](https://beerpay.io/esbanarango/ember-credit-card?focus=wish)