Const<script setup lang="ts">
import { ref } from 'vue'
import { Checkout, type CheckoutExposed } from '@inttegro/vue'
const props = defineProps<{ orderId: string }>()
const checkout = ref<CheckoutExposed>()
</script>
<template>
<Checkout
ref="checkout"
:order-id="props.orderId"
presentation="modal"
:appearance="{ theme: 'system' }"
@ready="checkout?.focus()"
@completed="$router.push('/orders/complete')"
@error="reportCheckoutError"
/>
</template>
Displays Inttegro-hosted Checkout in a Vue application.
The component owns the loader and controller lifecycle. It emits:
readyonce the iframe is interactive;eventfor every sanitized Checkout lifecycle event;canceledwhen a payer dismisses managed modal Checkout;completedat the successful hosted terminal state; andfailedfor terminal Checkout failure.errorfor loader or mount failures.Keep the component mounted while payment or confirmation is pending. On unmount it removes its event subscription and permanently destroys the controller.