This project was based on Nightowl's Connector.

React Ergo Payments

What is this library?

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:

1. Saving the tx into your database and create active subscriptions depending on timestamp
2. Triggering a purchase request in your online store
3. Allow users to pay/donate to specific addresses

Built With

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.

Pre-requisites

• Node.js

  https://nodejs.org/

• Nautilus^0.4.0

  https://chrome.google.com/webstore/detail/nautilus-wallet/gjlmehlldlphhljhpnlddaodbjjcchai

Installation

• Install the package:

  npm install react-ergo-payments

If you are using CRA, this workaround is needed:

1. npm uninstall react-scripts
2. npm install @craco/craco
3. npm install wasm-loader
4. 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;
    },
  },
};

Usage

• 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:

1. receiverWalletAddress the wallet your want your clients to pay to
2. onSuccess() call back -> this processor triggers onSuccess(txId, valueSent)
3. price (in ERG)
4. 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

Contributing

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!

Contact

Filipe Sommer - LinkedIn