Level 6
Found the solution - the stripe.js had ended up just above the closing body tag for some reason. Should be in the head tag.
2 likes
Aug 29, 2017
3
Level 6
ReferenceError: Stripe is not defined
Hey!
Having some trouble with my Spark app.
First discovered when trying to accept an invite. I'm getting an error like:
app.js:43146 [Vue warn]: Error in mounted hook:
(found in <SparkUpdatePaymentMethodStripe>)
warn @ app.js:43146
handleError @ app.js:44031
callHook @ app.js:44863
insert @ app.js:45536
invokeInsertHook @ app.js:47536
patch @ app.js:47700
Vue._update @ app.js:44621
updateComponent @ app.js:44744
get @ app.js:45053
Watcher @ app.js:45036
mountComponent @ app.js:44748
Vue$3.$mount @ app.js:49828
Vue$3.$mount @ app.js:51877
Vue._init @ app.js:46344
Vue$3 @ app.js:46425
(anonymous) @ app.js:18862
__webpack_require__ @ app.js:20
(anonymous) @ app.js:51907
__webpack_require__ @ app.js:20
(anonymous) @ app.js:66
(anonymous) @ app.js:69
app.js:44035 ReferenceError: Stripe is not defined
at VueComponent.mounted (app.js:23125)
at callHook (app.js:44861)
at Object.insert (app.js:45536)
at invokeInsertHook (app.js:47536)
at Vue$3.patch [as __patch__] (app.js:47700)
at Vue$3.Vue._update (app.js:44621)
at Vue$3.updateComponent (app.js:44744)
at Watcher.get (app.js:45053)
at new Watcher (app.js:45036)
at mountComponent (app.js:44748)
But Stripe is definitely available, can access it through console. That mounted hook:
mounted: function mounted() {
Stripe.setPublishableKey(Spark.stripeKey);
this.initializeBillingAddress();
},
setPublishableKey and Spark.stripeKey are also available in console.
It occurs on all settings pages in where Stripe.setPublishableKey is used.
I've checked the keys and they're correct.
I just can't figure it out, I haven't messed with the Spark core. Anyone else had this problem or have any idea about how to solve?
Thank you!
Level 2
@melker, fantastic! same issue, same solution.
1 like
Level 1
I still get this error even after putting <script> src="https://js.stripe.com/v3/"></script> into <head></head>
The only solution I have found so far is to load it as an ES module as follows: https://github.com/stripe/stripe-js
npm install @stripe/stripe-js
import {loadStripe} from '@stripe/stripe-js';
...
async mounted() {
this.stripe = await loadStripe("pk_test_Xg7qi3wvJZJYGcNRrVPF9aOc");
}
With the major caveat being that ES module support is quite new so browser compatiblity could be an issue.
Please or to participate in this conversation.