For developers, adding a payment system to your app should be as easy as “npm install”. Today we’re happy to announce React Money Button, a React component for Money Button. No account necessary. No fees. And advanced features like multiple outputs and OP_RETURN. This is how payments on the internet always should have been.

To use React Money Button, first install the component:

npm install @moneybutton/react-money-button

Next, add the Money Button component to your project:

import MoneyButton from '@moneybutton/react-money-button'

export class MyComponent {
  render () {
    return (
      <MoneyButton
        to='[address]' 
        amount='1.00'
        currency='USD'
      />
    )
  }
}

If you wish to use multiple outputs, you may specify those instead of a single output:

<MoneyButton
  outputs=[
    {to: '[address 1]', amount: '1.00', currency: 'USD'},
    {to: '[address 2]', amount: '0.75', currency: 'USD'},
    {to: '[address 3]', amount: '1.25', currency: 'USD'}
  ]
/>

The “to” field does not have to be an address. It can also be a Money Button User Number, meaning you can write apps that allow users to send to other users. You can access the user’s User Number using our OAuth API.

OP_RETURN can be used by adding an additional output:

<MoneyButton
  to='[address]' 
  amount='1.00'
  currency='USD'
  opReturn='[your useful message here]'
/>

You have full access to the Money Button graphical API, such as specifying a label for the button:

<MoneyButton
  to='[address]' 
  amount='1.00'
  currency='USD'
  label='Pay Me'
/>

Money Button uses the Bitcoin Cash blockchain as the underlying payment system. When a payment completes, you can use the onPayment callback method to access information about the payment.

import MoneyButton from '@moneybutton/react-money-button'

export class MyComponent {
  onPayment (payment) {
    // Reveal content behind pay wall here
  }

  render () {
    return (
      <MoneyButton
        to='[address]' 
        amount='1.00'
        currency='USD'
        onPayment={this.onPayment.bind(this)}
      />
    )
  }
}

For more information about React Money Button, please see our documentation, or the source code, or join us on Telegram.

Show CommentsClose Comments

1 Comment

  • Fred@metroids3
    Posted October 23, 2018 at 1:24 pm 0Likes

    Hi. Is there a way to implement the money button react to work on iOS and pad safari browsers without need for the client to enter settings and make changes before it becomes enabled? This is not good for usage and readers that have cross site tracking disabled by default.

    Many thanks

Leave a Reply

%d bloggers like this: