How to Install the Bando Spending Widget

‍

What is the Bando Spending Widget?

The Bando Spending Widget is a set of prebuilt UI components designed to make integration simple and developer-friendly. It allows you to:

• Accept payments with tokens and stablecoins.
  
  
• Customize styles to match your application’s design.
  
  
• Integrated wallet management UI (or connect your own with Wagmi or Solana Adapter).
  
  
• Fully localized interface, adapting automatically to your users’ preferred language.
  
  
• Compatible with multiple frontend frameworks: React, Next.js, Vue, Nuxt.js, Svelte, Remix, Gatsby, Vite, CRA, RainbowKit.
  
  

In short, it’s a ready-to-use payments solution that saves weeks of development and helps you onboard more users.

Installation

Install the Bando Spending Widget with your preferred package manager:

# npm

npm install @bandohq/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

‍

# yarn

yarn add @bandohq/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

‍

# pnpm

pnpm add @bandohq/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

‍

# bun

bun add @bandohq/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

‍

Getting Started

Once installed, integrating the widget into your app takes just two steps:

1. Import and configure the widget

import { BandoWidget, WidgetConfig } from '@bandohq/widget';

‍

const widgetConfig: WidgetConfig = {

  theme: {

    container: {

      border: '1px solid rgb(234, 234, 234)',

      borderRadius: '16px',

    },

  },

};

‍

2. Render the component

export const WidgetPage = () => {

  return <BandoWidget integrator="<your_app_name>" config={widgetConfig} />;

};

‍

👉 Replace "<your_app_name>" with the identifier of your app.

Next Steps

Once the widget is running, you can further customize it:

• Widget configuration – adjust behavior and settings.
  
  
• Localization – support your users’ preferred language.
  
  
• Custom styling – align the widget UI with your brand identity.
  
  
• Wallet management – use the built-in wallet support or integrate your own.
  
  

Check the official guides for frameworks like Next.js and Svelte to speed up your integration.

✅ With this guide, you now have everything you need to integrate the Bando Spending Widget into your application and give your users a seamless crypto payment experience.

Want to speak with the sales team? Visit our Business section.