0.4.2 • Published 2 years ago
@nash-io/ramp-widget-sdk v0.4.2
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-sdkEmbed
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 |