Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@nash-io/ramp-widget-sdk

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nash-io/ramp-widget-sdk

[![NPM](https://img.shields.io/npm/v/@nash-io/ramp-widget-sdk.svg)](https://www.npmjs.com/package/@nash-io/ramp-widget-sdk)

0.4.2
latest
npm

Version published: last year

Weekly downloads: 168; decreased by-7.69%

Maintainers: 3

Weekly downloads

Created: 4 years ago

Source

`ramp-widget-sdk`

A JavaScript library to allow third-parties to include a Nash fiat ramp widget in any webpage.

Getting started

Examples

With React ⛷ Try it on CodeSandbox
Browser (UMD module) 🏄‍♀️ Try it on CodePen

npm module

Install

# npm
npm install @nash-io/ramp-widget-sdk

# yarn
yarn add @nash-io/ramp-widget-sdk

Embed

Your page must contain an HTML element with the following data attribute: data-nash-fiat-ramp-widget:

<div data-nash-fiat-ramp-widget />

Once initializing the widget like below, an iframe pointing to the widget deployment will be loaded within your HTML element:

// import the module
import NashRamp from "@nash-io/ramp-widget-sdk";

// initialize the widget
const nashWidget = new NashRamp();

nashWidget.init({
  width: 496,
  height: 576,
});

With React

The pattern above can be reproduced in a simple React component:

import React, { useEffect } from "react";
import NashRamp from "@nash-io/ramp-widget-sdk";

const NashRampWidget = () => {
  useEffect(() => {
    const nash = new NashRamp();
    nash.init({
      width: 496,
      height: 576,
    });
  }, []);
  return <div data-nash-fiat-ramp-widget />;
};

export default NashRampWidget;

And then used anywhere:

export default () => <NashRampWidget />;

Browser (UMD module)

<!-- embed the script -->
<script
  src="https://unpkg.com/@nash-io/ramp-widget-sdk@latest/dist/ramp-widget-sdk.umd.js"
  async
></script>

<body>
  <!-- initialize -->
  <script>
    function initializeNash() {
      const nash = new NashRamp();
      nash.init({
        width: "496px",
        height: "576px",
      });
    }
    window.onload = function () {
      initializeNash();
    };
  </script>
  <!-- HTML target -->
  <div data-nash-fiat-ramp-widget />
</body>

API

`new NashRamp({ ...options })`

Property	Description	Type	Required	Default
`base`	The symbol of the fiat currency to be used in the purchase.	`string`	No	n/a
`env`	Points to the environment where the widget is deployed.	`'LOCAL'` \| `'PREVIEW'`\| `'PRODUCTION'`	No	`'PRODUCTION'`
`referrer`	Your service name (used by Nash for tracking).	`string`	No	`window.location.hostname`
`target`	The symbol of the crypto currency to be purchased.	`string`	No	n/a
`blockchain`	The symbol of the network to be used.	`'BTC'` \| `'ETH'` \| `'NEO'` \| `'NEO3'` \| `'POLYGON'` \| `'AVAXC'` \| `'ARBITRUM'`	No	n/a

`NashRamp.init({ ...options })`

Property	Description	Type	Required
`width`	Widget width — use `100%` for responsiveness	`string` \| `number`	Yes
`height`	Widget height — minimum `576px`	`string` \| `number`	Yes
`mode`	Initializes the widget on Buy or Sell mode.	`BUY`\|`SELL`	No
`baseAmount`	Initializes the widget with a fixed base amount.	`number`	No
`targetAmount`	Initializes the widget with a fixed target amount — will take precedence if used with `baseAmount`.	`number`	No

FAQs

What is @nash-io/ramp-widget-sdk?

Is @nash-io/ramp-widget-sdk popular?

Is @nash-io/ramp-widget-sdk well maintained?

Package last updated on 13 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install