matfish2 / vue-stripe

Vue.js 2 Stripe checkout component
https://www.npmjs.com/package/vue-stripe
MIT License
58 stars 18 forks source link

Event based success #1

Closed raphbibus closed 7 years ago

raphbibus commented 7 years ago

Hi,

first of all great module, I enjoy using it. I came across a problem in my setup however, thus I had to copy your code and extend it. I think this extension could help a lot of people:

Instead of just offering to submit a form (which I wasn't able to prevent somehow) it would be awesome to be able to also to get the data via the event bus. Therefore I just replaced the submitting line with

bus.$emit('vue-stripe.success', {
                        token: self.stripeToken,
                        email: self.stripeEmail
                    });

This way I have no page refresh and can handle the server stuff asynchronously. Maybe you could implement it as a parameter for the component like

<stripe-checkout onsuccess="submit|broadcast">

Thank you, looking forward to your feedback!

matfish2 commented 7 years ago

Sounds good. You are welcome to send a PR and I will merge it. I believe the default should be 'submit'

raphbibus commented 7 years ago

Hey,

I’ll do within the next days! Talk to you soon!

Viele Grüße & best regards

Ralph Cibis

gstjohn commented 7 years ago

Disagreeing with the use of a dedicated event bus. Wouldn't it be preferable to just have component events that were emitted and then could be reacted to by the parent?

new Vue({
    template: '<stripe-checkout @success="handleSuccess"></stripe-checkout>',
    methods: {
        handleSuccess(payload) {
            // Do whatever...
        }
    }
});

How are you accessing the event bus within this plugin currently to listen for events?

I'd be happy to implement this if it seems preferable.

matfish2 commented 7 years ago

The advantage of using a dedicated bus is that you can listen for an event on any component regardless of its position in the components' tree, whereas using a custom event like you suggest is limited to one-way child-parent communication only. It is however, a good idea to add this as another option. You can send a PR if you want.

gstjohn commented 7 years ago

The only thing I would push back on with the dedicated bus is that it should be within my own ecosystem, not the components. The package should be self-contained and for me to have to reach into it to grab a bus for myself seems odd.

My recommendation for implementation would be the same as above and then I can $emit on my own bus within the handleSuccess() method.

Any thoughts there?