Comments (6)
I haven't seen the exact setup with Gridsome yet, but from what you're describing, but I'll try to give some suggestions in the blind: you should be using the mounted()
lifecycle hook. I've found that sometimes it's necessary to also use nextTick()
in these cases, example here: https://codepen.io/afontcu/pen/OrdRzy?editors=1111
Let me know if that helps!
from ecommerce-netlify.
As I understand, it has to do with this:
Stripe Elements handles and initializes its own UI and so there can be conflicts if Vue.js initializes before Stripe Elements has. To avoid this, setup Stripe Elements after the Vue.js element has been mounted onto the DOM.
The question is - how do I get it to load after Stripe.js
has loaded?
from ecommerce-netlify.
I figured I should be using mounted
, but I have not been able to load the card
component on mounted.
How would you mount a component in a lifecycle hook?
from ecommerce-netlify.
OK, I've figured out how to mount it dynamically onMount
:
<component
:is="cc"
:options="stripeOptions"
stripe="pk_test_xxxxxxxxxxxxxxxxx"
@change="complete = $event.complete"
:class="{ complete }"
class="stripe-card"
id="card"
/>
data() {
return {
cc: undefined,
}
}
mounted() {
this.$nextTick(() => {
setTimeout(() => this.cc = Card, 1000)
})
}
And yes - it only works when I mount the Card
in a setTimeout! Without it it still errors Stripe V3 library not loaded!
.
Doesn't seem the right way to do things...
Edit:
setTimeout
alone works [without the $nextTick
], but $nextTick
itself doesn't work.
from ecommerce-netlify.
@newgraph I think it's important to maybe use a vue 2 stripe component or make your own that ensures the lifecycle is where you want it. I found this one: https://github.com/matfish2/vue-stripe but it's really old. But maybe you could base off the source. I found that making something a vue component/plugin/instance method, sounds tedious for js libraries, but in the end they are worth it. And could even help others.
from ecommerce-netlify.
@newgraph since this isn't really about this project and based on another setup with Gridsome, I'm going to close this out. I didn't mean mount the card component like that, but it's also difficult to advise and debug a whole other project from this repo (and not exactly what I support in these issues, either). I'm going to close this out, but I wish you luck on your project!
from ecommerce-netlify.
Related Issues (20)
- database connect HOT 3
- Update netlify.toml for Netlify Dev local workflow & functions
- SSR isn't working in some cases HOT 1
- Success message autodismisses HOT 4
- Provide product variations (e.g size, ...) in the demo shop HOT 4
- Provide lambda function example to send email notification HOT 1
- Issue Deploying to Netlify... needs an index.html file? HOT 2
- Secret Key on dev HOT 1
- Input control blocks the product quantity
- why you are no using async data and new fetch api ? HOT 1
- Payment Error HOT 2
- 1
- Payment Intent Issue HOT 2
- Site doesn't handle 404s HOT 4
- handleCardPayment is now deprecated
- Cart count issue
- Payment by Credit Card - Doesn't work
- Opening subpath causes 404
- Bug: footer links are squashed on mobile
- Inline cart update/remove functionality. :feature: HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ecommerce-netlify.