fix: typescript issues, forward element events to component

Author: softbeehive

src/components/StripeElement.vue

@@ -4,70 +4,70 @@
 
 <script setup lang="ts">
 import type { StripeElementType, StripeElements } from "@stripe/stripe-js"
+import type { Ref } from "vue"
 import {
+  computed,
   defineEmits,
   inject,
   onBeforeUnmount,
   onMounted,
   ref,
   toRefs,
   watch,
-  withDefaults,
 } from "vue"
+import type { StripeElementOptionsMap } from "../stripe-elements"
 import { createElement } from "../stripe-elements"
-import type { StripeElementOptions } from "../stripe-elements"
 
 interface Props {
   type?: StripeElementType
   elements?: StripeElements
-  options?: StripeElementOptions
+  options?: StripeElementOptionsMap[StripeElementType]
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  type: () =>
-    (inject("providedElements") as StripeElementType) ? "payment" : "card",
-  elements: () => inject("providedElements") as StripeElements,
-})
+const props = defineProps<Props>()
+
+const emit = defineEmits(eventTypes)
 const { type, elements, options } = toRefs(props)
 
-// TODO: verify it works
-const emit = defineEmits()
+// Backward-compatibility: used when no type is provided. Having elements at this stage means it comes from slot props.
+const fallbackType = computed(() => (elements.value ? "card" : "payment"))
+
+// This dependency is provided by StripeElements.vue
+const providedElements = inject("providedElements") as Ref<StripeElements>
 
 const domElement = ref(document.createElement("div"))
-const stripeElement = ref()
-const mountPoint = ref()
+const stripeElement = ref<ReturnType<typeof createElement>>()
+const mountPoint = ref<HTMLDivElement>()
 
 onMounted(() => {
   const mountElement = () => {
     stripeElement.value = createElement(
-      elements.value,
-      type.value,
+      elements.value || providedElements.value,
+      type.value || fallbackType.value,
       options.value,
     )
-    mountPoint.value.appendChild(domElement.value)
+    mountPoint.value?.appendChild(domElement.value)
     stripeElement.value?.mount(domElement.value)
   }
 
-  // Handle event listeners
-  const wrapperFn = (t: string, e: Event) => {
-    emit(t, e)
-  }
-
   const handleEvents = () => {
-    // See stripe element events: https://stripe.com/docs/js/element/events
-    const eventTypes = [
-      "change",
-      "ready",
-      "focus",
-      "blur",
-      "click",
-      "escape",
-      "loaderror",
-      "loaderstart",
-    ]
-
-    for (const eventType of eventTypes) {
-      stripeElement.value?.on(eventType, wrapperFn.bind(null, eventType))
+    // Define the interface for the type with the "on" method
+    interface StripeElementWithOn {
+      on(eventType: string, handler: (e: Event) => void): void
+    }
+
+    // Type guard function to check if an object has the "on" method
+    function hasOnMethod(obj: unknown): obj is StripeElementWithOn {
+      return !!obj && typeof (obj as StripeElementWithOn).on === "function"
+    }
+
+    if (stripeElement.value && hasOnMethod(stripeElement.value)) {
+      // See stripe element events: https://stripe.com/docs/js/element/events
+      for (const eventType of eventTypes) {
+        stripeElement.value.on(eventType, (e: Event) => {
+          emit(eventType, e)
+        })
+      }
     }
   }
 
@@ -85,7 +85,9 @@ onBeforeUnmount(() => {
 })
 
 watch(options, () => {
-  stripeElement.value?.update(props.options)
+  if (options.value && stripeElement.value && "update" in stripeElement.value) {
+    stripeElement.value.update(options.value)
+  }
 })
 
 defineExpose({
@@ -94,3 +96,16 @@ defineExpose({
   mountPoint,
 })
 </script>
+
+<script lang="ts">
+export const eventTypes = [
+  "change",
+  "ready",
+  "focus",
+  "blur",
+  "click",
+  "escape",
+  "loaderror",
+  "loaderstart",
+]
+</script>

src/stripe-elements.ts

@@ -9,8 +9,6 @@ import type {
   StripeCardExpiryElementOptions,
   StripeCardNumberElementOptions,
   StripeConstructorOptions,
-  StripeCurrencySelectorElement,
-  StripeElement,
   StripeElementType,
   StripeElements,
   StripeElementsOptions,
@@ -26,7 +24,6 @@ import type {
   StripeIssuingCardExpiryDisplayElementOptions,
   StripeIssuingCardNumberDisplayElementOptions,
   StripeIssuingCardPinDisplayElementOptions,
-  StripeLinkAuthenticationElement,
   StripeP24BankElementOptions,
   StripePaymentElementOptions,
   StripePaymentMethodMessagingElementOptions,
@@ -43,7 +40,6 @@ export type StripeElementOptions =
   | StripeCardElementOptions
   | StripeCardExpiryElementOptions
   | StripeCardNumberElementOptions
-  | StripeCurrencySelectorElement
   | StripeEpsBankElementOptions
   | StripeExpressCheckoutElementOptions
   | StripeFpxBankElementOptions
@@ -54,14 +50,13 @@ export type StripeElementOptions =
   | StripeIssuingCardExpiryDisplayElementOptions
   | StripeIssuingCardNumberDisplayElementOptions
   | StripeIssuingCardPinDisplayElementOptions
-  | StripeLinkAuthenticationElement
   | StripeP24BankElementOptions
   | StripePaymentElementOptions
   | StripePaymentMethodMessagingElementOptions
   | StripePaymentRequestButtonElementOptions
   | StripeShippingAddressElementOptions
 
-/* type StripeElementOptionsMap = {
+export type StripeElementOptionsMap = {
   address: StripeAddressElementOptions
   affirmMessage: StripeAffirmMessageElementOptions
   afterpayClearpayMessage: StripeAfterpayClearpayMessageElementOptions
@@ -87,12 +82,13 @@ export type StripeElementOptions =
   paymentMethodMessaging: StripePaymentMethodMessagingElementOptions
   paymentRequestButton: StripePaymentRequestButtonElementOptions
   shippingAddress: StripeShippingAddressElementOptions
-} */
+}
 
 export const ERRORS = {
-  STRIPE_NOT_LOADED: "Stripe script is not loaded",
+  STRIPE_NOT_LOADED:
+    "Stripe is not loaded. Include it as script or load using loadStripe method of @stripe/stripe-js",
   INSTANCE_NOT_DEFINED:
-    "Instance object is not defined. Initialize Stripe before creating elements",
+    "Stripe instance is not defined. Initialize Stripe before creating elements",
   ELEMENTS_NOT_DEFINED:
     "Elements object is not defined. You can't create stripe element without it",
   ELEMENT_TYPE_NOT_DEFINED:
@@ -134,16 +130,16 @@ export const createElements = (
 export const createElement = (
   elements: StripeElements,
   elementType: StripeElementType,
-  options?: StripeElementOptions,
-): StripeElement | undefined => {
+  options?: StripeElementOptionsMap[StripeElementType],
+) => {
   try {
     if (!elements) {
       throw new Error(ERRORS.ELEMENTS_NOT_DEFINED)
     }
     if (!elementType) {
       throw new Error(ERRORS.ELEMENT_TYPE_NOT_DEFINED)
     }
-    return elements.create(elementType as any, options as any)
+    return elements.create(elementType, options)
   } catch (error) {
     console.error(error)
   }