Mount your Element

Mount your Element

Stripe Elements are automatically mounted to the DOM when you use Vue Stripe components. Understanding how they're mounted helps you integrate them effectively.

How Elements Mount

When you use a Vue Stripe element component, it:

1. Creates a container div element
2. Calls the Stripe.js API to create the element instance
3. Mounts the Stripe element to the container
4. Emits lifecycle events

Element Lifecycle

Ready Event

The @ready event is emitted when the element is fully rendered and ready:

<script setup>
function handleReady() {
  console.log('Payment Element is ready')
}
</script>

<template>
  <PaymentElement @ready="handleReady" />
</template>

Change Event

The @change event is emitted when element data changes:

<script setup>
function handleChange(event) {
  if (event.complete) {
    console.log('Card details are complete')
  }
  if (event.error) {
    console.error('Error:', event.error.message)
  }
}
</script>

<template>
  <CardElement @change="handleChange" />
</template>

DOM Structure

Elements are mounted inside a container div. The structure looks like:

<div id="payment-element">
  <!-- Stripe Element is mounted here -->
</div>

Conditional Mounting

Elements only mount when:

• The Elements or CheckoutProvider is available
• The Stripe instance has loaded
• The component is rendered in the template

Unmounting

Elements are automatically cleaned up when:

• The component is unmounted
• The parent Elements provider is removed
• The component is conditionally hidden with v-if="false"

Manual Control

You can control element mounting with v-if:

<script setup>
const shouldShowPayment = ref(false)

function showPayment() {
  shouldShowPayment.value = true
}
</script>

<template>
  <PaymentElement v-if="shouldShowPayment" />
</template>

For detailed information about element mounting and lifecycle, refer to the Stripe Element documentation.