[Discussion] - Support for Nuxt or SSR Vue #72

seenickcode · 2019-08-31T03:52:03Z

Hello,

I'm using the refactor/v3 branch with a Nuxt application. Since Nuxt supports SSR, I get errors that 'window' and 'document' are undefined, naturally because the component gets rendered server side first.

What I did to try to get things to work is fork and create my own refactor/v3 branch. It looks like the changes I made are working, one just has to

import their own stripe.js file in the head component, as this cannot be created during Vue's created() because your branch requires a reference to document
simply customize successUrl and cancelUrl as one normally would, as your branch seems to use window.location....

Here's the fork if you are interested. Ensure you take a look at the refactor/v3 branch I have. https://github.com/seenickcode/vue-stripe-checkout/tree/refactor/v3

I'd like to know your thoughts and if this v3 you have can be supported by SSR Vue, esp with the popular Nuxt framework.

Thanks,

The text was updated successfully, but these errors were encountered:

jofftiquez · 2019-08-31T04:00:22Z

Hello @seenickcode thanks for the insight. I am considering to support Nuxt sooner or later, but for now, since this version is just a testing version and is highly subjected to breaking changes, I am still experimenting stuff. But yeah, we'll get there (Nuxt).

Your suggestions makes sense, I will try to implement them the soonest. Thank you for your help.

rahulrumalla · 2019-11-20T23:14:15Z

Heya. The changes proposed by @seenickcode worked perfectly for me using it with nuxt. Would be great to this in 🙏

jofftiquez · 2019-12-15T14:28:38Z

Hello @seenickcode I merged the refactor/v3 branch to master. However, I wasn't able to implement your suggestions. I removed the part where you need to load the stripe checkout right away in the index.html because of performance issues. For some, it's not ok to load the scripts you don't need immediately. And I totally agree with that. Kindly see the updated documentation and let me know what you have in mind.

I am not that knowledgeable in Nuxt so I would appreciate if you could re-fork the latest master and make some suggestions on how to properly implement the latest version in Nuxt. I will do my best to accommodate any solution.

Thank you for your help. So much appreciated.

Let's keep this thread open for discussion.

jofftiquez · 2020-01-17T14:23:06Z

Hello @seenickcode any updates? Thanks.

DanielRivers · 2020-02-25T21:40:16Z

I am needing this too, I will try forking and doing a pull request

jofftiquez · 2020-02-27T06:12:07Z

Please do @DanielRivers thanks.

weihao · 2020-03-27T23:06:40Z

@DanielRivers ^ updates?

jofftiquez · 2020-03-28T02:22:00Z

Hello all, may I know how you implemented this? So I tried to tinker around nuxtjs these past few days because of this issue. As per @seenickcode's description, he is importing the scripts the "nuxt way" in the the nuxt config (?).

Anyways, I created this component with the stripe.js included in the component, but it will only load when needed.

In the component where I want to use the checkout, I just imported the checkout component like:

import { StripeCheckout } from 'vue-stripe-checkout';

—and used it as a normal component.

There are no extra configuration in the nuxt.config.js done.

I would create a nuxt example for this if I have time this weekend. For the meantime, kindly let me know if this will work for you guys. Thanks.

Also, one of my colleague tried this implementation as well. And according to him, it also works.

NOTE

This has been tested on the generated nuxt files using yarn generate.

jofftiquez · 2020-03-28T02:22:31Z

@weihao please check as well. Referencing #98

weihao · 2020-03-28T02:45:27Z

Hello all, may I know how you implemented this? So I tried to tinker around nuxtjs these past few days because of this issue. As per @seenickcode's description, he is importing the scripts the "nuxt way" in the the nuxt config (?).

Anyways, I created this component with the stripe.js included in the component, but it will only load when needed.

In the component where I want to use the checkout, I just imported the checkout component like:
import { StripeCheckout } from 'vue-stripe-checkout';
—and used it as a normal component.

There are no extra configuration in the nuxt.config.js done.

I would create a nuxt example for this if I have time this weekend. For the meantime, kindly let me know if this will work for you guys. Thanks.

Also, one of my colleague tried this implementation as well. And according to him, it also works.

NOTE

This has been tested on the generated nuxt files using yarn generate.

I tried this and I got an error:

ReferenceError

window is not defined

window is not defined due to SSR.

Code:

<template>
  <client-only>
    <stripe-checkout
      ref="checkoutRef"
      :pk="publishableKey"
      :items="items"
      :successUrl="successUrl"
      :cancelUrl="cancelUrl"
    >
      <template slot="checkout-button">
        <button @click="checkout">Shutup and take my money!</button>
      </template>
    </stripe-checkout>
  </client-only>
</template>

