HarryET-vue | Stripe Developers | Page 1

young lynx Jun 21, 2022, 7:00 PM

#

Hello 👋
are you seeing any failed requests in the network tab?

lime jetty Jun 21, 2022, 7:00 PM

#

young lynx Hello 👋 are you seeing any failed requests in the network tab?

Nope 😦

young lynx Jun 21, 2022, 7:01 PM

#

is it window.stripe vs window.Stripe? 🤔

lime jetty Jun 21, 2022, 7:02 PM

#

oh no sorry that is a typo, as I have a constant file

#

and I have tried logging stripe to ensure it has the function and it does

#

when I add logs before and after the call to confirmPayment it runs the one before but nothing after

young lynx Jun 21, 2022, 7:05 PM

#

can you log out the high level stripe object that you're storing on window?

lime jetty Jun 21, 2022, 7:05 PM

#

young lynx can you log out the high level stripe object that you're storing on window?

This one? window.stripe

#

Here is both the logged output and the weird error

#

young lynx Jun 21, 2022, 7:13 PM

#

hmm let me think

lime jetty Jun 21, 2022, 7:13 PM

#

Yeah got me too! Nothing like it in the docs, going to try accessing the site through ngrok to see if https helps

#

Okay even a production build doesn't help 😦

young lynx Jun 21, 2022, 7:23 PM

#

Unlikely but are you seeing any attempts made to confirm the PaymentIntent on your Stripe dashboard?

lime jetty Jun 21, 2022, 7:23 PM

#

young lynx Unlikely but are you seeing any attempts made to confirm the PaymentIntent on yo...

Where should I be looking on the dashboard?

young lynx Jun 21, 2022, 7:23 PM

#

https://dashboard.stripe.com/test/logs

lime jetty Jun 21, 2022, 7:23 PM

#

nope

#

last thing was creation of the subscription

young lynx Jun 21, 2022, 7:24 PM

#

what do you see when you print out elms.value.elements ?

lime jetty Jun 21, 2022, 7:24 PM

#

young lynx what do you see when you print out `elms.value.elements` ?

Will do that now

#

@young lynx

young lynx Jun 21, 2022, 7:27 PM

#

and the element renders just fine?

lime jetty Jun 21, 2022, 7:27 PM

#

young lynx and the element renders just fine?

#

takes a seccond to load but then sure it works

#

here is the actual code for that:

<template>
  <div>
    <div class="space-y-5">
      <p class="text-sm text-gray-500">
        Since you haven't setup a payment method before, you need to add one to
        your swift account now before we can let you sign in. This can be
        changed in the future through the billing portal and won't be charged
        till after the 14 day free trial!
      </p>
      <form @submit="paymentSubmit" class="space-y-5">
        <div
          v-if="!data && !error"
          class="bg-white flex space-x-2 p-5 rounded-full justify-center items-center"
        >
          <div
            class="bg-brand-600 p-2 w-4 h-4 rounded-full animate-bounce animation-delay-100"
          ></div>
          <div
            class="bg-brand-600 p-2 w-4 h-4 rounded-full animate-bounce animation-delay-200"
          ></div>
          <div
            class="bg-brand-600 p-2 w-4 h-4 rounded-full animate-bounce animation-delay-300"
          ></div>
        </div>
        <div v-if="!data && error"></div>
        <StripeElements
          v-if="data && !error"
          v-slot="{ elements }"
          ref="elms"
          :stripe-key="STRIPE_PK"
          :instance-options="ref({})"
          :elements-options="
            ref({
              clientSecret: data.data.clientSecret,
            })
          "
        >
          <StripeElement
            type="payment"
            ref="payment"
            :elements="elements"
            :options="ref({})"
          />
        </StripeElements>
        <button
          type="submit"
          class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-brand-600 text-base font-medium text-white hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 sm:text-sm"
        >
          Start Free Trial
        </button>
      </form>
    </div>
  </div>
</template>

young lynx Jun 21, 2022, 7:29 PM

#

are you using any third party packages for StripeElements or is this a component you've written that uses Stripe.js functions underneath?

lime jetty Jun 21, 2022, 7:30 PM

#

young lynx are you using any third party packages for `StripeElements` or is this a compone...

Its a third party package, as there are no officially ones for vue3

#

https://github.com/ectoflow/vue-stripe-js

#

OMG, I am an idiot 😐

young lynx Jun 21, 2022, 7:33 PM

#

What was it? 😄

lime jetty Jun 21, 2022, 7:33 PM

#

That library creates its own stripe instace which it uses

#

and gives you access to

#

so it should be:

    const { error } = await elms.value.instance.confirmPayment({
      elements: elms.value.elements,
      confirmParams: {
        return_url: "http://localhost:3000/login/stripe/return",
      },
    });

#

I'll make an issue maybe to that package to make that clearer there, but a quick question any reason stripe dosen't have a Vue3 package and only has official react ones

young lynx Jun 21, 2022, 7:34 PM

#

yup! I had a theory that I was going to write a long essay about here 🙂
Glad you figured it out

lime jetty Jun 21, 2022, 7:34 PM

#

Sorry to waste your time 😅

young lynx Jun 21, 2022, 7:35 PM

#

All good 🙂 Happy to help
Good luck

#HarryET-vue