@wajub/svelte

Wajub Components for Svelte.

Install

npm install @wajub/svelte @wajub/js

Quick start — hosted checkout

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

  export let sessionId: string;
</script>

<WajubProvider>
  <CheckoutEmbed
    {sessionId}
    onSuccess={() => (window.location.href = "/thanks")}
  />
</WajubProvider>

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

Components

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

  export let sessionId: string;

  const confirm = useConfirmPayment(sessionId);
  let cardRef: ComponentInstance | null = null;
</script>

<WajubProvider>
  <CardComponent {sessionId} on:instance={(e) => { cardRef = e.detail; }} />
  <button on:click={() => cardRef && confirm(cardRef)}>Pay</button>
</WajubProvider>

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 | | useWajubOptional() | Safe access (null during SSR) | | useConfirmPayment() | Submit a mounted component |

SvelteKit

• Use components in +page.svelte with export const ssr = false or inside a client-only wrapper.
• Create the session on your server — never expose sk_... to the client.

Documentation

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

License

MIT