You can access the underlying Stripe element instances using the getElement() method on the Elements object. This allows you to call methods directly on the element instances.
The getElement() method returns the underlying Stripe element instance for a given component. It returns null if the element is not rendered in the current Elements provider tree.
<script setup>
import { PaymentElement, useElements } from 'vue-stripe'
const elements = useElements()
function focusPaymentElement() {
const paymentElement = elements.value?.getElement(PaymentElement)
if (paymentElement) {
paymentElement.focus()
}
}
</script>
<template>
<div>
<PaymentElement />
<button @click="focusPaymentElement">
Focus Payment Element
</button>
</div>
</template>
Each element type provides different methods. Here are some common ones:
<script setup>
import { CardElement, useElements } from 'vue-stripe'
const elements = useElements()
function focusCard() {
const cardElement = elements.value?.getElement(CardElement)
cardElement?.focus()
}
function blurCard() {
const cardElement = elements.value?.getElement(CardElement)
cardElement?.blur()
}
</script>
<template>
<div>
<CardElement />
<button @click="focusCard">
Focus
</button>
<button @click="blurCard">
Blur
</button>
</div>
</template>
<script setup>
import { CardElement, useElements } from 'vue-stripe'
const elements = useElements()
function clearCard() {
const cardElement = elements.value?.getElement(CardElement)
cardElement?.clear()
}
</script>
<template>
<div>
<CardElement />
<button @click="clearCard">
Clear
</button>
</div>
</template>
Some elements support getting their current value:
<script setup>
import { AddressElement, useElements } from 'vue-stripe'
const elements = useElements()
async function getAddress() {
const addressElement = elements.value?.getElement(AddressElement)
if (addressElement) {
const { complete, value } = await addressElement.getValue()
if (complete) {
console.log('Address:', value)
}
}
}
</script>
<template>
<div>
<AddressElement />
<button @click="getAddress">
Get Address
</button>
</div>
</template>
<script setup>
import { PaymentElement, useElements } from 'vue-stripe'
const elements = useElements()
function focusPayment() {
const paymentElement = elements.value?.getElement(PaymentElement)
paymentElement?.focus()
}
</script>
<template>
<PaymentElement />
</template>
<script setup>
import { CardElement, useElements, useStripe } from 'vue-stripe'
const stripe = useStripe()
const elements = useElements()
async function createPaymentMethod() {
const cardElement = elements.value?.getElement(CardElement)
if (!cardElement || !stripe.value) {
return
}
const { error, paymentMethod } = await stripe.value.createPaymentMethod({
type: 'card',
card: cardElement,
})
if (error) {
console.error(error.message)
}
else {
console.log('Payment method:', paymentMethod.id)
}
}
</script>
<template>
<form @submit.prevent="createPaymentMethod">
<CardElement />
<button type="submit">
Create Payment Method
</button>
</form>
</template>
<script setup>
import { AddressElement, useElements } from 'vue-stripe'
const elements = useElements()
async function validateAddress() {
const addressElement = elements.value?.getElement(AddressElement)
if (!addressElement) {
return
}
const { complete, value, isEmpty } = await addressElement.getValue()
if (isEmpty) {
console.log('Address is empty')
}
else if (complete) {
console.log('Address is complete:', value)
}
else {
console.log('Address is incomplete')
}
}
</script>
<template>
<div>
<AddressElement />
<button @click="validateAddress">
Validate Address
</button>
</div>
</template>
The getElement() method is fully typed. TypeScript will infer the correct element type:
import { CardElement, PaymentElement, useElements } from 'vue-stripe'
const elements = useElements()
// TypeScript knows this is StripeCardElement | null
const cardElement = elements.value?.getElement(CardElement)
// TypeScript knows this is StripeElement | null
const paymentElement = elements.value?.getElement(PaymentElement)
Always check if the element exists before using it:
<script setup>
import { PaymentElement, useElements } from 'vue-stripe'
const elements = useElements()
function safeOperation() {
const paymentElement = elements.value?.getElement(PaymentElement)
if (!paymentElement) {
console.warn('Payment Element is not available')
return
}
// Safe to use paymentElement
paymentElement.focus()
}
</script>
<script setup>
import { ref } from 'vue'
import {
PaymentElement,
useElements,
useStripe
} from 'vue-stripe'
const stripe = useStripe()
const elements = useElements()
const loading = ref(false)
async function handleSubmit() {
if (!stripe.value || !elements.value) {
return
}
loading.value = true
// Get Payment Element instance
const paymentElement = elements.value.getElement(PaymentElement)
if (!paymentElement) {
loading.value = false
return
}
// Focus the element
paymentElement.focus()
// Submit the form
const { error: submitError } = await elements.value.submit()
if (submitError) {
loading.value = false
console.error(submitError.message)
return
}
// Continue with payment confirmation...
loading.value = false
}
</script>
<template>
<form @submit.prevent="handleSubmit">
<PaymentElement />
<button type="submit" :disabled="loading">
{{ loading ? 'Processing...' : 'Pay' }}
</button>
</form>
</template>
For detailed information about element methods and their usage, refer to the Stripe Element methods documentation.