skouter/components/update-billing/billing.vue

<template>
<div>

<h4>Billing</h4>
<div id="payment-element"></div>
<div id="message"></div>
<button @click="submit" class="btn btn-primary">Submit</button>

</div>
</template>

<script setup>
import { ref, onMounted } from "vue"

const props = defineProps(["sub"])
const stripe = Stripe(process.env.STRIPE_KEY)
const options = { clientSecret: props.sub.clientSecret }
const elements = stripe.elements(options)
const payEl = elements.create("payment")

function submit() {
    let result = stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: `https://${process.env.SKOUTER_DOMAIN}`,
    }
  })
}

onMounted(() => {
  console.log(process.env.SKOUTER_DOMAIN)
  payEl.mount("#payment-element")
})
</script>

<style scoped>
button.btn {
  margin: 10px auto;
  display: block;
  min-width: 90px;
}
</style>