ember-stripe

An addon for working with Stripe and Stripe Checkout in an Ember.js app.

Usage

Installation

ember install @abcum/ember-stripe

Introduction

The ember-stripe addon adds functionality for Stripe and Stripe Checkout from within an Ember.js app. The Stripe.js script is included automatically in the index.html file, and when using Stripe Checkout, the script is loaded asynchronously when needed. The addon is currently using Stripe.js V3, which does not yet support Apple Pay.

Examples

Stripe Elements

Add a Stripe Elements card element to the page.

{{stripe-element on-error=(action (mut error)) on-complete=(action (mut show))}}

{{#if error}}
    <error>{{error.message}}</error>
{{/if}}

{{#if show}}
    <button {{action 'makePayment'}}>Pay now</button>
{{/if}}

import Ember from "ember";

export default Ember.Controller.extend({
    stripe: Ember.inject.service(),
    actions: {
        makePayment() {
            let stripe = this.get('stripe');
            let token = stripe.createToken(stripe.element).then(token => {
                // Send token to the payment processing server
            });
        },
    }
});

Install options

It is necessary to provide the stripe.publishableKey property in your environment config.

// config/environment.js
module.exports = function(environment) {
    return {
        stripe: {
            publishableKey: 'pk_SGryXYpfqh14iYO7YdFKQVhf',
        },
    }
};

Elements options

These additional elements configuration options can be passed into the stripe-element component. For more information on the usage of each option, look at the Stripe Elements Reference page.

Attribute	Default	Description
classes	{}	Set custom class names on the element when the input is in a particular state.
hidePostalCode	false	Hide the postal code field.
hideIcon	false	Hides any icons in the Element.
iconStyle	"default"	Appearance of the icons in the Element.
placeholder	""	Customize the placeholder text.
style	{}	Customize appearance using CSS properties.
type	"card"	Can be one of card, cardNumber, cardExpiry, cardCvc, and postalCode.

Stripe Checkout

Add a Stripe Checkout element to the page.

{{#stripe-checkout amount=20000 currency='EUR' on-token=(action 'sendTokenToServer')}}
    <button>Pay now</button>
{{/stripe-checkout}}

And run an action when the Checkout popup is opened or closed.

{{#stripe-checkout amount=20000 on-open=(action 'openedPopup') on-close=(action 'closedPopup')}}
    <button>Pay now</button>
{{/stripe-checkout}}

Install options

It is necessary to provide the stripe.publishableKey property in your environment config.

// config/environment.js
module.exports = function(environment) {
    return {
        stripe: {
            publishableKey: 'pk_SGryXYpfqh14iYO7YdFKQVhf',
            checkout: {
                name: 'Abcum Ltd.',
                bitcoin: false,
                allowRememberMe: false,
            }
        },
    }
};

Checkout options

These additional checkout configuration options can be passed into the stripe-checkout component, or defined in the stripe.checkout environment config. For more information on the usage of each option, look at the Stripe Checkout Reference page.

Attribute	Default	Description
allowRememberMe	true	Specify whether to include the option to Remember Me for future purchases.
amount	0	The amount (in pence) that's shown to the user.
billingAddress	false	Specify whether Checkout should collect the user's billing address.
bitcoin	false	Specify whether to accept Bitcoin.
currency	"USD"	The currency of the amount (3-letter ISO code).
description	""	A description of the product or service being purchased.
email	""	Prefill the email address, if it is already known.
image	""	A relative or absolute URL pointing to a square image of your brand or product.
locale	"auto"	The language and locale to use when displaying the Checkout.
name	""	The name of your company or website.
panelLabel	""	The label of the payment button in the Checkout form.
shippingAddress	false	Specify whether Checkout should collect the user's shipping address.
zipCode	false	Specify whether Checkout should validate the billing postal code.

Development

• make install (install bower and ember-cli dependencies)
• make upgrade (upgrade ember-cli to the specified version)
• make tests (run all tests defined in the package)