Embeddable Widget
The NowRamp widget is a drop-in solution that handles the entire crypto buying flow. Embed it in your application via iframe or JavaScript SDK.
Features
- Complete Buy Flow - Amount selection, KYC, payment, and confirmation
- Customizable Branding - Match your app’s look and feel
- Multi-Language - i18n support out of the box
- Mobile Responsive - Works on all device sizes
- Secure - PCI-compliant payment handling
The widget guides users through a step-based flow:
Standard Flow
Streamlined Provider Flow
Some payment providers handle identity verification (KYC) as part of their payment process. When using these providers, the widget skips the separate confirmation and KYC steps for a faster checkout experience.
When a payment provider handles KYC internally, users complete identity verification within the provider’s interface. This reduces friction and speeds up the onboarding process for first-time users.
Quick Start
Option 1: iframe Embed
<iframe
id="ramp-widget"
src="https://widget.nowramp.com?apiKey=YOUR_API_KEY&projectId=YOUR_PROJECT_ID&externalUserId=user_123"
width="400"
height="600"
frameborder="0"
allow="clipboard-write"
></iframe>
Option 2: JavaScript SDK
import { RampWidget } from '@nowramp/sdk';
const widget = new RampWidget({
apiKey: 'YOUR_API_KEY',
projectId: 'YOUR_PROJECT_ID',
externalUserId: 'user_123',
containerId: 'ramp-widget-container',
});
widget.mount();
Configuration Options
| Option | Type | Required | Description |
|---|
apiKey | string | Yes | Your project API key |
projectId | string | Yes | Your project ID |
externalUserId | string | Yes | Your user’s ID |
containerId | string | SDK only | DOM element ID to mount widget |
mode | string | No | "buy" or "sell" (default: buy) |
defaultCrypto | string | No | Pre-select crypto (e.g., “ETH”) |
defaultFiat | string | No | Pre-select fiat (e.g., “USD”) |
defaultAmount | string | No | Pre-fill amount |
walletAddress | string | No | Pre-fill wallet address |
theme | object | No | Custom theme colors |
locale | string | No | Language code (e.g., “en”, “es”) |
Example: Full Configuration
const widget = new RampWidget({
// Required
apiKey: 'ramp_live_abc123',
projectId: 'project_xyz789',
externalUserId: 'user_123',
containerId: 'widget-container',
// Optional
mode: 'buy',
defaultCrypto: 'ETH',
defaultFiat: 'USD',
defaultAmount: '100',
walletAddress: '0x742d35Cc...',
// Theming
theme: {
primaryColor: '#6366F1',
borderRadius: '12px',
},
// Localization
locale: 'en',
});
URL Parameters (iframe)
When using iframe, pass configuration via URL parameters:
https://widget.nowramp.com?
apiKey=ramp_live_abc123
&projectId=project_xyz789
&externalUserId=user_123
&mode=buy
&defaultCrypto=ETH
&defaultFiat=USD
&defaultAmount=100
&parentOrigin=https://partner-app.com
Always include parentOrigin to enable secure communication between the widget and your app.
Security
The widget is designed with security in mind:
- API Key Handling - Keys are validated server-side
- Session Management - Secure sessions for each user
- Origin Verification - postMessage validated against
parentOrigin
- PCI Compliance - Payment data never touches your servers
Browser Support
| Browser | Minimum Version |
|---|
| Chrome | 80+ |
| Firefox | 75+ |
| Safari | 13+ |
| Edge | 80+ |
| Mobile Safari | iOS 13+ |
| Chrome Android | 80+ |
Next Steps
