"make your credit card form dreamy in one line of code"
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
addon
app/components
config
tests
vendor
.bowerrc
.editorconfig
.ember-cli
.eslintrc.js
.gitignore
.jshintrc
.npmignore
.prettierrc
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.js
package.json
testem.js
yarn.lock

README.md

Ember Credit card

Download count all time Build Status npm version Ember Observer Score Greenkeeper badge

This is an Ember wrapper for the amazing Card project.

Installation

ember install ember-credit-card

Usage

card

{{credit-card}}
Default

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

<div class='card-wrapper'></div>
<br/>
<form id="ember-credit-card-form">
  {{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}}
</form>
Specifying settings

You can also specify all the settings that Card supports.

{{credit-card
  form='#my-form'
  placeholders=cardValues
  width=150
  formatting=false
}}
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

{{#credit-card form="#my-form"}}
  <form id='my-form' class='payment-info'>
    <div class="ui input">
      <label>Credit Card Number:</label>
      {{input type="text" value=creditCard.number name='number' placeholder='Credit Card Number'}}
    </div>

    <div class="ui input">
      <label>Name on Credit Card:</label>
      {{input type="text" value=creditCard.name name='name' placeholder='Name on Credit Card'}}
    </div>

    <div class="ui input">
      <label>Expiration:</label>
      {{input type="text" name='expiry' value=creditCard.expiration placeholder='MM/YY'}}
    </div>

    <div class="ui input">
      <label>CVC:</label>
      {{input type="text" name='cvc' value=creditCard.cvc placeholder='CVC'}}
    </div>

  </form>
{{/credit-card}}

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

For more information on using ember-cli, visit https://ember-cli.com/.

License

This project is licensed under the MIT License.

Support on Beerpay

Hey dude! Help me out for a couple of 🍻!

Beerpay Beerpay