coinforbarter-react

CoinForBarter React Library - Integrate cryptocurrency payments for goods and services in your React App

Usage no npm install needed!

<script type="module">
  import coinforbarterReact from 'https://cdn.skypack.dev/coinforbarter-react';
</script>

README

CoinForBarter React Library

Integrate cryptocurrency payments for goods and services in your React App

License, MIT npm, coinforbarter-react yarn, coinforbarter-react

Table of Contents

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
## Deployment

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.

Built Using

  • Typescript
  • React

CoinForBarter API References

Stay in Touch