ember-stripe-elements

A simple Ember wrapper for Stripe Elements.

maintainers wanted

If you can spare some time in helping maintain this addon, please let us know in the discord adopted-ember-addons channel or open an issue.

Features

Inject <script src="https://js.stripe.com/v3/"></script> into your application's <body>
Initialize Stripe with your publishable key
Inject a stripev3 service into your controllers so you can use the functions usually available on the stripe object (see https://stripe.com/docs/stripe-js/reference#the-stripe-object):
- stripe.elements()
- stripe.confirmCardPayment()
- 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)

Installation

$ ember install @adopted-ember-addons/ember-stripe-elements

Compatibility

Ember.js v3.8 or above
Ember CLI v2.13 or above
Node.js v8 or above

Configuration

Stripe Publishable Key

You must set your publishable key in config/environment.js. Also, stripe options contains optional values that you could configure if you want to.

ENV.stripe = {
  publishableKey: 'pk_thisIsATestKey',
  stripeOptions: {
    stripeAccount: 'acct_test_account',
    locale: 'en'
  }
};

Mocking the Stripe API

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' } });

Lazy loading

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();
  }
});

Note that the load function returns a Promise. By returning this promise you ensure that Stripe is fully loaded before the route procedes to the next model hook.

You can also pass publishableKey and optional stripeOptions to the load function.

this.get('stripe').load('pk_thisIsATestKey', {
  locale: 'en',
  stripeAccount: 'acct_24BFMpJ1svR5A89k'
});

Components

Basics

Every component will:

Accept the same array of options accepted by Stripe Elements
Call update on the Stripe element if the options are updated
Bubble the proper JavaScript events into actions
Mount Stripe's own StripeElement in a <div role="mount-point"> on didInsertElement
Unmount on willDestroyElement
Provide access to the stripev3 service
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=true passed directly in the component, e.g. {{stripe-card autofocus=true}}

Every component extends from a StripeElement base component which is not exposed to your application.

Actions

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 (upcoming breaking change 1.0.0-rc.2: all actions are now prefixed with 'on' adopted-ember-addons#7)

onReady
onBlur
onChange (also sets/unsets the stripeError property on the component, which can be yielded with the block)
onFocus
onComplete
onError

You could handle these actions yourself, for example:

{{stripe-card onBlur=this.onBlur}}

Component types

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:

{{#stripe-elements as |elements|}}
  {{elements.cardNumber}}
  {{elements.cardExpiry}}
  {{elements.cardCvc}}
  {{elements.postalCode}}
{{/stripe-elements}}

The {{stripe-elements}} component is a tagless component, so does not have any classes etc on it.

Elements Options

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:

{{#stripe-elements options=elementOptions as |elements|}}
  {{elements.card options=cardOptions}}
{{/stripe-elements}}

Or when creating your own form:

{{#stripe-elements options=elementsOptions as |elements|}}
  {{elements.cardNumber options=cardNumberOptions}}
  {{elements.cardExpiry}}
  {{elements.cardCvc}}
{{/stripe-elements}}

Block usage with element `options`

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).

{{#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.

Styling

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.

Contributing

Fork this repo, make a new branch, and send a pull request. Please add tests in order to have your change merged.

Installation

git clone git@github.com:adopted-ember-addons/ember-stripe-elements.git
cd ember-stripe-elements
npm install

Running

ember serve

Visit your app at http://localhost:4200.

Running Tests

ember test

Testing autofill in browsers

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:

Add 127.0.0.1 localhost.ssl to your hosts file
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.

Building

ember build

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

Contributors

Thanks to @begedin, @snewcomer, @filipecrosk, and @Kilowhisky for your early help on this!

Name		Name	Last commit message	Last commit date
Latest commit History 146 Commits
addon		addon
app		app
config		config
docs/img		docs/img
ssl		ssl
tests		tests
vendor		vendor
.editorconfig		.editorconfig
.ember-cli		.ember-cli
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmignore		.npmignore
.template-lintrc.js		.template-lintrc.js
.travis.yml		.travis.yml
.watchmanconfig		.watchmanconfig
LICENSE.md		LICENSE.md
README.md		README.md
ember-cli-build.js		ember-cli-build.js
inch.json		inch.json
index.js		index.js
package.json		package.json
testem.js		testem.js
yarn.lock		yarn.lock

License

gfmartinez/ember-stripe-elements

Folders and files

Latest commit

History

Repository files navigation

ember-stripe-elements

maintainers wanted

Features

Installation

Compatibility

Configuration

Stripe Publishable Key

Mocking the Stripe API

Lazy loading

Components

Basics

Actions

Component types

Elements Options

Block usage with element options

Styling

Contributing

Installation

Running

Running Tests

Testing autofill in browsers

Building

Contributors

About

Resources

License

Stars

Watchers

Forks

Languages

Block usage with element `options`