Vue

Installation

npm i @sanwohq/vue @sanwohq/paystack

Quick start

main.ts

import { createApp } from "vue";
import { SanwoPlugin } from "@sanwohq/vue";
import { paystackProvider } from "@sanwohq/paystack";
import App from "./App.vue";

const app = createApp(App);

app.use(SanwoPlugin, {
  provider: paystackProvider,
  publicKey: "pk_test_xxxxxxxxxxxx",
});

app.mount("#app");

Checkout.vue

<script setup>
import { useSanwoCheckout } from "@sanwohq/vue";

const { checkout, isLoading, error, result } = useSanwoCheckout();

async function pay() {
  const res = await checkout({
    amount: 500000,
    currency: "NGN",
    customer: { email: "customer@example.com" },
  });

  if (res.status === "successful") {
    console.log("Paid!", res.reference);
  }
}
</script>

<template>
  <button @click="pay" :disabled="isLoading">
    {{ isLoading ? "Processing…" : "Pay ₦5,000" }}
  </button>
</template>

SanwoPlugin

Vue plugin that initializes the Sanwo instance and provides it to all components.

app.use(SanwoPlugin, {
  provider: paystackProvider,
  publicKey: "pk_test_xxxxxxxxxxxx",
  debug: false,
  timeout: 120,
  containerId: "checkout-container",
});

Options

Option	Type	Required	Default	Description
provider	SanwoProviderDefinition	Yes	—	Imported provider
publicKey	string	Yes	—	Your provider public key
debug	boolean	No	false	Enable debug logging
timeout	number	No	120	Checkout timeout in seconds
containerId	string	No	—	Render checkout into a specific DOM element

useSanwoCheckout()

The primary composable for triggering payments. Returns reactive refs.

const { checkout, isLoading, error, result, reset } = useSanwoCheckout();

Return values

Value	Type	Description
checkout	(options: CheckoutOptions) => Promise<CheckoutResult>	Start a checkout
isLoading	Ref<boolean>	true while checkout is in progress
error	Ref<SanwoError | null>	Set if checkout threw
result	Ref<CheckoutResult | null>	Last checkout result
reset	() => void	Clear error and result

useSanwo()

Low-level composable for direct access to the Sanwo instance.

import { useSanwo } from "@sanwohq/vue";

const sanwo = useSanwo();

Returns the raw SanwoInstance. Use this when you need event listeners or manual control:

const sanwo = useSanwo();

onMounted(() => {
  const unsub = sanwo.on("success", (data) => {
    analytics.track("payment_success", { ref: data.reference });
  });
  onUnmounted(unsub);
});

SanwoButton

A ready-made button component with built-in loading state.

<script setup>
import { SanwoButton } from "@sanwohq/vue";

function onSuccess(result) {
  console.log("Paid!", result.reference);
}
</script>

<template>
  <SanwoButton
    :checkout-options="{
      amount: 500000,
      currency: 'NGN',
      customer: { email: 'customer@example.com' },
    }"
    @success="onSuccess"
    @error="(err) => console.error(err)"
    loading-text="Processing…"
  >
    Pay ₦5,000
  </SanwoButton>
</template>

Props & events

Prop	Type	Required	Description
checkoutOptions	CheckoutOptions	Yes	What to charge
loadingText	string	No	Button text while loading (default: “Processing…”)

Event	Payload	Description
success	CheckoutResult	Emitted on successful payment
error	Error	Emitted on failure

Uses a scoped slot for custom content — v-slot="{ isLoading }" gives you access to loading state.

Nuxt

Register the plugin in a Nuxt plugin file:

plugins/sanwo.client.ts

import { SanwoPlugin } from "@sanwohq/vue";
import { paystackProvider } from "@sanwohq/paystack";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(SanwoPlugin, {
    provider: paystackProvider,
    publicKey: "pk_test_xxxxxxxxxxxx",
  });
});

pages/checkout.vue

<script setup>
import { useSanwoCheckout } from "@sanwohq/vue";

const { checkout, isLoading } = useSanwoCheckout();
</script>

<template>
  <button
    @click="checkout({
      amount: 500000,
      currency: 'NGN',
      customer: { email: 'customer@example.com' },
    })"
    :disabled="isLoading"
  >
    {{ isLoading ? "Processing…" : "Pay ₦5,000" }}
  </button>
</template>

Full example

<script setup>
import { SanwoButton } from "@sanwohq/vue";

function handleSuccess(result) {
  window.location.href = `/receipt?ref=${result.reference}`;
}
</script>

<template>
  <h1>My Store</h1>
  <SanwoButton
    :checkout-options="{
      amount: 500000,
      currency: 'NGN',
      customer: { email: 'customer@example.com' },
      reference: `order_${Date.now()}`,
    }"
    @success="handleSuccess"
    @error="(err) => alert(err.message)"
  >
    Pay ₦5,000
  </SanwoButton>
</template>