DevelopersDocsMBXNewsroomHelp Centre
Log InSign Up
HomeDevelopersDocsMBXNewsroomHelp Centre

Docs

The Button

  • Overview
  • HTML
  • JavaScript
  • React
  • Crypto Operations
  • Invisible Money Button
  • Paymail Signatures
  • Paymail Encryption

API

OAuth

API v2

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:

proptypedefault value
tostring (paymail, user ID, address, or script)null
amountstringnull
currencystring (USD, BSV, etc.)'USD'
labelstring''
successMessagestring'It's yours!'
opReturnstringnull
outputsarray[]
cryptoOperationsarray[]
clientIdentifierstringnull
buttonIdstringnull
buttonDatastringnull
typestring ('buy', 'tip')'buy'
onPaymentfunctionnull
onCryptoOperationsfunctionnull
onErrorfunctionnull
onLoadfunctionnull
editablebooleanfalse
disabledbooleanfalse
devModebooleanfalse

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

nametyperequired?
tostringoptional
paymailstringoptional
userIdstringoptional
addressstringoptional
scriptstringoptional
amountstringrequired
currencystring (USD, BSV, etc.)required

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:

nametype
idstring
buttonIdstring
buttonDatastring
statusstring
txidstring
normalizedTxidstring
amountstring
currencystring
satoshisstring
outputsarray
cryptoOperationsarray
userIdstring
rawtxstring

Where in this case the outputs are slightly more sophisticated:

nametype
tostring
paymailstring
userIdstring
scriptstring
addressstring
amountstring
currencystring
satoshisnumber
assetstring
assetOptionsobject

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.

HomeMB for DevelopersMBXNewsroomHelp Center

Buenos Aires, Argentina - Tel Aviv, Israel - Toronto, Canada

@ 2022 MoneyButton All rights reserved