<script>
import { StripeCheckout } from 'vue-stripe-checkout'
export default {
  components: {
    StripeCheckout
  },
  data: () => ({
    loading: false,
    publishableKey: process.env.PUBLISHABLE_KEY,
    items: [
      {
        sku: 'sku_FdQKocNoVzznpJ',
        quantity: 1
      }
    ],
    successUrl: 'your-success-url',
    cancelUrl: 'your-cancel-url'
  }),
  methods: {
    checkout () {
      this.$refs.checkoutRef.redirectToCheckout()
    }
  }
}
</script>

jofftiquez · 2020-03-28T20:51:35Z

@weihao thank you for confirming. I will check this.

weihao · 2020-03-28T21:27:15Z

@weihao thank you for confirming. I will check this.

Thanks for the support! Please keep us updated.

jofftiquez · 2020-03-31T15:09:16Z

UPDATE: After trying a couple of things, I finally came up with something. I will make a test branch for this so we can all test it.

weihao · 2020-03-31T18:45:03Z

UPDATE: After trying a couple of things, I finally came up with something. I will make a test branch for this so we can all test it.

Awesome, let me know and I can help out testing.

btraxinger · 2020-04-09T01:02:48Z

Hello @jofftiquez, were you able to make a test branch? I would gladly give you a hand testing this if needed.

platform-kit · 2020-04-16T00:24:04Z

I ran into this issue using this component with Gridsome. Was able to get around it by creating a duplicate of vue-stripe-checkout.js, wrapping its content in if(typeof window != 'undefined') and importing that instead.

jofftiquez · 2020-04-16T00:28:54Z

Thanks @platform-kit for the updates.

Everyone, I'm sorry I've been really busy lately. Please kindly try the workaround solutions requested here. I will fix this soon.

peterhoffren · 2020-04-29T20:04:13Z

I ran into this issue using this component with Gridsome. Was able to get around it by creating a duplicate of vue-stripe-checkout.js, wrapping its content in if(typeof window != 'undefined') and importing that instead.

Im trying to get NuxtJS working with the vue-stripe-checkout, Can you explain just a bit how you managed to get this working? Thanks!

platform-kit · 2020-04-29T20:06:34Z

@peterhoffren -

Duplicate the file "vue-stripe-checkout.js" from the node_modules/vue-stripe-checkout (this package). Add

if(typeof window != 'undefined') {

at the very beginning of that file, and } at the end.

Then import this file instead of the original.

rktmatt · 2020-05-26T20:14:15Z

Hello all, may I know how you implemented this? So I tried to tinker around nuxtjs these past few days because of this issue. As per @seenickcode's description, he is importing the scripts the "nuxt way" in the the nuxt config (?).

In nuxt, you can load stripe only in your component, so you won't have to load stripe on all pages.

export default {
  head () {
    return {
      script: [
          {
          hid: 'stripe',
          src: 'https://js.stripe.com/v3'
          }
      ]
    }
  },

Looking forward to seeing this module perfectly working for nuxt.

alzmob · 2020-07-24T11:25:44Z

Stripe is working well locally, but I cannot see "card input" on server.
What is the reason?

Jesus82 · 2020-07-30T15:46:38Z

@jofftiquez is this still in the roadmap? I want to upgrade my stripe version to support 2-way-authentication and I would like to know if I can make this work with Nuxt :)

jofftiquez · 2020-07-30T16:26:24Z

Hello @Jesus82 as a matter of fact, yes, this is still in the roadmap. Lemme see if I can raise the priority on my schedule. I'll let you guys know. Thanks.

Per vue-stripe#72

Rouzy777 · 2020-09-07T18:09:59Z

Hello guys! I'm solved "window is not defined" problem by modifying vue-stripe-checkout files directly in node_modules. But when I'm deploying my nuxt project to netlify - it doesn't see my edited and fixed file. How can I solve this?

platform-kit · 2020-09-07T19:12:04Z

@Rouzy777 see my comment above. You'll need to save the modified file in a directory other than node_modules and import from there, since the node_modules directory is rebuilt upon deployment.

Rouzy777 · 2020-09-07T19:17:39Z

@platform-kit Many thanks!

jofftiquez · 2020-09-17T01:01:52Z

Hello all, I've been working with nuxt a lot recently, while I can't really get back to this yet, I think I already have some solutions in mind that I can test in the next days. I apologize for having this issue open for so long. I will do my best to find time to fix this. Thanks and stay safe y'all.

jofftiquez · 2020-09-18T02:08:00Z

Hello all, I hope you'll find time to read this. This is just to summarize the current state of the project, and its future.

jofftiquez · 2020-09-23T14:18:01Z

Hello all! Here's a big update for y'all! The good news is, there are NO changes in vue-stripe-checkout at all to support nuxt implementation. Like I said, I am working a lot with nuxt recently, so I incorporated all of my learning to this solution I created.

Please check this new repository I created https://github.com/jofftiquez/vue-stripe-checkout-nuxt-demo

