@swipelux/onramp-react

React component for integrating the Swipelux On-Ramp Widget into your application.

Installation

npm install @swipelux/onramp-react
# or
yarn add @swipelux/onramp-react
# or
pnpm add @swipelux/onramp-react

Usage

import { SwipeluxWidget } from '@swipelux/onramp-react';

function App() {
  return (
    <SwipeluxWidget
      apiKey="123e4567-e89b-12d3-a456-426655440000"
      availablePayCurrency="USD"
      availableReceiveCurrency="BTC"
    />
  );
}

Props

Required Props

• apiKey: Your Swipelux API key in UUID format

Optional Props

Basic Configuration

• widgetUrl: URL where the widget is hosted (defaults to https://app.swipelux.com)
• orderToken: Order token for prepared orders (e.g., "ord_123xyz")
• paymentChannel: Preferred payment method ("CARD_PAYMENT" | "WIRE_TRANSFER" | "APPLE_PAY" | "SKRILL")
• availablePayCurrency: Available payment currency code (e.g., "USD")
• availableReceiveCurrency: Available receive currency. Can be a string (e.g., "BTC") or an object (e.g., { code: "ETH", protocol: "ERC20" })

Advanced Configuration

• smartContractData: NFT purchase configuration

  {
    imgUrl?: string;
    name?: string;
    [key: string]: unknown;
  }

• defaultValues: Pre-filled form values

  {
    targetAddress?: { value: string; editable: boolean };
    phone?: { value: string; editable: boolean };
    email?: { value: string; editable: boolean };
    fiatAmount?: number;
  }

• colors: Theme color customization

  {
    main?: Color;
    background?: Color;
    processing?: Color;
    warning?: Color;
    success?: Color;
    link?: Color;
  }

• externalId: External ID string or async resolver function
• signature: Branding configuration

  {
    text: string;
    logoUrl?: string;
    href?: string;
  }

• forceNewTransaction: Force creation of a new transaction (boolean)
• closeOnSuccess: Auto-close widget on successful transaction (boolean)

Callbacks

• onMessage: Callback function for widget messages
• onClose: Callback function when widget is closed

Browser Support

The widget requires a browser environment as it uses an iframe for rendering. While server-side rendering is supported, the widget will only be functional on the client side.

Development

# Install dependencies
pnpm install

# Build the package
pnpm build

# Development with watch mode
pnpm dev

# Lint the code
pnpm lint

License

MIT

For more information, visit Swipelux Documentation.