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

# Quick Start

> Get started with Rampnow integration in minutes

<Note>
  Welcome to the Rampnow Quick Start Guide! This guide will walk you through integrating Rampnow's on-ramp and off-ramp services into your platform.
</Note>

## Choose Your Integration Method

Rampnow offers three powerful integration options to seamlessly add cryptocurrency on/off-ramp services to your platform:

<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1rem'}}>
  <Card title="Hosted Mode Integration" icon="browser" href="#hosted-mode-integration">
    Take full control of the user journey. The entire on/off ramp experience is managed by you, giving you complete customization and branding control.
  </Card>

  <Card title="Widget Mode Integration" icon="window" href="#widget-mode-integration">
    Embed Rampnow's on/off ramp directly into your application for a seamless, plug-and-play user experience with minimal setup.
  </Card>

  <Card title="Rampnow SDK" icon="cube" href="#rampnow-sdk">
    Install the `@rampnow/sdk` npm package for a developer-friendly integration with TypeScript support, event handling, and a React hook.
  </Card>
</div>

Both methods ensure your users can buy and sell cryptocurrencies effortlessly, with access to multiple payment options and supported assets.

## Hosted Mode Integration

<Info>
  In hosted mode, you control the entire user journey through the on/off ramp process. This gives you maximum flexibility for customization and branding.
</Info>

### What is Hosted Mode?

Hosted mode allows you to integrate Rampnow's services while maintaining complete control over the user interface and experience. Your users interact with your platform throughout the entire transaction flow.

### Key Features

<AccordionGroup>
  <Accordion title="Full Customization" icon="palette">
    Design and customize every aspect of the user interface to match your brand identity and user experience standards.
  </Accordion>

  <Accordion title="Complete Control" icon="sliders">
    Manage the entire transaction flow, from initiation to completion, within your own application environment.
  </Accordion>

  <Accordion title="Flexible Integration" icon="puzzle-piece">
    Integrate Rampnow's API endpoints directly into your backend systems for maximum flexibility.
  </Accordion>
</AccordionGroup>

### Getting Started with Hosted Mode

<Steps>
  <Step title="Obtain API Credentials">
    Contact our sales team or log into the Partner Dashboard to generate your API keys and secret.
  </Step>

  <Step title="Set Up Authentication">
    Implement the authentication flow using your API credentials. See our [Authentication Guide](/api-reference/authentication) for details.
  </Step>

  <Step title="Integrate API Endpoints">
    Use our API endpoints to create quotes, initiate orders and track transaction status.
  </Step>

  <Step title="Build Your UI">
    Design and implement your custom user interface that calls our API endpoints.
  </Step>

  <Step title="Test in Sandbox">
    Thoroughly test your integration in our Sandbox environment before going live.
  </Step>
</Steps>

<Card title="View Hosted Mode Documentation" icon="book" href="/api-reference/hosted-mode">
  Explore detailed documentation for Hosted Mode integration
</Card>

***

## Widget Mode Integration

<Info>
  Widget mode provides a pre-built, embeddable solution that you can add to your application with minimal code. Perfect for quick integration.
</Info>

### What is Widget Mode?

Widget mode offers a ready-to-use interface that you can embed directly into your application. Rampnow handles the UI and transaction flow while you maintain control over when and where the widget appears.

### Key Features

<AccordionGroup>
  <Accordion title="Quick Setup" icon="bolt">
    Get up and running in minutes with just a few lines of code. No complex backend integration required.
  </Accordion>

  <Accordion title="Pre-Built UI" icon="window-maximize">
    Use our professionally designed, mobile-responsive interface that's ready to go out of the box.
  </Accordion>

  <Accordion title="Automatic Updates" icon="arrows-rotate">
    Benefit from automatic updates and improvements to the widget without any code changes on your end.
  </Accordion>

  <Accordion title="Customizable Appearance" icon="paintbrush">
    Customize colors, themes and branding to match your application's look and feel.
  </Accordion>
</AccordionGroup>

### Getting Started with Widget Mode

