Having trouble importing via script tag Stripe.js
-
I am currently attempting to configure the client side portion of stripe.js so I can use its elements feature to collect user payment information. However the client side package is only available via script tag. I’ve tried bringing it in the index.template.html however it always errors as soon as I go to initialize a Stripe client with;
vue.stripe = Stripe(‘pk_live_dMLr0hShLxaZmXesv1buhndd’)
the error is;
Error Stripe is not defined.
I’ve also tried a variety of alternative methods for importing in the package, scriptjs, hand mounting it to the dom in register.vue, all to no avail as it can’t find Stripe and instantiate a client.
here’s the tutorial I’m following;
https://stripe.com/docs/stripe-js
and my code;
https://github.com/Screen-Art-Studios/TimeCrunch/blob/master/src/pages/Register.vue (Line 74-76 & 142-203)
https://github.com/Screen-Art-Studios/TimeCrunch/blob/master/src/plugins/stripe.js
Any help would be a life saver as this is all that is preventing the completion of this app.
update I still am having issues with understanding exactly what is going on but its no longer throwing a Stripe is not defined error once I changed it over to ‘this.$Stripe()’ vs ‘Stripe()’ thinking that would reference the plugin Quasar generated. However now its throwing a stripe.elements is not a function error when;
var stripe = this.$Stripe(‘pk_test_EUZwPeinKym4DDl0d9kMbrOw’)
var elements = stripe.elements()
which is almost exactly what the tutorial prescribes [The only difference being the change from Stripe() to this.$Stripe()]. I’m gonna keep banging my head about this but any clarification on the whole Quasar package thing and / or insight into solving this problem would be a lifesaver. -
window.Stripe
-
@jeffatef It throws a window.Stripe is not a function error when I change it. Am I importing the package incorrectly or is there a different way to call the Stripe() method within the script?
-
@kenth56 Check out the source to this component - https://github.com/fromAtoB/vue-stripe-elements - particularly /src/stripeElements.js
-
I know this is an old thread, but I also need to incorporate Stripe routines into a Quasar package, and so I am wondering what is the current status. Can you incorporate Vue components into a Quasar build like the one mentioned in the previous post, or is it better to build it from scratch?
Anyone have Stripe and Quasar happily working together?
-
@btmi said in Having trouble importing via script tag Stripe.js:
Stripe and Quasar happily working together?
It works now with npm package, just follow the guide here https://stripe.com/docs/payments/checkout/accept-a-payment#add-checkout-button. It worked for me just now with quasar SSR
-
@vadym-voitko Brilliant - thanks