❤
npm
Sign UpSign In

@st-h/ember-stripe-elements

0.5.0 • Public • Published


Build Status npm version Ember Observer Score Coverage Status Inline docs MIT License

ember-stripe-elements

A simple Ember wrapper for Stripe Elements.

please note: This is a temporary fork of https://github.com/code-corps/ember-stripe-elements until its future is clear.

Features

Installation

$ ember install ember-stripe-elements

Configuration

Stripe Publishable Key

You must set your publishable key in config/environment.js.

ENV.stripe = {
  publishableKey: 'pk_thisIsATestKey'
};

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

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:

  • ready
  • blur
  • change (also sets/unsets the stripeError property on the component, which can be yielded with the block)
  • focus
  • complete
  • error

You could handle these actions yourself, for example:

{{stripe-card blur="onBlur"}}

Component types

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.

Block usage with 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:st-h/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!

Readme

Keywords

Package Sidebar

Install

npm i @st-h/ember-stripe-elements

Repository

github.com/st-h/ember-stripe-elements

Homepage

github.com/st-h/ember-stripe-elements#readme

Weekly Downloads

3

Version

0.5.0

License

MIT

Unpacked Size

511 kB

Total Files

33

Last publish

Collaborators

  • st-h
Try on RunKit
Report malware