@nash-io/ramp-widget-sdk

v0.4.2

Published

2 years ago

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

0High
0Medium
0Low

ethanfast

localhuman

dalbinaco

`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 |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

ramp-widget-sdk