search

vue-stripe / vue-stripe

Stripe Checkout & Elements for Vue.js
https://vuestripe.com
MIT License
1.08k stars 148 forks source link

Error 'window is not defined' when refreshing the page #211

Closed jesephan closed 3 years ago

jesephan commented 3 years ago

Describe the bug When stripe-checkout component is rendered inside a wizard form and user reload the page it will show Window is not defined you can check the attach image for more details. Fyi i already set { src: '~/plugins/vue-stripe.ts', ssr: false }

To Reproduce Steps to reproduce the behavior: Im using Nuxt @ v2.14.12 and I integrate this page/component inside a wizard form.

Expected behavior It should just load the page w/o any issue.

Screenshots Here is the screenshot

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

jofftiquez commented 3 years ago

Hello, may I know what version of vue-stripe are you using? And perhaps a snippet of your implementation. Thanks.

jesephan commented 3 years ago

@jofftiquez my package version is set to "@vue-stripe/vue-stripe": "^4.2.5" here is the link of my implementation

hansemannn commented 3 years ago

It seems to be an issue with SSR / server-side-rendering that is not handled in the Stripe integration, is that possible?

jofftiquez commented 3 years ago

@hansemannn you are right, although the importing of Stripe.js should solve this issue, that's why I'm a bit confused. Anyway, I will check @jesephan's implementation to see what's up.

jofftiquez commented 3 years ago

@jesephan you can omit this part in your implementation.

import { StripeCheckout } from '@vue-stripe/vue-stripe';

Did you do this part?

As you can see, importing the component directly to the consuming component is not present in this sample.

Handling SSR is a bit different compared to regular SPA that's why we need to do these approaches to make it work.

jesephan commented 3 years ago

@jofftiquez @hansemannn seems to be removing the import and instead rely on the auto import solves my problem. so to anyone having this issue, removing import { StripeCheckout } from '@vue-stripe/vue-stripe'; from your component will solve it.

Thank you so much guys.