#bwurtz999

1 messages · Page 1 of 1 (latest)

kindred zincBOT
granite sinew
#

Hmmm - do you have a quick snippet of the code I can take a look at?

rotund venture
# 
<script setup>
import { useCartStore } from './Cart';
import { loadStripe } from '@stripe/stripe-js';

let cart = useCartStore();

const stripe = await loadStripe(cart.stripePK);

var elements = stripe.elements({
    clientSecret: cart.clientSecret,
});

var paymentElement = elements.create('payment');
paymentElement.mount('#card-element');

</script>
# 
...
<div v-once class="py-2">
  <div class="" id="card-element"></div>
</div>
...
granite sinew
#

And if you remove the v-once does it work as expected?

rotund venture
#

No. It disappears with or without v-once

#

It's within a <Transition> if that matters (slides on/off the page)

# 
<Transition name="cartWindow">
    <div v-if="cart.cartWindow" class="fixed inset-0 overflow-hidden z-50 h-screen" aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
granite sinew
#

You mention this is happenign after yoyu make a change to the page/cart - can you give more details on that?

rotund venture
#

Not the card - but the cart. So for example, it loads initially. I hide the slideover. Add an item to the cart. Click the cart button to bring the slideover back into view. And it's gone

#

Only the Stripe Elements

#

(it's normally hidden on the initial load, but for debugging I set it visisble initially)

#

*it == the cart slideover

eager hemlock
#

Hello! I'm taking over and catching up...

rotund venture
#

Hello!

eager hemlock
#

So you've got the Payment Element in a slideover which you're pushing out of view, and when it comes back into view the Payment Element is gone?

rotund venture
#

Yes

#

And normally, it would start out of view so the customer can select their items

#

But for debugging, I wanted to make sure it was loading initially - which it is

eager hemlock
#

Disclaimer: I don't know a lot about Vue (we don't offically support it), but I don't think v-once would help with this. I think that directive tells Vue to treat the content as a static component and not re-render it, but it doesn't mean it won't remove it from the DOM. I think Vue is removing it and, when that happens, the connection to Stripe.js is lost and it stops working.

#

Maybe you can listen for the events prior to removal/rendering that might remove it and .prevent them?

#

Like beforeUpdate.prevent or something on the Payment Element container specifically? And beforeUnmount?

rotund venture
#

Hmm ok. I'm not sure how that works but I'll look into it. Didn't realize Stripe doesn't officially support Vue

eager hemlock
rotund venture
#

I was using v-if and switching to v-show fixed it!