A simple Ember wrapper for Stripe Elements.
- Inject
<script src="https://js.stripe.com/v3/"></script>into your application's<body> - Initialize
Stripewith your publishable key - Inject a
stripev3service into your controllers so you can use the functions usually available on thestripeobject (see https://stripe.com/docs/stripe-js/reference#the-stripe-object):stripe.elements()stripe.createToken()stripe.createSource()stripe.createPaymentMethod()stripe.retrieveSource()stripe.paymentRequest()stripe.redirectToCheckout()stripe.retrievePaymentIntent()stripe.handleCardPayment()stripe.handleCardAction()stripe.confirmPaymentIntent()stripe.handleCardSetup()stripe.confirmCardSetup()stripe.retrieveSetupIntent()stripe.confirmSetupIntent()
- Simple, configurable Ember components like
{{stripe-card}}(demoed in the gif above)
$ ember install ember-stripe-elements- Ember.js v3.8 or above
- Ember CLI v2.13 or above
- Node.js v8 or above
You must set your publishable key in config/environment.js.
ENV.stripe = {
publishableKey: 'pk_thisIsATestKey'
};You can configure the Stripe API to be mocked instead of loaded from https://js.stripe.com/v3/. This is useful for testing.
ENV.stripe = {
mock: true
};When enabled, a mock Stripe object will be assigned to window.Stripe when your app is initialized.
When using the Stripe mock in tests you will likely need to override the mock's methods according to the needs of your test like so:
this.owner.lookup('service:stripev3').createToken = () => ({ token: { id: 'token' } });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();
}
});You can also pass publishableKey to the load function.
this.get('stripe').load('pk_thisIsATestKey');Every component will:
- Accept the same array of
optionsaccepted by Stripe Elements - Call
updateon the Stripeelementif theoptionsare updated - Bubble the proper JavaScript events into actions
- Mount Stripe's own
StripeElementin a<div role="mount-point">ondidInsertElement - Unmount on
willDestroyElement - Provide access to the
stripev3service - Have the base CSS class name
.ember-stripe-element - Have a CSS class for the specific element that matches the component's name, e.g.
{{ember-stripe-card}}has the class.ember-stripe-card - Yield to a block
- Accept
autofocus=truepassed 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:
readyblurchange(also sets/unsets thestripeErrorproperty on the component, which can be yielded with the block)focuscompleteerror
You could handle these actions yourself, for example:
This addon gives you components that match the different Element types:
Stripe recommends using the their card element - a flexible single-line input that collects all necessary card details.
The {{stripe-card}} component provides this input.
Additionally Stripe provides the following elements, which you can use to build your own form to collect card details:
cardNumber: the card number.cardExpiry: the card's expiration date.cardCvc: the card's CVC number.postalCode: the ZIP/postal code.
These are provided via our {{stripe-elements}} contextual component, which yields sub-components for each element type:
The
{{stripe-elements}}component is a tagless component, so does not have any classes etc on it.
The {{stripe-elements}} contextual component ensures all the individual elements are created from
the same Stripe Elements object.
If you want to pass options to the Stripe Elements object, pass them to the {{stripe-elements}}
contextual component. For example, when using the single-line card element:
Or when creating your own form:
In 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).
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 [email protected]:adopted-ember-addons/ember-stripe-elements.git
cd ember-stripe-elements
npm installember serveVisit your app at http://localhost:4200.
ember testThere 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:
- Add
127.0.0.1 localhost.sslto yourhostsfile - Run the app with
ember serve --ssl - Add the certificate to your keychain and trust it for SSL
- Visit the app at https://localhost.ssl:4200.
ember buildFor more information on using ember-cli, visit https://ember-cli.com/.
Thanks to @begedin, @snewcomer, @filipecrosk, and @Kilowhisky for your early help on this!