@kashybee/ui-widget

🎨 Beautiful, framework-agnostic UI widget for Kashybee voucher payments

Features •
Installation •
Quick Start •
Frameworks •
Configuration •
Theming

---

✨ Features

| Feature | Description |
| ------------------------- | ---------------------------------------------------------------- |
| 🎨 Beautiful Design | Premium, modern UI matching Kashybee's brand identity |
| 🔌 Framework Agnostic | First-class support for React, Vue 3, and Vanilla JS |
| 🎯 Zero CSS Config | Styles are automatically injected—no manual imports needed |
| 📱 Mobile Responsive | Optimized modal experience on all screen sizes |
| 💳 Dual Flows | Separate "Add Funds" and "Withdraw" modal experiences |
| 🎛️ Fully Customizable | Theme support for colors, fonts, and more |
| 🔒 Secure | All transactions go through your secure backend |
| 📦 Lightweight | Minimal bundle size with no heavy dependencies |

---

📦 Installation

``bash


npm

npm install @kashybee/ui-widget

yarn

yarn add @kashybee/ui-widget

pnpm

pnpm add @kashybee/ui-widget
`

---

🚀 Quick Start

$3

`jsx
import {
KashybeeAddFundsButton,
KashybeeWithdrawButton,
} from "@kashybee/ui-widget/react";

function App() {
return (


);
}

export default App;
`

$3

`vue



`

$3

`javascript
import { createKashybeeWidget } from "@kashybee/ui-widget";

const widget = createKashybeeWidget({
addFundsUrl: "/api/add-funds",
withdrawFundsUrl: "/api/withdraw-funds",
userId: "user-123",
walletCurrency: "USD",
country: "US",
onSuccess: (response) => console.log("✅ Success:", response),
onError: (error) => console.error("❌ Error:", error),
});

// Create separate Add Funds and Withdraw buttons
const container = document.getElementById("kashybee-container");

const addBtn = widget.createButton("Add Funds", "add");
const withdrawBtn = widget.createButton("Withdraw Funds", "withdraw");

container.appendChild(addBtn);
container.appendChild(withdrawBtn);
`

$3

`html











`

$3

For environments that don't support ES modules, use the UMD build:

`html












`

---

🖼️ Frameworks

$3

The React package exports specialized components and a hook for custom implementations:

#### Components

| Component | Description |
| ------------------------ | -------------------------------------------- |
| KashybeeAddFundsButton | Pre-configured button for adding funds |
| KashybeeWithdrawButton | Pre-configured button for withdrawing funds |
| KashybeeButton | Generic button with configurable mode prop |

#### Hook: useKashybeeWidget

For complete control, use the hook to build custom UI:

`jsx
import { useKashybeeWidget } from "@kashybee/ui-widget/react";

function CustomPaymentUI() {
const { open, close } = useKashybeeWidget({
addFundsUrl: "/api/add-funds",
withdrawFundsUrl: "/api/withdraw-funds",
userId: "user-123",
onSuccess: (response) => {
console.log("Transaction complete:", response);
},
});

return (



);
}
`

#### Custom Children

You can also use your own button design with the component:

`jsx
addFundsUrl="/api/add-funds"
withdrawFundsUrl="/api/withdraw-funds"
userId="user-123"
>
Add Funds with Kashybee

`

---

$3

The Vue package exports a single flexible component:

`vue



`

#### Props

| Prop | Type | Default | Description |
| ------------------ | --------------------- | ------- | ------------------------------------------ |
| mode | 'add' \| 'withdraw' | 'add' | Modal mode to open |
| addFundsUrl | string | — | Your server endpoint for adding funds |
| withdrawFundsUrl | string | — | Your server endpoint for withdrawing funds |
| userId | string | — | User ID for the transaction |
| walletCurrency | string | 'USD' | Default currency code |
| country | string | — | User's country code |
| buttonText | string | Auto | Custom button text |

#### Events

| Event | Payload | Description |
| ---------- | --------------------- | ------------------------------- |
| @success | TransactionResponse | Fired on successful transaction |
| @error | Error | Fired when an error occurs |
| @open | — | Fired when modal opens |
| @close | — | Fired when modal closes |

---

$3

Auto-initialize widgets using HTML attributes only:

`html



data-kashybee-widget
data-mode="add"
data-add-funds-url="/api/add-funds"
data-withdraw-funds-url="/api/withdraw-funds"
data-user-id="user-123"
data-wallet-currency="USD"
data-button-text="Add Funds"
>