Quick start

Useful links:


Integration via URL

You can just use https://buy.ramp.network/ URL on your site to send users to hosted version of our widget.

<a target="_blank" href="https://buy.ramp.network/">
  Buy ETH/DAI with Ramp Instant
</a>

Buy ETH/DAI with Ramp Instant

This is the simplest form of integration.

You can also use the same parameters as in SDK integration to control amount, asset and buyer address:

  • swapAsset: either ETH or DAI (optional)
  • swapAmount: amount that the user will buy, in wei or token units, as a string (optional)
  • hostLogoUrl: a URL to your app's logo (optional)
  • hostAppName: your app's name (optional)
  • userAddress: your user's ETH address (optional)
  • userEmailAddress: your user's email address (optional)
  • webhookStatusUrl: an callback URL, if you want to receive webhook updates for the purchases created by this widget instance (optional)
<a
  target="_blank"
  href="https://buy.ramp.network/?swapAsset=ETH&swapAmount=100000000000000000&userAddress=0xe2E0256d6785d49eC7BadCD1D44aDBD3F6B0Ab58"
>
  Buy 0.1 ETH with Ramp Instant and send it to
  0xe2E0256d6785d49eC7BadCD1D44aDBD3F6B0Ab58 address
</a>

Buy 0.1 ETH with Ramp Instant and send it to 0xe2E0256d6785d49eC7BadCD1D44aDBD3F6B0Ab58 address

Integration via SDK

Installation

The first step to integrating the Ramp Instant Widget using SDK is adding our SDK to your project.

via NPM:

  $ npm install @ramp-network/ramp-instant-sdk
  ...

or Yarn:

  $ yarn add @ramp-network/ramp-instant-sdk
  ...

or a script tag, if your project is not using any build tool:

<script src="https://cdn.jsdelivr.net/npm/@ramp-network/ramp-instant-sdk@1.3.0/dist/ramp-instant-sdk.umd.min.js"></script>

Usage

The @ramp-network/ramp-instant-sdk package exports RampInstantSDK class.

As a principle, one instance of the class corresponds to one instance of the widget. If a user closes the widget, you need to create a new instance of the RampInstantSDK class.

Example

import { RampInstantSDK } from '@ramp-network/ramp-instant-sdk';

new RampInstantSDK({
  hostAppName: 'yourDApp',
  hostLogoUrl: 'https://yourdapp.com/yourlogo.png',
  swapAmount: '1500000000000000000', // 1.5 ETH in wei
  swapAsset: 'ETH',
  userAddress: '0xab5801a7d398351b8be11c439e05c5b3259aec9b'
})
  .on('*', event => console.log(event))
  .show();

This code will show the Ramp Instant widget for a fixed purchase of 1.5ETH sent to 0xab5801a7d398351b8be11c439e05c5b3259aec9b address.

Configuration params

RampInstantSDK constructor accepts a configuration object with the following keys:

  • swapAsset: either ETH or DAI (optional),
  • swapAmount: amount that the user will buy, in wei or token units, as a string (optional),
  • hostLogoUrl: a URL to your app's logo,
  • hostAppName: your app's name,
  • userAddress: your user's ETH address,
  • webhookStatusUrl: an optional callback URL, if you want to receive webhook updates for the purchases created by this widget instance.

If any of the supplied config values are invalid, you'll be notified about it via the console in your devtools.

If you fail to supply any of the required config values, the widget will display an error page and won't start.

Initialization

Just call:

let widget = new RampInstantSDK(config);

This will run some prep work for the widget, but won't display it yet.

Display widget

In order to display the widget run:

widget.show();
  • .show() adds the widget to the DOM - specifically, to the body element - starting from that moment, the semi-transparent overlay with a loader appears and the widget starts booting up.

  • .show() is chainable.