React

The React version of Money Button is what we use throughout the main Money Button app and every other app we build. It is very similar to and is based on the pure javascript version of Money Button. In fact, it is simply a wrapper for the pure javascript version.

Because the React version of Money Button is simply a wrapper for the pure javascript version, this page has only introductory information to explain the difference between the two versions. For more detailed information about the API, please see the javascript documentation. Most of the documentation of the pure javascript version applies directly to the React version as well.

How to install the React component:

npm install @moneybutton/react-money-button

How to use it in your react project:

let MoneyButton = require('@moneybutton/react-money-button').default

How to use it to receive a specific amount at a specific address:

<MoneyButton
  to=[paymail, user ID, address, or script]
  amount=[amount]
  currency=[currency]
/>

The MoneyButton component can take a number of props:

outputs is a list of output objects. Each output object has these parameters:

to, amount and currency work exactly as the top level attributes with the same name, except for the detail that all the outputs have to use the same currency. If there are 2 outputs using different currencies the button will fail before rendering.

Instead of using to argument you can specify which kind of output you are using with one of the attributes paymail, userId, address, or script.

cryptoOperations is a list of cryptographic operations, such as signatures, encryption and decryption, to be performed in the transaction or on off-chain data. See the crypto operations documentation.

Also, the onPayment function must look like this:

function myOnPaymentCallback (payment) {
    // ...
}

Where the payment is an object that looks like this:

Where in this case the outputs are slightly more sophisticated:

to is optional. It can be a paymail, a user ID, an address, or a script.

onCryptoOperations function look like this:

function myOnCryptoOperationsCallback (cryptoOperations) {
    // ...
}

It receives a crypto operations array with replacements applied. Please see the crypto operations documentation.

onError function look like this:

function myOnErrorCallback (error) {
    // ...
}

It receives an object describing the error.

onLoad function look like this:

function myOnLoadCallback () {
    // ...
}

It is called when the button has loaded.

When devMode is set to true no transactions are made when you swipe the button. It's just to try the button.

This page has only introductory material. The React version of Money Button is a wrapper for the pure javascript version. For more information about how the parameters work, please refer to javascript version documentation.