@wajub/vue

Wajub Components for Vue 3.

Install

npm install @wajub/vue @wajub/js

Quick start — hosted checkout

<script setup lang="ts">
import { WajubProvider, CheckoutEmbed } from "@wajub/vue";

defineProps<{ sessionId: string }>();
</script>

<template>
  <WajubProvider>
    <CheckoutEmbed
      :session-id="sessionId"
      @success="() => (window.location.href = '/thanks')"
    />
  </WajubProvider>
</template>

Create sessionId on your server, then pass it as a prop. Never expose secret keys (sk_...) in the browser.

Components

<script setup lang="ts">
import { ref } from "vue";
import type { ComponentInstance } from "@wajub/js";
import { WajubProvider, CardComponent, useConfirmPayment } from "@wajub/vue";

const props = defineProps<{ sessionId: string }>();
const confirm = useConfirmPayment(props.sessionId);
const cardRef = ref<ComponentInstance | null>(null);
</script>

<template>
  <WajubProvider>
    <CardComponent
      :session-id="sessionId"
      @instance="(c) => { cardRef = c; }"
    />
    <button @click="cardRef && confirm(cardRef)">Pay</button>
  </WajubProvider>
</template>

API

| Export | Description | |--------|-------------| | WajubProvider | Loads the checkout SDK once for the subtree | | CheckoutEmbed | Full hosted checkout inline | | CardComponent | Card fields only | | PaymentComponent | Payment method selector + form | | AddressComponent | Shipping / billing address | | MobileMoneyComponent | Mobile money form | | WalletComponent | Apple Pay / Google Pay | | useWajub() | Access loaded SDK (throws while loading) | | useWajubOptional() | Safe access (null during SSR) | | useLoadWajub() | Trigger SDK load manually | | useConfirmPayment() | Submit a mounted component |

Nuxt 3

• Wrap checkout pages with <WajubProvider> inside <ClientOnly>.
• Create the session on your server — never expose sk_... to the client.

Documentation

Integration guide: docs.wajub.com/tools/components/vue

License

MIT