> ## Documentation Index
> Fetch the complete documentation index at: https://docs.busha.io/llms.txt
> Use this file to discover all available pages before exploring further.

# On-Ramp Integration

> Integrate the On-Ramp widget to let users buy crypto on your application.

This example shows you how to integrate the Busha On-Ramp widget to let users buy cryptocurrency directly in your application.

## Use Cases

* E-commerce site accepting crypto payments
* Wallet app letting users buy crypto
* Gaming platform selling in-game crypto assets

## Basic Integration

### Simple Button Integration

The quickest way to integrate the On-Ramp widget is with a button that opens the widget in a new window:

```html theme={null}
<button
  onclick="window.open('https://sandbox.buy.busha.io/?publicKey=YOUR_PUBLIC_KEY', '_blank')"
>
  Buy Crypto with Busha
</button>
```

***

## Live Demo

Try the On-Ramp widget below to see how it works in action:

<Tabs>
  <Tab title="Nigeria (NGN)">
    <iframe src="https://sandbox.buy.busha.io/?publicKey=YOUR_PUBLIC_KEY&side=buy&fiatCurrency=NGN&cryptoAsset=BTC&fiatAmount=50000" width="100%" height="700px" style={{ border: "1px solid #e5e7eb", borderRadius: "8px" }} title="Busha On-Ramp Widget - Nigeria" />
  </Tab>

  <Tab title="Kenya (KES)">
    <iframe src="https://sandbox.buy.busha.io/?publicKey=YOUR_PUBLIC_KEY&side=buy&fiatCurrency=KES&cryptoAsset=BTC&fiatAmount=5000" width="100%" height="700px" style={{ border: "1px solid #e5e7eb", borderRadius: "8px" }} title="Busha On-Ramp Widget - Kenya" />
  </Tab>
</Tabs>

<Note>
  **Demo Note:** This is a live sandbox widget. You can interact with it to see
  the complete user flow, but no real money will be processed.
</Note>

***

### Iframe Integration

For a more embedded experience, use an iframe:

```html theme={null}
<iframe
  src="https://sandbox.buy.busha.io/?publicKey=YOUR_PUBLIC_KEY"
  width="100%"
  height="700px"
  style="border: 1px solid #e5e7eb; border-radius: 8px;"
  title="Busha On-Ramp Widget"
></iframe>
```

***

## Pre-filled Integration Examples

<Tabs>
  <Tab title="Nigeria (NGN)">
    ### Buy Bitcoin with 50,000 NGN

    ```html theme={null}
        <button
          onclick="window.open('https://sandbox.buy.busha.io/?publicKey=YOUR_PUBLIC_KEY&side=buy&cryptoAsset=BTC&fiatCurrency=NGN&fiatAmount=50000&redirectUrl=https://your-app.com/success', '_blank')"
        >
          Buy Bitcoin with NGN
        </button>
    ```

    ### Buy to Specific Wallet Address

    ```html theme={null}
    <button
      onclick="window.open('https://sandbox.buy.busha.io/?publicKey=YOUR_PUBLIC_KEY&cryptoAsset=BTC&address=bc1qyourbitcoinaddress&network=BTC&fiatCurrency=NGN&redirectUrl=https://your-app.com/success', '_blank')"
    >
      Buy Bitcoin to My Wallet
    </button>
    ```
  </Tab>

  <Tab title="Kenya (KES)">
    ### Buy Bitcoin with 5,000 KES

    ```html theme={null}
        <button
          onclick="window.open('https://sandbox.buy.busha.io/?publicKey=YOUR_PUBLIC_KEY&side=buy&cryptoAsset=BTC&fiatCurrency=KES&fiatAmount=5000&redirectUrl=https://your-app.com/success', '_blank')"
        >
          Buy Bitcoin with KES
        </button>
    ```

    ### Buy USDT with M-Pesa

    ```html theme={null}
    <button
      onclick="window.open('https://sandbox.buy.busha.io/?publicKey=YOUR_PUBLIC_KEY&cryptoAsset=USDT&network=TRX&fiatCurrency=KES&fiatAmount=10000&redirectUrl=https://your-app.com/success', '_blank')"
    >
      Buy USDT with M-Pesa
    </button>
    ```
  </Tab>
</Tabs>

***

## Configuration Parameters

