<form {{action"charge" on="submit"}} method="POST">
  <input type="hidden" name="plan" {{bind-attr value="plan.id"}} />
  {{strip-button amount=plan.amount name=plan.name emailAddress=emailAddress}}
</form>

var StripeButton = Ember.Component.extend({
    scriptSource: '<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"',
    scriptClose: '>',
    dataElement: function(element, value) {
        return 'data-' + element + '="' + value + '"';
    },
    didInsertElement: function() {
        this.$().append(
            this.get('scriptSource') +
            this.dataElement('key', 'pk_test_wat') +
            this.dataElement('amount', this.get('amount')) +
            this.dataElement('email', this.get('emailAddress')) +
            this.dataElement('label', this.get('name') + ' Plan') +
            this.dataElement('name', 'Company Name') +
            this.dataElement('description', this.get('name')) +
            this.get('scriptClose')
      );
    }
});

export default StripeButton;