Documentation
API References
@bamotf/react

@bamotf/react

This package contains React components that help you build bitcoin related interfaces. You can see them in action on our storybook (opens in a new tab).

Installation

npm install @bamotf/react

Usage

import {Payment} from '@bamotf/react'
 
import '@bamotf/react/styles.css'
 
export function App() {
  const pi = ... // get payment intent from server
  const price = ... // get current price from server
 
  return (
    <Payment intent={pi} price={price} />
  )
}

Components

<PaymentDetails />

This component displays payment details, including a QR code, address, and amount in bitcoins the user needs to transfer. It has the following props:

  • amount: The amount of the payment in the given currency.
  • currency: The 3-letter currency code.
  • address: The address where the payment should be sent.
  • price: The current price of Bitcoin.
  • label (optional): A label to be shown in the wallet.
  • message (optional): A message to be shown in the wallet.
  • redirectUrl (optional): The URL to redirect the user after the payment is complete.

<QRCode />

This component renders a QR code readable by a Bitcoin wallet. It has the following props:

  • address: The Bitcoin address that will receive the payment.
  • amount: The amount to be received in Bitcoins.
  • redirectUrl (optional): The URL to redirect to after the payment is complete.
  • label (optional): A label to be shown in the wallet.
  • message (optional): A message to be shown in the wallet.

This generates the QR code and spits out a SVG that translates to the following URL format:

bitcoin:BC1QYLH3U67J673H6Y6ALV70M0PL2YZ53TZHVXGG7U
  ?amount=0.00001
  &label=sbddesign%3A%20For%20lunch%20Tuesday
  &message=For%20lunch%20Tuesday
  &r=https%3A%2F%2Fexample.com%2Fsuccess

<Copyable />

This component allows the user to copy a text to the clipboard. It has the following props:

  • prefix (optional): Text that will prefix the copyable text.
  • text: The text that will be copied when the user clicks on the copy button.
  • onCopied (optional): Callback function that is called when the user clicks on the copy button.
@bamotf/node@bamotf/utils