From 6d038fa9195221ea6497b2923abe109aadf2161c Mon Sep 17 00:00:00 2001
From: harlan <harlan@harlanzw.com>
Date: Tue, 7 May 2024 12:04:33 +1000
Subject: [PATCH] fix(stripePricingTable): vue component warnings

---
 .../components/ScriptStripePricingTable.vue   | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/runtime/components/ScriptStripePricingTable.vue b/src/runtime/components/ScriptStripePricingTable.vue
index ab93a520..137faa26 100644
--- a/src/runtime/components/ScriptStripePricingTable.vue
+++ b/src/runtime/components/ScriptStripePricingTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { ElementScriptTrigger } from '../composables/useElementScriptTrigger'
-import { useElementScriptTrigger, useScript } from '#imports'
+import { onBeforeUnmount, useElementScriptTrigger, useScript } from '#imports'
 
 const props = withDefaults(defineProps<{
   trigger?: ElementScriptTrigger
@@ -18,28 +18,37 @@ const emit = defineEmits<{
   ready: []
 }>()
 
-const rootEl = ref()
+const rootEl = ref<HTMLDivElement | undefined>()
+const containerEl = ref<HTMLDivElement | undefined>()
 const { $script } = useScript(`https://js.stripe.com/v3/pricing-table.js`, {
   trigger: useElementScriptTrigger({ trigger: props.trigger, el: rootEl }),
 })
 
+const pricingTable = ref<HTMLElement | undefined>()
 $script.then(() => {
+  const StripePricingTable = window.customElements.get('stripe-pricing-table')!
+  const stripePricingTable = new StripePricingTable()
+  stripePricingTable.setAttribute('publishable-key', props.publishableKey)
+  stripePricingTable.setAttribute('pricing-table-id', props.pricingTableId)
+  if (props.clientReferenceId)
+    stripePricingTable.setAttribute('client-reference-id', props.clientReferenceId)
+  if (props.customerEmail)
+    stripePricingTable.setAttribute('customer-email', props.customerEmail)
+  if (props.customerSessionClientSecret)
+    stripePricingTable.setAttribute('customer-session-client-secret', props.customerSessionClientSecret)
+  pricingTable.value = stripePricingTable
+  rootEl.value!.appendChild(stripePricingTable)
   emit('ready')
 })
+
+onBeforeUnmount(() => {
+  pricingTable.value?.remove()
+})
 </script>
 
 <template>
   <div ref="rootEl">
-    <ClientOnly>
-      <stripe-pricing-table
-        v-bind="$attrs"
-        :publishable-key="publishableKey"
-        :pricing-table-id="pricingTableId"
-        :client-reference-id="clientReferenceId"
-        :customer-email="customerEmail"
-        :customer-session-client-secret="customerSessionClientSecret"
-      />
-    </ClientOnly>
+    <div ref="containerEl" />
     <slot v-if="$script.status.value === 'loading'" name="loading" />
     <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
     <slot />