This demo repo also has the complete step by step guide on how to use vue-stripe-checkout in nuxt. This has been tested in both SPA and SSR mode. Likes to the demo are also included in the README

Please take your time to check it out. And let me know what you think. Thank you all for being patient with this project.

jofftiquez · 2020-09-29T18:45:58Z

Hello guys, may I have your feedback on this? I will be closing this issue in few days if don't get anymore issues regarding Nuxt.js thank you.

platform-kit · 2020-09-29T18:57:29Z

@jofftiquez I don't use nuxt, but I am curious about whether the changes you make will affect vue-stripe-checkout's use in Gridsome? Is the fix Nuxt-specfic?

jofftiquez · 2020-09-29T19:06:51Z

@jofftiquez I don't use nuxt, but I am curious about whether the changes you make will affect vue-stripe-checkout's use in Gridsome? Is the fix Nuxt-specfic?

No @platform-kit, there are actually no actual changes made to the codebase. I just created a guide on how to properly use it with nuxt.js. There should be no changes to the way the plugin works in any way. :)

platform-kit · 2020-09-29T19:08:27Z

@jofftiquez Then it would seem that a fix is still required to make it useable in Gridsome. Shall I open a new issue?

jofftiquez · 2020-09-29T19:14:33Z

@jofftiquez Then it would seem that a fix is still required to make it useable in Gridsome. Shall I open a new issue?

Hmm gridsome. I'm not quite familiar with it yet. Yes please that would be awesome. So that we could also have a separate thread for it. Thanks!

jhull · 2020-09-30T21:13:41Z

I would love to give feedback (and am excited about your new direction with this) - but I'm having issues with managing subscriptions - just don't know how to set it up properly. Any guidance?

jofftiquez · 2020-10-01T17:59:11Z

Hello @jhull would you mind making a new issue for that? Thank you :)

jofftiquez · 2020-10-01T18:00:37Z

Hello all! Thank you all for participating in this issue, and for being patient. All help is so much appreciated. I will be closing this issue now. Happy coding everyone! <3

jofftiquez added enhancement Version 3 labels Aug 31, 2019

jofftiquez pinned this issue Aug 31, 2019

jofftiquez changed the title ~~Support for Nuxt or SSR Vue~~ [Discussion] - Support for Nuxt or SSR Vue Dec 15, 2019

jennie added a commit to jennie/vue-stripe-checkout that referenced this issue Sep 5, 2020

Check for window to make script work with ssr

409cd16

Per vue-stripe#72

jofftiquez closed this as completed Oct 1, 2020

jofftiquez unpinned this issue Oct 8, 2020

devictoribero mentioned this issue Apr 8, 2021

As developer I want SSR support for vue-stripe card element #189

Closed

[Discussion] - Support for Nuxt or SSR Vue #72

[Discussion] - Support for Nuxt or SSR Vue #72

Comments

seenickcode commented Aug 31, 2019

jofftiquez commented Aug 31, 2019

rahulrumalla commented Nov 20, 2019

jofftiquez commented Dec 15, 2019

jofftiquez commented Jan 17, 2020

DanielRivers commented Feb 25, 2020

jofftiquez commented Feb 27, 2020

weihao commented Mar 27, 2020

jofftiquez commented Mar 28, 2020 • edited Loading

jofftiquez commented Mar 28, 2020

weihao commented Mar 28, 2020 • edited Loading

jofftiquez commented Mar 28, 2020

weihao commented Mar 28, 2020

jofftiquez commented Mar 31, 2020

weihao commented Mar 31, 2020

btraxinger commented Apr 9, 2020

platform-kit commented Apr 16, 2020

jofftiquez commented Apr 16, 2020

peterhoffren commented Apr 29, 2020

platform-kit commented Apr 29, 2020 • edited Loading

rktmatt commented May 26, 2020 • edited Loading

alzmob commented Jul 24, 2020

Jesus82 commented Jul 30, 2020

jofftiquez commented Jul 30, 2020

Rouzy777 commented Sep 7, 2020

platform-kit commented Sep 7, 2020

Rouzy777 commented Sep 7, 2020

jofftiquez commented Sep 17, 2020

jofftiquez commented Sep 18, 2020

jofftiquez commented Sep 23, 2020

jofftiquez commented Sep 29, 2020

platform-kit commented Sep 29, 2020

jofftiquez commented Sep 29, 2020

platform-kit commented Sep 29, 2020

jofftiquez commented Sep 29, 2020

jhull commented Sep 30, 2020

jofftiquez commented Oct 1, 2020

jofftiquez commented Oct 1, 2020

jofftiquez commented Mar 28, 2020 •

edited

Loading

weihao commented Mar 28, 2020 •

edited

Loading

platform-kit commented Apr 29, 2020 •

edited

Loading

rktmatt commented May 26, 2020 •

edited

Loading