Skip to main content
View as Markdown

Inttegro for Vue

Use @inttegro/vue to render Inttegro-hosted Checkout with Vue props, emitted events, exposed controls, and lifecycle cleanup.

Prerequisites

  • Vue 3.4 or newer
  • A backend that creates and finalizes an Inttegro Order
  • A client-safe finalized Order ID or Purchase Intent ID

Install the component

npm install @inttegro/vue

Read the npm setup guide

Choose and render a presentation

The Nuxt live demo uses @inttegro/vue for both presentations while keeping Order creation in Nitro; its released Vue plugin shows the adapter boundary. Compare the presentations below, then use the matching implementation that follows. Open any screenshot at full size when you need to inspect the layout.

Nuxt desktop embedded Checkout
Kora Market Nuxt storefront with Inttegro Checkout embedded beside the Dawn Brew Set order. Shown without a previously attached payment method.
Embedded. Checkout participates in the Vue page while Kora Market’s product and bag context remain visible. Shown without a previously attached payment method.
Nuxt desktop modal Checkout
Kora Market Nuxt storefront dimmed behind an Inttegro Checkout modal. Shown with an attached payment method.
Modal. The overlay gives payment focus without replacing the shopper’s current Nuxt route. Shown with an attached payment method.

Select any image to view it full screen.

Both presentations use the same Checkout component and finalized Order. Vue templates use kebab-case for multiword props and events.

Choose embedded Checkout for a dedicated payment route, checkout step, or invoice layout where the form should remain visible. Your Vue template owns the component's position and surrounding content; Inttegro owns the hosted payment surface inside it.

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Checkout } from '@inttegro/vue'

defineProps<{ orderId: string }>()
const router = useRouter()
const message = ref('')

function handleError(error: Error) {
  message.value = error.message
}
</script>

<template>
  <main>
    <h1>Complete your order</h1>
    <section aria-label="Payment">
      <Checkout
        :appearance="{ theme: 'system' }"
        :order-id="orderId"
        locale="en-GH"
        @completed="router.push('/payment-status')"
        @error="handleError"
      />
    </section>
    <p aria-live="polite">{{ message }}</p>
  </main>
</template>

Keep Checkout mounted while payment or provider confirmation is in progress. Your layout controls the outer element's width and placement; merchant CSS does not reach the hosted controls. Let Checkout report its own height; avoid fixed heights or overflow clipping on the payment region.

Pass a Buy link's public Purchase Intent instead of creating a finalized Order:

<Checkout :purchase-intent-id="purchaseIntentId" />

Use the same prop with presentation="modal" for the managed modal experience. Checkout renders the full Buy experience and creates the finalized Order only after the buyer continues. Payment then continues in the same component. Provide either order-id or purchase-intent-id, never both.

The component also accepts features, timeout, and title. features controls line-item visibility, post-payment invoice and receipt actions, and whether an attached payment method can be replaced. Changing appearance or locale updates the active Checkout. Changing features, orderId, purchaseIntentId, timeout, or title creates a new instance.

Handle emitted events

EventEmitted when
canceledThe payer leaves managed modal Checkout.
completedCheckout reaches its successful terminal experience.
errorLoading or mounting fails before Checkout can continue.
eventAny privacy-safe lifecycle event is received.
failedCheckout reaches a terminal failure.
readyCheckout is ready for customer interaction.

The error event contains an Error for loader or mount failures. The event event receives the canonical Checkout lifecycle, including recoverable paymentAttemptFailed events and the terminal completed, canceled, and failed events. Order-backed events carry the full client-safe Order.

Use these events for interface state and telemetry. Before fulfillment, have your backend look up the Order; the completed event alone is not authoritative money state.

Focus or update Checkout

Use a template ref to call the exposed focus() method:

<script setup lang="ts">
import { ref } from 'vue'
import { Checkout } from '@inttegro/vue'

defineProps<{ orderId: string }>()

const checkout = ref<{ focus(): void } | null>(null)

function focusCheckout() {
  checkout.value?.focus()
}
</script>

<template>
  <Checkout ref="checkout" :order-id="orderId" @ready="focusCheckout" />
</template>

The component also exposes update(), which accepts only appearance and locale. Prefer reactive props when these values already live in Vue state.

Use routes and server rendering

The adapter waits for Vue's onMounted hook before loading Checkout. With server rendering, the server produces the empty host element and the adapter mounts the hosted experience after client hydration.