@nash-io/ramp-widget-sdk
v0.4.2TypeScript
[](https://www.npmjs.com/package/@nash-io/ramp-widget-sdk)
0/weekUpdated 2 years agoMITUnpacked: 31.4 KB
Published by ethanfast
npm install @nash-io/ramp-widget-sdkramp-widget-sdk
A JavaScript library to allow third-parties to include a Nash fiat ramp widget in any webpage.
Getting started
$3
- With React ⛷ Try it on CodeSandbox
- Browser (UMD module) 🏄♀️ Try it on CodePen
$3
#### Install
``bashnpm
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:
:`html
`Once initializing the widget like below, an
pointing to the widget deployment will be loaded within your HTML element:`js
// 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:
jsx
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
;
};export default NashRampWidget;
`And then used anywhere:
jsx
export default () =>
`$3
html
async
>
`API
$3
| Property | Description | Type | Required | Default |
| ------------ | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------- |
|
| 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 |$3
| 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 |