Coinforbarter-react NPM

CoinForBarter React Library

Integrate cryptocurrency payments for goods and services in your React App

About

This is a react package for implementing CoinForBarter's payment gateway with different payment methods.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. See references for links to dashboard and API documentation.

Installation

$ npm install coinforbarter-react

# or
$ yarn add coinforbarter-react

Usage

Hooks

import React from 'react';
import { useCoinForBarter } from 'coinforbarter-react';

function App() {
  const config = {
    publicKey: 'xxxxxxxxxxxx',
    txRef: 'xxxxxxxxxxx',
    amount: 10000,
    currency: 'NGN',
    customer: 'example@example.com',
    customerFullName: 'John Doe',
    callback: (data) => {
      console.log(data);
    },
    currencies: ['BTC', 'DOGE'],
  };


  const pay = useCoinForBarter(config);

  return (
    <div>
      <button
        onClick={(e) => {
          e.preventDefault();
          pay();
        }}
      >
        Custom Pay
      </button>
    </div>
  );
}

export default App;

Using Button Component

import React from 'react';
import { CoinForBarterButton } from 'coinforbarter-react';

function App() {
  const config = {
    publicKey: 'xxxxxxxxxxxx',
    txRef: 'xxxxxxxxxxx',
    amount: 10000,
    currency: 'NGN',
    customer: 'example@example.com',
    customerFullName: 'John Doe',
    callback: (data) => {
      console.log(data);
    },
    currencies: ['BTC', 'DOGE'],
  };


  return (
    <div>
      <CoinForBarterButton config={config} text="Pay" />
    </div>
  );
}

export default App;

Config Parameters

Property	Required	Description
publicKey	true	your account public key gotten from your dashboard. You can get your PUBLIC_KEY from the CoinForBarter dashboard. Go here to get your API Keys. - For development, Use TEST API Keys. - For production, use LIVE API KEYS.
txRef	true	a random id to reference this transaction
amount	true	amount for this charge
currency	true	the currency you have set the amount in
customer	true	email address of the customer
customerFullName	false	full name of the customer
customerPhoneNumber	false	phone number of your customer
currencies	false	an array of currencies you want to accept for this transaction, leave empty to accept all currencies
redirectUrl	false	a url to be opened after a transaction ends. If provided, it is called while the callback function is ignored
customizations	false	an object to customize the payment screen. E.g: {logo:'https://example.com/logo.png', description:'lorem ipsium', title:'example title'}. See customization type
callback	true	a call back function to call after a transaction ends, this is ignored if a redirect url is provided. A data object is passed to the function. See Callback Param Type for callback data type

Customization Type

Property	Required	Description
title	false	a title for the payment screen
description	false	a description for the payment screen
logo	false	a description for the payment screen

Callback Param Type

Property	Description
status	status of the transaction. This is either (success. error or cancelled)	,
transactionId	the transaction id for this transaction, this can be used to verify the transaction using the verify transaction endpoint
txRef	the transaction ref provided by you in config as txRef
currency	the currency the customer chose to pay in
amount	the amount the customer is to pay in the currency chosen by the customer
amountReceived	the amount the customer paid in the currency chosen by the customer
customer	the customer details
baseAmount	the amount you had set to receive
baseCurrency	the currency that you had set the amount for this transaction in