dgavey / ember-credit-card

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

Ember Credit card

This is an Ember wrapper for the amazing Card project.

Installation

npm install --save-dev ember-credit-card and ember g ember-credit-card

Usage

{{credit-card}}

Default

By simply adding {{credit-card}} you will get the basic form.

<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'
	values=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}}

Donating

Support this project and others by esbanarango via gratipay.

Running Tests

• npm test (Runs ember try:testall to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

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