Webitspay Official react sdk

Webitspay SDK allows you accept payments easily in your react application

Installation

npm install webitspay-react

NOTE

reference has to be updated after any successful partial payment to enable re-initialization.

Configuration Options

• publicKey
• customerName
• customerEmail
• currency
• amount
• metadata
• reference
• onSuccess
• onError
• onClose

publicKey

string: Required Your public key can be found on your dashboard settings.

customerName

string: Required The name of the customer trying to make payments

customerEmail

string: Required The email of the customer trying to make payments

currency

string: Required The name of the fiat currency the merchant accepts

amount

number | string: Required The amount you want to charge the user in currency

metadata

object : Optional This contains any additional information you want to pass with this transaction

reference

string : Optional a unique string used to identifier the user

acceptPartialPayment

string : Optional This is used to enforce complete payments

businessLogo

string: Required The logo of your business as url in string

onSuccess

(response) => { Void }: Required This is called when a transaction is successfully. It returns a response.

onError

(response) => { Void }: Required This is called when a transaction fails. It returns a response.

onClose

() => { Void }: Required This is called when a user clicks on the close button.

The Transaction JSON returned for successful events

{
  "event": "successful",
  "data": {
    "id": "12896b32-0d7d-4744-bc15-5960af40d519",
    "reference": "aa6KlHy88D",
    "acceptPartialPayment":true,
    "senderAddress": "0x0B4d358D349809037003F96A3593ff9015E89efA",
    "recipientAddress": "0x785F44E779cfEeDeBf7aA7CFde19DaA3312fd19e",
    "actualAmount": 10,
    "amountPaid": 10,
    "fiatAmount": 10,
    "coin": "BUSD",
    "currency": "USD",
    "hash": "0x6782d7b046d53e90dc0337c895252f210386c2a471c5025c953a0b1d9gb47937",
    "blockNumber": 14160564,
    "type": "received",
    "status": "confirmed",
    "network": "mainnet",
    "blockchain": "Binance Smart Chain",
    "customer": {
      "id": "b847dbbd-e5a4-4afc-ba26-b292707dc391",
      "customerName": "John Oseni",
      "customerEmail": "[email protected]",
      "customerPhone": null,
      "network": "mainnet"
    }
  }
}

Support

If you're having trouble with Webitspay React Native SDK or your integration, please reach out to WebitsPay at [email protected] or come chat with us on Slack. We're more than happy to help you out.

License

MIT

Usage

import { usewebitpay } from 'webitspay-react'

const metadata = {
  'product name': 'Cornflakes and Milk',
  'Product Owner': 'Prisca Onye'
}

const App = () => {
  config = {
    publicKey: 'PUBLIC_KEY',
    customerName: 'CUSTOMERS FULL NAME',
    customerEmail: 'CUSTOMER EMAIL',
    currency: 'CURRENCY', // USD, NGN, AED, GBP, EUR
    amount: '10', // amount as a number or string
    reference: 'XUASO90120', // unique identifier
    acceptPartialPayment: true,
    metadata, // metadata (optional) is an object of information you wish to pass
    onSuccess: (response) => {
      // handle response here
    },
    onClose: () => {
      //handle response here
    },
    onError: (response) => {
      // handle responsne here
    }
  }

  const initializePayment = useWebitspay(config)

  return (
    <div>
      <h1>Webitspay React test App</h1>
      <button onClick={initializePayment}>Pay with Webitspay</button>
    </div>
  )
}