how to clear StripeElement?

[mtzrmzia]

how to clear StripeElement?

[softbeehive]

StripeElement component instance has property stripeElement. I'll give a setup syntax example. Let's imagine it's a card element and you gave it ref="card"

<template>
<StripeElements
    v-if="stripeLoaded"
    v-slot="{ elements, instance }"
    ...
  >
    <StripeElement
      ref="card"
     ...
    />
  </StripeElements>
  <button type="button" @click="clearCard">Clear</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const card = ref()
const clearCard = () => {
  card.stripeElement.clear()
}
</script>

https://stripe.com/docs/js/element/payment_element

[alfredomtzrmz]

i tried but i got this error

const cardNumber = this.$refs.cardNumber as { instance: Stripe };
cardNumber.stripeElement.clear();

TS2339: Property 'stripeElement' does not exist on type '{ instance: Stripe; }'.

[softbeehive]

Well, it has nothing to do with vue-stripe-js. You get typescript issue due to the wrong type, cardNumber is not a stripe instance, but stripeElement (in stripe api terminology)

<script setup lang="ts">
import { ref, Ref } from 'vue'
import type { StripeElement } from '@stripe/stripe-js'

const card = ref() as Ref<StripeElement>
const clearCard = () => {
  card.value.stripeElement.clear()
}
</script>

You can check types
https://github.com/ectoflow/vue-stripe-js/blob/main/types/vue-stripe.d.ts