This project was based on Nightowl's Connector.
The React Ergo Payments library is an npm package developed to allow clients to pay/subscribe with ERG within your website. It validates and and submits the client's transaction and your website can do all sorts of fun stuff upon success. Including:
- Saving the tx into your database and create active subscriptions depending on timestamp
- Triggering a purchase request in your online store
- Allow users to pay/donate to specific addresses
Created using React.js version ^17.1.0 and Nautilus.
This package uses WASM, which is not supported by create-react-app (CRA)
. Follow the guide below to install it in an existing CRA.
- Node.js
https://nodejs.org/
- Nautilus^0.4.0
https://chrome.google.com/webstore/detail/nautilus-wallet/gjlmehlldlphhljhpnlddaodbjjcchai
- Install the package:
npm install react-ergo-payments
If you are using CRA, this workaround is needed:
npm uninstall react-scripts
npm install @craco/craco
npm install wasm-loader
- Create a config file named craco.config.js and add this:
module.exports = {
webpack: {
configure: (webpackConfig) => {
const wasmExtensionRegExp = /\.wasm$/;
webpackConfig.resolve.extensions.push('.wasm');
webpackConfig.module.rules.forEach((rule) => {
(rule.oneOf || []).forEach((oneOf) => {
if (oneOf.loader && oneOf.loader.indexOf('file-loader') >= 0) {
oneOf.exclude.push(wasmExtensionRegExp);
}
});
});
const wasmLoader = {
test: /\.wasm$/,
exclude: /node_modules/,
loaders: ['wasm-loader'],
};
addBeforeLoader(webpackConfig, loaderByName('file-loader'), wasmLoader);
return webpackConfig;
},
},
};
- Load the package asynchronously into the file/component you want:
const [component, setComponent] = React.useState();
useEffect(() => {
loadLibrary().then(lib => {
setComponent(lib);
})
return () => setComponent();
}, []);
async function loadLibrary() {
return await import("react-ergo-payments");
}
- Finally, use the component:
{ component && <component.ErgoForm /> }
Important: Attributes
Currently, you can specify 4 attributes:
-
receiverWalletAddress
the wallet your want your clients to pay to -
onSuccess()
call back -> this processor triggers onSuccess(txId, valueSent) -
price
(in ERG) -
color
(see Nightowl's Connector for examples)
So an example in your real-world store would be:
function onSuccess(txId, valueSent) {
// do something with this info
}
{ component &&
<component.ErgoForm
price={priceInErg}
onSuccess={onSuccess}
color={"orange"}
receiverWalletAddress={"9iPnRh5gaxxxcCQjUq6cT7FaQpRDpKtu"} /> }
Warning: You need specify the receiverWalletAddress or you will send your funds to my default wallet
I'm just venturing into blockchain waters for a short time now, so any suggestions and contributions to this open source project are greatly appreciated!
Filipe Sommer - LinkedIn