<table style={{ width: "100%", borderCollapse: "collapse" }}>
  <thead>
    <tr>
      <th style={{ width: "25%", textAlign: "left", padding: "12px" }}>
        Parameter
      </th>

      <th style={{ width: "25%", textAlign: "left", padding: "12px" }}>
        Required
      </th>

      <th style={{ width: "60%", textAlign: "left", padding: "12px" }}>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td style={{ padding: "12px" }}>publicKey</td>
      <td style={{ padding: "12px" }}>Yes</td>
      <td style={{ padding: "12px" }}>Your Busha Public API Key</td>
    </tr>

    <tr>
      <td style={{ padding: "12px" }}>cryptoAsset</td>
      <td style={{ padding: "12px" }}>No</td>

      <td style={{ padding: "12px" }}>
        Cryptocurrency to buy (e.g., BTC, ETH, USDT)
      </td>
    </tr>

    <tr>
      <td style={{ padding: "12px" }}>network</td>
      <td style={{ padding: "12px" }}>No</td>

      <td style={{ padding: "12px" }}>
        Blockchain network (e.g., BTC, ERC20, POLYGON)
      </td>
    </tr>

    <tr>
      <td style={{ padding: "12px" }}>address</td>
      <td style={{ padding: "12px" }}>No</td>
      <td style={{ padding: "12px" }}>Pre-fill destination wallet address</td>
    </tr>

    <tr>
      <td style={{ padding: "12px" }}>fiatCurrency</td>
      <td style={{ padding: "12px" }}>No</td>

      <td style={{ padding: "12px" }}>
        Fiat currency (NGN for Nigeria, KES for Kenya)
      </td>
    </tr>

    <tr>
      <td style={{ padding: "12px" }}>fiatAmount</td>
      <td style={{ padding: "12px" }}>No</td>
      <td style={{ padding: "12px" }}>Amount in fiat currency</td>
    </tr>

    <tr>
      <td style={{ padding: "12px" }}>cryptoAmount</td>
      <td style={{ padding: "12px" }}>No</td>

      <td style={{ padding: "12px" }}>
        Amount in crypto (ignored if fiatAmount is set)
      </td>
    </tr>

    <tr>
      <td style={{ padding: "12px" }}>redirectUrl</td>
      <td style={{ padding: "12px" }}>No</td>

      <td style={{ padding: "12px" }}>
        URL to redirect after transaction completion
      </td>
    </tr>
  </tbody>
</table>

***

## React Component Examples

<Tabs>
  <Tab title="Nigeria (NGN)">
    ```jsx theme={null}
        import React from "react";

        function BuyBitcoinButton() {
          const openOnRamp = () => {
            const params = new URLSearchParams({
              publicKey: "YOUR_PUBLIC_KEY",
              cryptoAsset: "BTC",
              fiatCurrency: "NGN",
              fiatAmount: "50000",
              redirectUrl: "https://your-app.com/success",
            });

            window.open(`https://sandbox.buy.busha.io/?${params.toString()}`, "_blank");
          };

          return <button onClick={openOnRamp}>Buy Bitcoin with Naira</button>;
        }

        export default BuyBitcoinButton;

    ```
  </Tab>

  <Tab title="Kenya (KES)">
    ```jsx theme={null}
        import React from "react";

        function BuyBitcoinButton() {
          const openOnRamp = () => {
            const params = new URLSearchParams({
              publicKey: "YOUR_PUBLIC_KEY",
              cryptoAsset: "BTC",
              fiatCurrency: "KES",
              fiatAmount: "5000",
              redirectUrl: "https://your-app.com/success",
            });

            window.open(`https://sandbox.buy.busha.io/?${params.toString()}`, "_blank");
          };

          return <button onClick={openOnRamp}>Buy Bitcoin with KES</button>;
        }

        export default BuyBitcoinButton;
    ```
  </Tab>
</Tabs>

***

## Complete Integration Flow

<Steps>
  <Step title="User Initiates Purchase">
    User clicks "Buy Crypto" button in your app
  </Step>

  <Step title="Redirect to On-Ramp Widget">
    Your app opens the Busha On-Ramp widget with pre-filled parameters
  </Step>

  <Step title="User Authentication">
    User logs in to Busha (or signs up), completes KYC if needed
  </Step>

  <Step title="User Reviews and Confirms">
    User reviews transaction details including rate and fees, then confirms the
    purchase
  </Step>

  <Step title="User Selects Payment Method">
    User chooses their preferred payment method: - **Nigeria**: Bank transfer -
    **Kenya**: M-Pesa or mobile money
  </Step>

  <Step title="User Completes Payment">
    User completes the payment through their selected method
  </Step>

  <Step title="Busha Processes Purchase">
    Once payment is confirmed, Busha processes the crypto purchase and sends it
    to the user's wallet
  </Step>
</Steps>

## Learn More

* [On-Ramp Widget Overview](/overview/on-ramp-widget) - Understand how the widget works
* [Integration Guide](/guides/widgets/integrate-on-ramp) - Detailed integration steps
* [Supported Currencies](/guides/reference/supported-currencies) - See all supported assets
* [Webhooks Setup](/guides/webhooks/setup) - Monitor transactions in real-time