CryptoPay

A react component for payment in various cryptocurrencies including LBTC and Paypal

Currently the supported payments are:

• Lightning Bitcoin
• Bitcoin
• Ethereum
• Binance Coin
• Paypal

Installation

npm install @crypteriat/cryptopay

Use

import { CryptoPay } from '@crypteriat/cryptopay';
import '@crypteriat/cryptopay/dist/bundle.css';
import { paymentData } from '@data/PaymentData';

const addresses = [
    { ticker: 'lbtc', payserver: paymentData.lbtc.uri },
    { ticker: 'btc', address: paymentData.btc },
    { ticker: 'eth', address: paymentData.eth },
    { ticker: 'bnb', address: paymentData.bnb },
    { ticker: 'paypal', link: paymentData.paypal },
  ];

 <CryptoPay addresses={addresses} />

For now, make sure to also import the bundle.css file

Addresses are required. Not all have to be used. LBTC URI must be under 'payserver' and Paypal link must be under 'link'

• Addresses can take in your addresses from a separate file that might look something like:

export const paymentData = {
  btc: 'btc address',
  lbtc: { apiKey: process.env.lbtcAPIkey, uri: process.env.ltbtcURI },
  eth: 'eth address',
  bnb: 'bnb address',
  paypal: 'paypal link',
};

Rearranging the order of tickers will rearrange the order in which they are displayed in the tabs

Options

| Global | Type | Default | Description | | :------ | :------ | :------ | :------------------------------------------- | | invoice | boolean | false | Display invoice button and field information |

Example:

<CryptoPay addresses={addresses} invoice={true} />

INVOICE must be true for the following:

- lbtcOptions

| Global | Type | Default | Description | | :-------- | :----- | :---------- | :-------------------------- | | QRMessage | string | See example | Modfiy LBTC display message |

Example:

const lbtcOptions = {
    QRMessage: 'This is a lbtc test',
  };

<CryptoPay
  addresses={addresses}
  invoice={true}
  lbtcOptions={lbtcOptions}
/>

- btcOptions, ethOptions, bnbOptions

| Global | Type | Default | Description | | :--------- | :----- | :---------- | :-------------------------------------------------------- | | buttonDes | string | See example | Modfiy invoice button description | | tooltipDes | string | See example | Modfiy invoice button tool-tip description | | fieldDes | string | See example | Modfiy field description below 'amount' and 'email' forms | | QRMessage | string | See example | Modfiy display message |

Example:

const btcOptions = {   //or ethOptions, bnbOptions
    buttonDes: 'This is a btc test',
    tooltipDes: 'This is a btc test',
    fieldDes: 'This is a btc test',
    QRMessage: 'This is a btc test',
  };

<CryptoPay
  addresses={addresses}
  invoice={true}
  btcOptions={btcOptions}
  ethOptions={ethOptions}
  bnbOptions={bnbOptions}
/>

- paypalOptions

| Global | Type | Default | Description | | :------- | :----- | :---------- | :--------------------------------------------- | | fieldDes | string | See example | Modfiy field description below 'donate' button |

Example:

const paypalOptions = {
    fieldDes: 'This is a paypal test',
  };

<CryptoPay
  addresses={addresses}
  invoice={true}
  paypalOptions={paypalOptions}
/>

Example

Clone the repo and run these commands:

npm i
npm run dev

Notice

As said above, the only supported payment types are currently listed. Not all of them have to be used, but there is not capability right now to add any further options. We are still in progress.