@stripe/react-stripe-js. You can follow the React Stripe.js documentation and adapt the examples to Vue syntax.Elements for standard payment flows, or CheckoutProvider for Checkout Session integrations.Elements emit @error events, and Stripe methods return error objects:
<script setup>
const stripe = useStripe()
const elements = useElements()
async function handleSubmit() {
const { error } = await elements.value.submit()
if (error) {
console.error(error.message)
}
}
</script>
Yes. Pass null initially for the stripe prop and update it when Stripe loads:
<script setup>
const stripePromise = ref(null)
onMounted(() => {
stripePromise.value = loadStripe('pk_test_xxx')
})
</script>
Use the Appearance API in the Elements provider:
<Elements
:stripe="stripePromise"
:options="{
appearance: {
theme: 'stripe',
variables: {
colorPrimary: '#0570de',
},
},
}"
>
<CheckoutForm />
</Elements>
Elements provider, but only one of each type.Use getElement():
<script setup>
const elements = useElements()
const paymentElement = elements.value?.getElement(PaymentElement)
</script>