Web3 Payment Framework
npm install --save bonpay-reactimport React from 'react'
import { useBonPay } from 'bonpay-react'
const App = () => {
const bonPay = useBonPay({
value: '0.0001',
recepient: '0xAFcC4d55a83ae1A449Bee7783A2737aFb5d82254',
chainId: 5,
onSuccess,
onError,
onClose,
tokens: ['USDT','DAI','USDC']
})
function onSuccess(data: any) {
console.log(data)
}
function onError(error: any) {
console.log(error)
}
function onClose(data: any) {
console.log(data)
}
function handlePayment() {
const pay = bonPay()
pay.setup()
pay.open()
}
return <button onClick={handlePayment}>Pay Now</button>
}
export default AppEmit config data and prepare UI disalog for transactions.
pay.setup();To open a bondpay dialog simple call the open method on the bonpay object:
pay.open();BonPay is initialized with a configuration object which is required to setup and open up the bonpay dialog. See below for specifications on the configuration object.
{
// `value` is the amount to send in ether
value: '1', // no-default, required, string
// `recepient` is an address to deposit ether value
recepient: '0xAFcC4d55a83ae1A449Bee7783A2737aFb5d82254', // no-default, required, string
// `chainId` is a network Id.
chainId: 1, // no-default, required, integer
// `onSuccess` callBack function on transaction successfull
onSuccess: function(transactionData){}, // no-default, optional, function
// `onClose` callBack function on modal close
onClose: function(closeEvent){}, // no-default, optional, function
// `onError` callBack function on transaction successfull
onError: function(error){}, // no-default, optional, function
// `nft` Accept NFT as an alternative form of payment specifying
// the collection contract address. A collection field is required
// when specifying an nft option
nft: {
collection: ["0xE3ffC7A3Eb0Df96CBc08fC95cdDF776B22124A97"]
} // optional
// `tokens` Accept stable coins. supported coins include BUSD,USDC,UDST,DAI.
tokens: ['USDT'], // optional ,String[]
// `transfer` Allow third party wallet transfers
transfer: true, // default false, not required, boolean
}| Network | ChainId | |
|---|---|---|
| Ethereum | 1 | ✅ |
| Binance Smart Chain | 56 | ✅ |
| Polygon Mainnet | 137 | ✅ |
| Mumbai | 80001 | ✅ |
| BSC Testnet | 97 | ✅ |
| Goerli Testnet | 5 | ✅ |
We currently limit the tokens to be used for certain network, below is a table of networks ans available stable tokens you can use for your application.
| Network | ChainId | DAI | BUSD | USDT | USDC| | --- | --- | --- | --- | --- | --- | --- | | Ethereum | 1 | ✅| ✅ | ✅| ✅| | Binance Smart Chain | 56 | ✅ | ✅ | ❌ | ✅| | Polygon Mainnet | 137 | ✅ | ✅ | ✅ | ✅| | Mumbai | 80001 | ❌ | ❌ | ❌ | ❌| | BSC Testnet | 97 | ❌ | ❌ | ❌ | ❌ | | Goerli Testnet | 5 | ✅ |❌ | ✅ | ✅ |
MIT © CeoFred
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent