Inttegro Web SDKs - v0.1.0
    Preparing search index...

    Variable CheckoutConst

    Checkout: DefineComponent<
        ExtractPropTypes<
            {
                appearance: PropType<CheckoutAppearance>;
                locale: StringConstructor;
                orderId: { required: true; type: StringConstructor };
                timeout: NumberConstructor;
                title: StringConstructor;
            },
        >,
        () => VNode<RendererNode, RendererElement, { [key: string]: any }>,
        {},
        {},
        {},
        ComponentOptionsMixin,
        ComponentOptionsMixin,
        {
            completed: (_event: CheckoutCompletedEvent) => true;
            error: (_event: CheckoutErrorEvent | Error) => true;
            event: (_event: CheckoutEvent) => true;
            ready: (_event: CheckoutReadyEvent) => true;
        },
        string,
        PublicProps,
        ToResolvedProps<
            ExtractPropTypes<
                {
                    appearance: PropType<CheckoutAppearance>;
                    locale: StringConstructor;
                    orderId: { required: true; type: StringConstructor };
                    timeout: NumberConstructor;
                    title: StringConstructor;
                },
            >,
            {
                completed: (_event: CheckoutCompletedEvent) => true;
                error: (_event: CheckoutErrorEvent | Error) => true;
                event: (_event: CheckoutEvent) => true;
                ready: (_event: CheckoutReadyEvent) => true;
            },
        >,
        {},
        {},
        {},
        {},
        string,
        ComponentProvideOptions,
        true,
        {},
        any,
    > = ...

    Embeds Inttegro-hosted Checkout in a Vue application.

    The component owns the loader and controller lifecycle. It emits:

    • ready once the iframe is interactive;
    • event for every sanitized Checkout lifecycle event;
    • completed at the successful hosted terminal state; and
    • error for loader/mount failures or sanitized hosted errors.

    Keep the component mounted while payment or confirmation is pending. On unmount it removes its event subscription and permanently destroys the controller.

    <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"
        :appearance="{ theme: 'system' }"
        @ready="checkout?.focus()"
        @completed="$router.push('/orders/complete')"
        @error="reportCheckoutError"
      />
    </template>

    Settings
    Member Visibility