Svelte

Installation

npm i @sanwohq/svelte @sanwohq/paystack

Quick start

+layout.svelte

<script>
  import { createSanwoContext } from "@sanwohq/svelte";
  import { paystackProvider } from "@sanwohq/paystack";

  createSanwoContext({
    provider: paystackProvider,
    publicKey: "pk_test_xxxxxxxxxxxx",
  });
</script>

<slot />

Checkout.svelte

<script>
  import { createSanwoCheckout } from "@sanwohq/svelte";

  const store = createSanwoCheckout();

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

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

<button on:click={pay} disabled={$store.isLoading}>
  {$store.isLoading ? "Processing…" : "Pay ₦5,000"}
</button>

createSanwoContext(config)

Initializes the Sanwo instance and sets it in Svelte context. Call this in your root layout or a parent component.

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

The instance is automatically destroyed when the component unmounts.

Config 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

createSanwoCheckout()

Creates a Svelte store with checkout state and methods. Must be called inside a component that is a descendant of the component that called createSanwoContext().

const store = createSanwoCheckout();

Store values (reactive via $store)

Value	Type	Description
$store.isLoading	boolean	true while checkout is in progress
$store.error	SanwoError | null	Set if checkout threw
$store.result	CheckoutResult | null	Last checkout result

Store methods

Method	Description
store.checkout(options)	Promise<CheckoutResult> — start a checkout
store.reset()	Clear error and result

getSanwoContext()

Low-level access to the raw Sanwo instance. Use this when you need event listeners or manual control.

import { getSanwoContext } from "@sanwohq/svelte";

const sanwo = getSanwoContext();

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

// sanwo.providerId, sanwo.currentState, sanwo.close()

SvelteKit

src/routes/+layout.svelte

<script>
  import { createSanwoContext } from "@sanwohq/svelte";
  import { paystackProvider } from "@sanwohq/paystack";

  createSanwoContext({
    provider: paystackProvider,
    publicKey: "pk_test_xxxxxxxxxxxx",
  });
</script>

<slot />

src/routes/checkout/+page.svelte

<script>
  import { createSanwoCheckout } from "@sanwohq/svelte";
  import { goto } from "$app/navigation";

  const store = createSanwoCheckout();

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

    if (result.status === "successful") {
      goto(`/receipt?ref=${result.reference}`);
    }
  }
</script>

<button on:click={pay} disabled={$store.isLoading}>
  {$store.isLoading ? "Processing…" : "Pay ₦5,000"}
</button>

Full example

<script>
  import { createSanwoCheckout } from "@sanwohq/svelte";

  const store = createSanwoCheckout();

  let email = "customer@example.com";

  async function pay() {
    const result = await store.checkout({
      amount: 500000,
      currency: "NGN",
      customer: { email },
      reference: `order_${Date.now()}`,
    });

    if (result.status === "successful") {
      window.location.href = `/receipt?ref=${result.reference}`;
    }
  }
</script>

<h1>My Store</h1>

<label>
  Email
  <input bind:value={email} type="email" />
</label>

<button on:click={pay} disabled={$store.isLoading}>
  {$store.isLoading ? "Processing…" : "Pay ₦5,000"}
</button>

{#if $store.error}
  <p style="color: red">{$store.error.message}</p>
{/if}