<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>