[RFC] Allow the usage of separated stripe components to generate token

[sardyy]

Context

I've started using this addon but my use case is a bit different from the example described. We wanted to use each of the stripe components (card number, expiry and CVV) separately and then create a token using one these stripe elements. Although the Stripe's documentation says that The Element pulls data from other Elements you’ve created on the same instance of elements to tokenize, it didn't work because it considered just the element I was passing.

But there was an important part of the phrase that made me think, ...you’ve created on the same instance of elements.... After taking a look at the code, I've realized that each component was being created using a new instance of elements by calling get(this, 'stripev3.elements')() and consequently, the Stripe.js wasn't able to pull all the data because each of stripe components belonged to a different group.

This fix allows us to inject an elements from our application to the component so all of the stripe elements are created using the same instance and therefore Stripe.js knows how to pull the card information from all of them.

I hope it can help people with the same use case :)

[adamlc]

I can confirm this issue, it looks like it was fixed in #14 at some point but it seems to have been reintroduced in 5e9478b.

Can this be merged @andrewfan @joshsmith?

[adamlc]

On the same subject of using the same elements object it would also be nice to be able to pass options to it too.

[jackhair]

Thanks @sardyy, been trying to get individual elements working and your branch fixed the issue.

[joshsmith]

Hey folks, sorry for the long delay on this.

This looks great. The build is failing but for unrelated reasons, so I'm going to merge here and you can use master until I can cut a release.

[joshsmith]

Thanks to @sardyy for the fix, @adamlc for the original fix (and apologies for missing the reintroduction), and to @jackhair for confirming it all.

Y'all are awesome.

[joshsmith]

By the way @adamlc, I agree that it'd be great to pass options. I don't have much bandwidth at the moment to introduce this, but if you'd like to introduce an RFC and then perhaps a PR, that'd be really fantastic.

[adamlc]

@joshsmith no problem, I'm working on something else at the moment, but I'll gladly take a look when I'm back on Stripe stuff 😄

[sardyy]

I just want to thank you for the merge @joshsmith. I'm glad it helped! Keep going with the great stuff!

[joshsmith]

🎉 This PR is included in version 0.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[RuslanZavacky]

@joshsmith @sardyy Do I understand correctly, that this is how we should interact with individual components:

{{stripe-card-number elements=cardElements change=(action (mut cardElement))}}
{{stripe-card-expiry elements=cardElements change=(action (mut cardElement))}}
{{stripe-card-cvc elements=cardElements change=(action (mut cardElement))}}
{{stripe-postal-code elements=cardElements change=(action (mut cardElement))}}

export default Component.extend({
  stripe: inject('stripev3'),

  cardElement: null,
  cardElements: computed(function() {
    return this.get('stripe').elements();
  }),

...

  actions: {
    process() {
      stripe.createToken(this.get('cardElement'))
    }
  }
});

?