<template>
  <div class="tp-checkout-place white-bg">
    <h3 class="tp-checkout-place-title">Tu orden</h3>
    <div ref="checkout_container" id="checkout"></div>
  </div>
</template>

<script setup lang="ts">
import { useCartStore } from '@/pinia/cart/cart.store';
import { usePaymentsGateway } from '@/pinia/payments-gateway/payments-gateway.store';
import type { StripeEmbeddedCheckout } from '@stripe/stripe-js';

const paymentsGateway = usePaymentsGateway();
let checkoutInstance: StripeEmbeddedCheckout | null = null;

const checkout_container = ref(null);
let embeddedCheckout: StripeEmbeddedCheckout = null;

onMounted(async () => {
  const stripe = await paymentsGateway.getStripe();
  const session = await paymentsGateway.getStripeSession();

  

  embeddedCheckout = await stripe.initEmbeddedCheckout({ clientSecret: session.client_secret });

  embeddedCheckout.mount(checkout_container.value);
})

onBeforeUnmount(() => {
  if(embeddedCheckout) {
    embeddedCheckout.destroy();
    embeddedCheckout = null;
  }
})

</script>