<Steps>
  <Step title="Get Your App Key">
    Obtain your unique App key from the Partner Dashboard.
  </Step>

  <Step title="Set Up the Container">
    Define a container element in your HTML where the widget will be embedded.

    ```html theme={null}
    <div id="ramp-container"></div>
    ```
  </Step>

  <Step title="Create the Rampnow URL">
    Here’s an example of a full URL with all the parameters.

    ```html theme={null}
    https://app.rampnow.io/order/quote?apiKey=YOUR_API_KEY&srcCurrency=EUR&srcAmount=250&dstCurrency=BTC&walletAddress=0xYourWalletAddress&dstCurrency=BTC
    ```
  </Step>

  <Step title="Initialize the Widget">
    Initialize widget by passing the constructed Rampnow widget URL as below.

    ```html theme={null}
    <iframe src="https://app.rampnow.io/order/quote?apiKey=YOUR_API_KEY&srcCurrency=EUR&srcAmount=250&dstCurrency=BTC&walletAddress=0xYourWalletAddress&dstCurrency=BTC" title="On Ramp"</iframe>
    ```
  </Step>
</Steps>

<Card title="View Widget Mode Documentation" icon="book" href="/integration/widget-mode">
  Explore detailed documentation for Widget Mode integration
</Card>

***

## Rampnow SDK

<Info>
  The Rampnow SDK is the recommended way to integrate the widget with full programmatic control, event handling, and TypeScript support.
</Info>

### What is the Rampnow SDK?

The [`@rampnow/sdk`](https://www.npmjs.com/package/@rampnow/sdk) package wraps the widget integration into a developer-friendly JavaScript/TypeScript SDK. It supports overlay, embedded, and redirect modes, and ships with a React hook for seamless use in React applications.

### Quick Example

```javascript theme={null}
import { RampnowSdk, RampnowEventType } from '@rampnow/sdk'

const sdk = new RampnowSdk({
  apiKey: 'pk_live_YOUR_API_KEY',
  srcCurrency: 'EUR',
  dstCurrency: 'ETH',
  walletAddress: '0xYourWalletAddress',
})

sdk
  .on(RampnowEventType.ORDER_COMPLETED, (e) => {
    console.log('Order completed:', e.payload.orderUid)
  })
  .init()
```

### Key Features

<AccordionGroup>
  <Accordion title="Multiple Integration Modes" icon="layer-group">
    Choose between **Overlay** (full-screen modal), **Embedded** (inline in your layout), or **Redirect** (URL for native apps and email links).
  </Accordion>

  <Accordion title="Event-Driven Architecture" icon="bell">
    Subscribe to 13+ lifecycle events — order creation, payment status, errors, and more.
  </Accordion>

  <Accordion title="React Hook" icon="react">
    Use `useRampnowSdk` for idiomatic React integration with minimal boilerplate.
  </Accordion>

  <Accordion title="TypeScript Support" icon="code">
    Full type definitions included out of the box for type-safe configuration and event handling.
  </Accordion>
</AccordionGroup>

<Tip>
  Try the SDK live at [demo.rampnow.io](https://demo.rampnow.io/).
</Tip>

<Card title="View SDK Documentation" icon="book" href="/api-reference/sdk">
  Explore the full SDK reference — installation, configuration, events, and React integration
</Card>

***

## What's Next?

<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem'}}>
  <Card title="API Reference" icon="code" href="/api-reference/createcustomeruser">
    Explore our complete API documentation with endpoints, parameters and examples
  </Card>

  <Card title="Authentication" icon="key" href="/api-reference/authentication">
    Learn how to securely authenticate your API requests
  </Card>

  <Card title="Supported Assets" icon="coins" href="/quickstart/resources/supported-assets">
    View the complete list of supported cryptocurrencies and fiat currencies
  </Card>

  <Card title="Contact Sales" icon="headset" href="https://rampnow.io/en/list#list-token-form">
    Have questions? Our team is here to help you get started
  </Card>
</div>

<Note>
  Need help? Contact our support team at [support@rampnow.io](mailto:support@rampnow.io) or visit our [Help Center](https://support.rampnow.io/portal/en/home).
</Note>