Giter Club home page Giter Club logo

ember-cli-stripe's Introduction

Stripe checkout for Ember Build Status

Preview

Description

Simplest way to implement card payments in your Ember app.

This addon integrates Stripe's embedded payment form, Checkout. See Stripe Checkout docs.

The best documentation is the sample application in tests/dummy.

Installation

ember install ember-cli-stripe 

Usage

{{stripe-checkout
  image="/square-image.png"
  name="Demo Site"
  description="2 widgets ($20.00)"
  amount=2000
  onToken=(action "processStripeToken")
}}

Component properties

Property Purpose
label Stripe Checkout button text.
isDisabled When true, the Stripe Checkout button is disabled.
showCheckout Can be used to open the Stripe Checkout modal dynamically.

Besides the above, all Stripe Checkout configuration options are supported. If you notice anything missing please open an issue.

Actions

The primary action of this component, onToken is called when the Stripe checkout succeeds. Its main param is a Stripe Token object.

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    /**
     * Receives a Stripe token after checkout succeeds
     * The token looks like this https://stripe.com/docs/api#tokens
     */
    processStripeToken(token, args) {
      // Send token to the server to associate with account/user/etc
    }
  }
});

List of all actions:

Action Purpose
onToken The callback invoked when the Checkout process is complete.
onOpened The callback invoked when Checkout is opened.
onClosed The callback invoked when Checkout is closed.

Configuration

All Stripe Checkout configuration options can be set in your apps config.

In most cases, you will want to add at least your Stripe publishable key to your app's config, but this can be set as a property on the component too.

// config/environment.js
module.exports = function(environment) {
  var ENV = {
    stripe: {
        key: 'pk_test_C0sa3IlkLWBlrB8laH2fbqfh',
        ....
    },
  };

  return ENV;
};

Note: If Stripe options are set in the environment.js file and when invoking the component, the later value will win.

Multiple Stripe keys are supported, when passed directly to the component.

Compatibility

This addon is tested against Ember 1.13+.

For older versions of Ember, use version 0.4.0 and check the old docs.

Note: At your own risk, feel free to try current version, it might still work.

Contributing

PRs welcome!

  • git clone this repository
  • npm install
  • bower install

Running

Running Tests

  • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

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

ember-cli-stripe's People

Contributors

vladucu avatar wcurtis avatar isratrade avatar miguelcobain avatar nolman avatar ember-tomster avatar jasonmit avatar

Forkers

rashedakther

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.