Added stripe element and event to actions

[ivanvanderbyl]

This PR adds support for sending the stripeElement and event object as arguments to the event handlers, as well as adding new actions:

• error which fires only when the change event fires and the card is invalid. This can be used in a similar way to complete for more complex error state handling, like disabling a form submit or show error messages outside the block.
• complete which only fires once the card input is complete. This allows for sending the stripeElement up to another form object or controller to handle complex nested payment forms. For example:

{{#form-for changeset submit=(action "createCustomer") as |f|}}
  {{stripe-card complete=(mut changeset._stripeElement)}}
  {{f.text-field "billingEmail" placeholder="[email protected]" label="Send receipts to:"}}
  {{f.submit "Begin Subscription"}}
{{/form-for}}

createCustomer(changeset) {
  return changeset.validate().then(() => 
    if(changeset.get('isValid')) {
      stripe.createToken(changeset.get('_stripeElement')).then(({token}) => {
        set(changeset, 'cardToken', token);
      });
      ...
    }
  });
}

[joshsmith]

} else if (error) {

Also, is it really complete || error?

[ivanvanderbyl]

Yeah maybe it should just be the default action? Also, do you have an aversion to prefixing event based actions with on-?

[joshsmith]

@ivanvanderbyl thanks for this PR!

Overall this solves some of the design issues with the blocked usage.

A few things I would love to see here:

• Some additions to the README that mention this usage
• Possibly some additions to the dummy app to also show off what kind of complex behavior can emerge
• Mentioning usage of yarn in the README
• If you have any thoughts around relevant tests

Although not relevant to the PR specifically, I also noticed we should probably have:

• eslint that runs on Travis, so we could've caught the issue with the head tag insertion, and the spacing comment I added

[joshsmith]

I started in #7 getting coverage working, so it might be nice to wrap that up first if we can discuss some testing ideas (being that the iframe makes much of this difficult). With testing wrapped up, I'll feel much more comfortable about such large surface area changes to the actions/events.

[ivanvanderbyl]

Cool, yep I'll update the readme and address those other points once I get this feature shipped in our app.

With the block usage, the main hurdle design wise is lacking any way to specify where the Stripe Element is placed. Maybe we could yield a sub-component which just renders the placeholder div where it's needed, but then maybe that isn't a design concern for this addon. Wouldn't want to complicate it unnecessarily.

[ivanvanderbyl]

Testing the iframe could be tricky, but i have seen something which did this before, I think it was outside of the ember landscape though.

[joshsmith]

@ivanvanderbyl awesome to hear! Are you in the Ember slack? Or you could join ours http://slack.codecorps.org

[joshsmith]

Hey @ivanvanderbyl just wanted to check in on this with you.

[joshsmith]

Hi @ivanvanderbyl I would still love to see about this getting in. Have you had any time to spend on this?

[joshsmith]

Ping.

[joshsmith]

Opened #17 as a follow-up to this since I'd like to get this merged.

Thanks again for the PR @ivanvanderbyl! 🙌