Skip to main content

Inttegro for Vue

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

Developer preview

This package and the hosted runtime are not yet available for live payments. The installation commands below will work after the preview package is published.

Prerequisites

  • Vue 3.4 or newer
  • A backend that creates and finalizes an Inttegro Order
  • The client-safe Order ID returned to your Vue application

Install the component

npm install @inttegro/vue

Read the npm setup guide

Render Checkout

Pass the finalized Order ID as a prop. Vue templates use kebab-case for multiword props and events:

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

defineProps<{ orderId: string }>()

const message = ref('')

function handleCompleted() {
  window.location.assign('/payment-status')
}

function handleError(error: CheckoutErrorEvent | Error) {
  message.value = error instanceof Error ? error.message : error.error.message
}

function handleEvent(event: CheckoutEvent) {
  if (event.type === 'paymentAttempt') {
    message.value = 'Starting your payment…'
  }
}
</script>

<template>
  <Checkout
    :appearance="{ theme: 'system' }"
    :order-id="orderId"
    locale="en-GH"
    title="Complete your payment"
    @completed="handleCompleted"
    @error="handleError"
    @event="handleEvent"
  />
  <p aria-live="polite">{{ message }}</p>
</template>

The component also accepts timeout. Changing appearance or locale updates the active Checkout. Changing orderId, timeout, or title destroys the old instance and creates a new one.

Handle emitted events

EventEmitted when
completedCheckout observes payment completion.
errorLoading, mounting, or the hosted flow reports an error.
eventAny privacy-safe lifecycle event is received.
readyCheckout is ready for customer interaction.

The error event contains an Error for loader or mount failures and a CheckoutErrorEvent for errors reported by the hosted flow. The event event receives every hosted lifecycle event, including ready, completed, and error.

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 modals, routes, and server rendering

Conditionally render Checkout while an application-owned modal is open. Closing the modal then unmounts the component, removes its event subscription, and destroys its Checkout instance. Keep scrolling, the close policy, and focus return in the modal component.

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.