Lazerpay SDK allows you accept payments easily in your react application

Last update: Nov 20, 2022

Overview

Lazerpay Official react sdk

Lazerpay SDK allows you accept payments easily in your react application

Installation

npm install lazerpay-react

Usage

import { useLazerpay } from 'lazerpay-react'

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
    onSuccess: (response) => {
      // handle response here
    },
    onClose: () => {
      //handle response here
    },
    onError: (response) => {
      // handle responsne here
    }
  }

  const initializePayment = useLazerpay(config)

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

Configuration Options

publicKey
customerName
customerEmail
currency
amount
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

`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",
    "senderAddress": "0x0B4d358D349809037003F96A3593ff9015E89efA",
    "recipientAddress": "0x785F44E779cfEeDeBf7aA7CFde19DaA3312fd19e",
    "actualAmount": 10,
    "amountPaid": 10,
    "fiatAmount": 10,
    "coin": "BUSD",
    "currency": "USD",
    "hash": "0x3332d7b046d53e90dc0337c715252f210386c2a471c5025c953a0b1d9bc90593",
    "blockNumber": 14160827,
    "type": "received",
    "status": "confirmed",
    "network": "mainnet",
    "blockchain": "Binance Smart Chain",
    "customer": {
      "id": "b847dbbd-e5a4-4afc-ba26-b292707dc391",
      "customerName": "Njoku Emmanuel",
      "customerEmail": "[email protected]",
      "customerPhone": null,
      "network": "mainnet"
    }
  }
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Support

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

License

MIT

Comments

Update cdn url
Add an optional parameter on the initialization - cdnUrl

Add a hook containing a state that stores the new production cdn

check if user passed cdnUrl on initialization parameter

if yes, update the stored cn to the new one
opened by MeisterJustice 0

"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. You will build a simple website that allows for doing that, and you will do it using ES6 and Webpack!

To-do-list Description "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark t

Oct 18, 2022

A CLI application that allows you to easily grind your Steam items into gems.

Gemify Tool Gemify Tool is a CLI (Command Line Interface) application that allows you to easily convert your Steam items (backgrounds / emoticons) to

Jun 17, 2022

This is a full-stack exercise tracker web application built using the MERN (MongoDB, ExpressJS, ReactJS, NodeJS) stack. You can easily track your exercises with this Full-Stack Web Application.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 25, 2021

A simple editor allows you to easily add and customize all the sections you need for your profile's readme.

Create your Profile README using the best Templates tomper-readmify.herokuapp.com This is the frontend + backend of TomperReadmify build with MERN sta

Jan 2, 2023

Awesome Books project with ES6 is an application that was built using Vanilla JavaScript with ES6 features like using arrow functions. This application allows you to keep records of your favorite books.

Javascript Project Awesome Books with ES6 Using Javascript to create a simple Awesome Books project. Populating the books list and then removing one b

Sep 28, 2022

To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. I build a simple website that allows for doing that, and I do it using ES6 and Webpack!

Project Name : TO-Do list "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mar

Aug 22, 2022

This is the version to be reviewed - "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. A simple website that allows for doing that, and built using ES6 and Webpack!

Todo-list "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as comple

Dec 20, 2022

The frontend of a full stack application of a personal wallet made with React, Node and MongoDB that allows you to add inputs, outputs and see all your extract.

Jun 2, 2022

The backend of a full stack application of a personal wallet made with React, Node and MongoDB that allows you to add inputs, outputs and see all your extract.

My first full stack application with the concept of a personal wallet that allows you to create a personal account to keep track of your entire statement by adding incoming and outgoing transactions, as well as calculating the total balance and being able to edit and delete old transactions.

Jun 23, 2022