GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → esbanarango → ember-credit-card

esbanarango / ember-credit-card

Licence: MIT License
"make your credit card form dreamy in one line of code"

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
Handlebars
879 projects

Labels

ember-cliemberemberjsstripeember-addoncredit-card

Projects that are alternatives of or similar to ember-credit-card

Ember Cli Bundle Analyzer
Analyze the size and contents of your Ember app's bundles
Stars: ✭ 78 (-12.36%)
Mutual labels:  ember-cli, ember, emberjs, ember-addon
ember-cli-string-helpers
Set of the String helpers extracted from DockYard's ember-composable-helpers.
Stars: ✭ 73 (-17.98%)
Mutual labels:  ember-cli, ember, emberjs, ember-addon
ember-cli-g-maps
Deprecated Google Maps Addon
Stars: ✭ 58 (-34.83%)
Mutual labels:  ember, emberjs, ember-addon
ember-best-language
🏳 A FastBoot-enabled addon to detect the best language for your user.
Stars: ✭ 18 (-79.78%)
Mutual labels:  ember, emberjs, ember-addon
ember-event-helpers
Complimentary event template helpers to the {{on}} modifier
Stars: ✭ 33 (-62.92%)
Mutual labels:  ember, emberjs, ember-addon
ember-cli-nouislider
{{range-slider}} component for ember-cli powered by noUiSlider
Stars: ✭ 43 (-51.69%)
Mutual labels:  ember-cli, ember, ember-addon
ember-on-modifier
Implements the `{{on eventName this.someAction}}` element modifier from https://github.com/emberjs/rfcs/blob/master/text/0471-on-modifier.md
Stars: ✭ 37 (-58.43%)
Mutual labels:  ember, emberjs, ember-addon
ember-link
Link primitive to pass around self-contained route references. It's {{link-to}}, but better!
Stars: ✭ 50 (-43.82%)
Mutual labels:  ember, emberjs, ember-addon
Ember Model Validator
ember-cli addon adds validation support to your Ember-Data models.
Stars: ✭ 141 (+58.43%)
Mutual labels:  ember-cli, emberjs, ember-addon
ember-luxon
🕐 🌐 [deprecated] Addon thats brings Luxon to Ember applications.
Stars: ✭ 20 (-77.53%)
Mutual labels:  ember-cli, ember, ember-addon
ember-shadow-dom
Write templates for your components inside of a Shadow DOM root.
Stars: ✭ 26 (-70.79%)
Mutual labels:  ember, emberjs, ember-addon
ember-changeset-conditional-validations
Conditional validations for ember-changeset-validations
Stars: ✭ 26 (-70.79%)
Mutual labels:  ember, emberjs, ember-addon
ember-template-inspector
An ember add-on which opens the template file in the code editor while inspecting an element.
Stars: ✭ 15 (-83.15%)
Mutual labels:  ember-cli, ember, ember-addon
ember-content-loader
Easy, customizable content placeholders / skeletons screens
Stars: ✭ 41 (-53.93%)
Mutual labels:  ember-cli, ember, ember-addon
Ember Cli Notifications
⚛ Atom inspired notification messages for ember-cli
Stars: ✭ 168 (+88.76%)
Mutual labels:  ember-cli, ember, ember-addon
ember-foxy-forms
Ember Addon for Making Foxy Forms
Stars: ✭ 27 (-69.66%)
Mutual labels:  ember, emberjs, ember-addon
glimmer-apollo
Ember and Glimmer integration for Apollo Client.
Stars: ✭ 32 (-64.04%)
Mutual labels:  ember, emberjs, ember-addon
Ember Cli Stripe
Stripe checkout for Ember
Stars: ✭ 84 (-5.62%)
Mutual labels:  ember-cli, ember, ember-addon
ember-cli-ifa
Ember CLI addon for injecting fingerprinted asset map file into Ember app
Stars: ✭ 54 (-39.33%)
Mutual labels:  ember-cli, ember, ember-addon
cli-guides
Step-by-step guides and tutorials for using the ember-cli to create apps and addons
Stars: ✭ 22 (-75.28%)
Mutual labels:  ember-cli, ember, emberjs
View All Similar Projects ➔

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

<CreditCard/>
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.

<CreditCard
  @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

<CreditCard @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>
</CreditCard>

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

License

This project is licensed under the MIT License.

Support on Beerpay

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

Beerpay Beerpay

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].