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 |