ember-stripe-elements
Advanced tools
A simple Ember wrapper for Stripe Elements.
<script src="https://js.stripe.com/v3/"></script> into your application's <body>Stripe with your publishable keystripev3 service into your controllers so you can use:
{{stripe-card}} (demoed in the gif above)$ ember install ember-stripe-elements
You must set your publishable key in config/environment.js.
ENV.stripe = {
publishableKey: 'pk_thisIsATestKey'
};
You can configure Stripe.js to lazy load when you need it.
ENV.stripe = {
lazyLoad: true
};
When enabled, Stripe.js will not be loaded until you call the load() function on the service. It's best to call this function in a route's beforeModel hook.
// subscription page route
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
export default Route.extend({
stripe: service('stripev3'),
beforeModel() {
return this.get('stripe').load();
}
});
Every component will:
options accepted by Stripe Elementsupdate on the Stripe element if the options are updatedStripeElement in a <div role="mount-point"> on didInsertElementwillDestroyElementstripev3 service.ember-stripe-element{{ember-stripe-card}} has the class .ember-stripe-cardautofocus=true passed directly in the component, e.g. {{stripe-card autofocus=true}}Every component extends from a
StripeElementbase component which is not exposed to your application.
The components bubble up all of the JavaScript events that can be handled by the Stripe Element in element.on() from the Ember component using the following actions:
blurchange (also sets/unsets the stripeError property on the component, which can be yielded with the block)focusYou could handle these actions yourself, for example:
{{stripe-card blur="onBlur"}}
This addon gives you components that match the different Element types:
{{stripe-card}} - card (recommended) A flexible single-line input that collects all necessary card details.{{stripe-card-number}} - cardNumber The card number.{{stripe-card-expiry}} - cardExpiry The card's expiration date.{{stripe-card-cvc}} - cardCvc The card's CVC number.{{stripe-postal-code}} - postalCode the ZIP/postal code.optionsIn addition to the simple usage above, like {{stripe-card}}, you can also yield to a block, which will yield both an stripeError object and the stripeElement itself.
For example, you can choose to render out the stripeError, as below (runnable in our dummy app).
{{#stripe-card options=options as |stripeElement stripeError|}}
{{#if stripeError}}
<p class="error">{{stripeError.message}}</p>
{{/if}}
<button {{action "submit" stripeElement}}>Submit</button>
{{#if token}}
<p>Your token: <code>{{token.id}}</code></p>
{{/if}}
{{/stripe-card}}
Also notice the submit action which passes the stripeElement; you could define this in your controller like so:
import Ember from 'ember';
const { Controller, get, inject: { service }, set } = Ember;
export default Controller.extend({
stripev3: service(),
options: {
hidePostalCode: true,
style: {
base: {
color: '#333'
}
}
},
token: null,
actions: {
submit(stripeElement) {
let stripe = get(this, 'stripev3');
stripe.createToken(stripeElement).then(({token}) => {
set(this, 'token', token);
});
}
}
});
Note the naming convention stripeElement instead of element, as this could conflict with usage of element in an Ember component.
Note that you can use CSS to style some aspects of the components, but keep in mind that the styles object of the options takes precedence.
Fork this repo, make a new branch, and send a pull request. Please add tests in order to have your change merged.
git clone git@github.com:code-corps/ember-stripe-elements.git
cd ember-stripe-elements
npm install
ember serve
Visit your app at http://localhost:4200.
ember test
There are self-signed certs in /ssl that will allow you to test autofill inside of the dummy app (or serve as a blueprint for doing this yourself in your own app).
To run using the self-signed certificate, you must:
127.0.0.1 localhost.ssl to your hosts fileember serve --sslember build
For more information on using ember-cli, visit https://ember-cli.com/.
Thanks to @begedin, @snewcomer, @filipecrosk, and @Kilowhisky for your early help on this!
FAQs
A simple Ember wrapper for Stripe Elements.
The npm package ember-stripe-elements receives a total of 17 weekly downloads. As such, ember-stripe-elements popularity was classified as not popular.
We found that ember-stripe-elements demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.