@binance/fiat-widget
-
You are not on any trade or economic sanctions lists, such as the UN Security Council Sanctions list, designated as a “Specially Designated National” by OFAC (Office of Foreign Assets Control of the U.S. Treasury Department) or placed on the U.S. Commerce Department’s “Denied Persons List”.
-
You are not providing any restricted/prohibited business that could constitute illegal, unlawful activities
Install By HTML CODE in 5 minutes
-
You can get your Binance.com ref_id from Binance Referral Program; and Binance.US ref_id from Binance.US Referral Program
-
Add the codes below and input your ref_id 1). If you have both Binance.com and Binance.US ref_id, please input your ref_id under 'ref' and 'us_ref' section respectively 2). If you only have Binance.com ref_id, please input your ref_id under 'ref' and delete 'us_ref' section
<script src="https://public.bnbstatic.com/static/js/ocbs/@binance/fiat-widget.js"></script>
<div id="widget"></div>
<script>
window.onload = function () {
var t = document.querySelector('#widget')
window.binanceFiatWidget.Widget(t, {
locale: 'en',
coinInfo: {
fiat: '',
crypto: '',
isInUS: false
},
urlParmas: {
us_ref: 'your us refId',
ref: 'your refId'
}
})
}
</script>
finally
, check the Jump link has the params ref
, like this: https://www.binance.com/cn/buy-sell-crypto?fiat=USD&crypto=BTC&amount=1000&ref=xxxxxx
install
npm install @binance/fiat-widget
// or cdn
<script src="https://public.bnbstatic.com/static/js/ocbs/@binance/fiat-widget.js"></script>
used
<div id="widget"></div>
import {Widget} from '@binance/fiat-widget'
const options = {
locale: 'en',
width: 200,
theme: 'dark',
coinInfo: {
fiat: '',
crypto: '',
isInUS: false
},
urlParmas: {
ref: '',
us_ref: '',
utm_source: ''
}
}
Widget('#widget', options)
- react
import {Widget, unloadWidget} from '@binance/fiat-widget'
const app = () => {
const t = useRef<HTMLDivElement>(null)
// or
// const t = document.querySelector('#test')
useEffect(() => {
if (t) {
Widget(t)
}
return () => unloadWidget()
}, [])
return (<div id="#test" ref={r}></div>)
}
Parameters
-
el:
selector
orDOM element
-
options.locale:
string
i18n
,nullable
, default: 'en'opts:
'cn','de','en','es','fr','id','it','kr','nl','pl','pt','ru','tr','tw','ua','vn',
, unsupported locale will fallback to english -
options.width:
number
width
,nullable
,if width is not set, default is el.offsetWidth
range:
200
-500
-
options.theme:
string
theme
,nullable
, default: 'light'opts:
'light' | 'dark'
-
options.urlParmas
-
options.urlParmas.ref:
string
ref id
,nullable
-
options.urlParmas.us_ref:
string
Input your ref_id 1). If you have both Binance.com and Binance.US ref_id, please input your ref_id under 'ref and 'us_ref' section respectively 2). If you only have Binance.com ref_id, please input your ref_id under 'ref' and delete 'us_ref' section
us_ref id
,nullable
-
options.urlParmas.utm_source:
string
UTM source
,nullable
-
-
options.coinInfo
-
options.coinInfo.fiat:
string
fiat name
,nullable
-
options.coinInfo.crypto:
string
crypto name
,nullable
-
options.coinInfo.isInUS:
string
For US Widget Partners (Eg. >50% of the website traffic is in US), please input true. USD - For US Residents will be the default fiat option. For International Widget Partners, please input false.
opts:
true | false
-
-
options.api_host:
string
overlay
getCoinListApi
,nullable
-
options.us_api_host:
string
overlay
getUsCoinListApi
,nullable
-
options.skeletonScreen:
boolean
nullable
, defaulttrue
, show a placeholder widget
API
-
setXXX
setXXX
is the function to change Widget's characters, you can use it bychaining
likesjquery
, and you need to userender
to render it
const w = widget(container, opt)
w.setTheme('dark').setLocale('cn').render()
- setTheme
change the theme
const w = widget(container, opt)
w.setTheme('dark').render()
- setLocale
change the locale
const w = widget(container, opt)
w.setLocale('cn').render()
-
render
render the widget (after
.setXXX()
is necessary)
const w = widget(container, opt)
w.setTheme('dark').render()
render will fetch api, so `render` return a `Promise`
const w = widget(container, opt)
w.setTheme('dark').render().then(v => alert('has render'))
-
unloadWidget
remove the widget from page, maybe you will use it in React hooks to replace
setXXX()
useEffect(() => {
if (t?.current) {
w = Widget(t.current, {
theme: theme
})
}
return () => unloadWidget()
}, [theme])