TypeScript

Type definitions shipped with @wajub/js and framework packages — no extra @types package required.

16 min read

Types are included automatically when you install @wajub/js or any framework package.

Install

npm install @wajub/js
npm install @wajub/react @wajub/js   # React types via @wajub/js

Core imports

typescript

import {
loadWajub,
mount,
type WajubRuntime,
type CheckoutInstance,
type ComponentInstance,
type ComponentType,
type WajubError,
type EmbeddedConfig,
type PopupConfig,
type PopupInstance,
type ComponentConfig,
type AppearanceConfig,
type AppearanceVariables,
type CheckoutLayout,
type CheckoutState,
type ConfirmPaymentOptions,
type CreatePaymentParams,
} from '@wajub/js';

Deferred load

typescript

import { loadWajub } from '@wajub/js/pure';

const rt = await loadWajub();
if (!rt) return; // SSR

const client = rt.Wajub.session(sessionId);
const checkout = client.mount('#checkout', { onSuccess: (txn) => {} });

SSR (Next.js, Nuxt, SvelteKit)

loadWajub() returns null on the server. Mount only in the browser:

tsx

'use client';
import { useEffect, useRef } from 'react';
import { loadWajub, type CheckoutInstance } from '@wajub/js';

export function Checkout({ sessionId }: { sessionId: string }) {
const ref = useRef<HTMLDivElement>(null);
const instance = useRef<CheckoutInstance | null>(null);

useEffect(() => {
  loadWajub().then((rt) => {
    if (!rt || !ref.current) return;
    instance.current = rt.wajub.mount(ref.current, { sessionId });
  });
  return () => instance.current?.destroy();
}, [sessionId]);

return <div ref={ref} style={{ minHeight: 480 }} />;
}

Framework packages handle this via WajubProvider — prefer them in React/Vue/Svelte apps.

Component instance typing

tsx

import type { ComponentInstance } from '@wajub/js';
import { useRef } from 'react';
import { CardComponent, useConfirmPayment } from '@wajub/react';

const cardRef = useRef<ComponentInstance | null>(null);
const confirm = useConfirmPayment(sessionId);

CDN without npm

Optional IDE reference (no runtime types in build):

/// <reference path="https://js.wajub.com/wajub-checkout.d.ts" />

WajubError

typescript

checkout.onError?.((err: WajubError) => {
console.log(err.code);     // e.g. 'payment_failed'
console.log(err.message);  // human-readable
console.log(err.retryable); // boolean
});

Common codes: payment_failed, session_expired, session_terminal, validation_error, method_unavailable, missing_publishable_key.

Key config types

Type	Used by
`EmbeddedConfig`	`mount()`, `CheckoutEmbed`
`PopupConfig`	`open()` — adds `width`, `height`, `closeOnOverlay`, `closeOnEscape`, `closeOnSuccess`
`ComponentConfig`	`components()`, payment field components
`AppearanceConfig`	All embeds — see Appearance
`AppearanceVariables`	`appearance.variables` design tokens
`CheckoutLayout`	`classic` · `compact` · `tabs` · `accordion`

Full field lists: API reference.

See Troubleshooting for fixes.

Edit this page on GitHub

Need help?

Contact support GitHub Discussions Service Status

Core imports

typescript

import {
loadWajub,
mount,
type WajubRuntime,
type CheckoutInstance,
type ComponentInstance,
type ComponentType,
type WajubError,
type EmbeddedConfig,
type PopupConfig,
type PopupInstance,
type ComponentConfig,
type AppearanceConfig,
type AppearanceVariables,
type CheckoutLayout,
type CheckoutState,
type ConfirmPaymentOptions,
type CreatePaymentParams,
} from '@wajub/js';

import { loadWajub } from '@wajub/js/pure'; const rt = await loadWajub(); if (!rt) return; // SSR const client = rt.Wajub.session(sessionId); const checkout = client.mount('#checkout', { onSuccess: (txn) => {} });

SSR (Next.js, Nuxt, SvelteKit)

loadWajub() returns null on the server. Mount only in the browser:

tsx

'use client';
import { useEffect, useRef } from 'react';
import { loadWajub, type CheckoutInstance } from '@wajub/js';

export function Checkout({ sessionId }: { sessionId: string }) {
const ref = useRef<HTMLDivElement>(null);
const instance = useRef<CheckoutInstance | null>(null);

useEffect(() => {
  loadWajub().then((rt) => {
    if (!rt || !ref.current) return;
    instance.current = rt.wajub.mount(ref.current, { sessionId });
  });
  return () => instance.current?.destroy();
}, [sessionId]);

return <div ref={ref} style={{ minHeight: 480 }} />;
}

Framework packages handle this via WajubProvider — prefer them in React/Vue/Svelte apps.

import type { ComponentInstance } from '@wajub/js'; import { useRef } from 'react'; import { CardComponent, useConfirmPayment } from '@wajub/react'; const cardRef = useRef<ComponentInstance | null>(null); const confirm = useConfirmPayment(sessionId);

WajubError

typescript

checkout.onError?.((err: WajubError) => {
console.log(err.code);     // e.g. 'payment_failed'
console.log(err.message);  // human-readable
console.log(err.retryable); // boolean
});

Common codes: payment_failed, session_expired, session_terminal, validation_error, method_unavailable, missing_publishable_key.

Key config types

Type	Used by
`EmbeddedConfig`	`mount()`, `CheckoutEmbed`
`PopupConfig`	`open()` — adds `width`, `height`, `closeOnOverlay`, `closeOnEscape`, `closeOnSuccess`
`ComponentConfig`	`components()`, payment field components
`AppearanceConfig`	All embeds — see Appearance
`AppearanceVariables`	`appearance.variables` design tokens
`CheckoutLayout`	`classic` · `compact` · `tabs` · `accordion`