💶 The package allows you accept payment using Lazerpay in your react native mobile app ⚡️

Overview

Lazerpay Official react-native sdk

Lazerpay SDK allows you accept payments easily in your react-native application

screenshot of SDK

screenshot of SDK

screenshot of SDK

screenshot of SDK

Installation

npm install lazerpay-react-native

Also install react-native-webview because it's a dependency for this package. Here's a link to their docs.

Usage

import { LazerPay } from 'lazerpay-react-native';

const InitiatePayment = () => {
  const [openSDK, setopenSDK] = useState(false);

  return (
    <View>
      <LazerPay
        {...{
          publicKey: 'PUBLIC_KEY',
          customerName: 'CUSTOMERS FULL NAME',
          billingEmail: 'CUSTOMER EMAIL',
          currency: 'CURRENCY', // USD, NGN, AED, GBP, EUR
          amount: 10, // amount as a number
          onSuccess: (response) => {
            // handle response here
          },
          onClose: () => setopenSDK(false),
          onError: (response) => {
            // handle responsne here
          },
          openSDK,
        }}
      />

      <TouchableOpacity onPress={() => setopenSDK(true)}>
        <Text> Initiate Payment</Text>
      </TouchableOpacity>
    </View>
  );
};

Configuration Options

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: Required The amount you want to charge the user in currency

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"
    }
  }
}

Configuration Options for Making Payments

openSDK

boolean: Required

This is a prop to display/hide the sdk

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

You might also like...
[iOS App Store] A mobile app designed for sharing projects with friends, family, and colleagues
[iOS App Store] A mobile app designed for sharing projects with friends, family, and colleagues

ExhibitU This is a mobile app built using React Native and Expo. Designs were made via Adobe Xd. Getting started Download npm from Node.js Install the

Visualize your React components as you interact with your application.
Visualize your React components as you interact with your application.

Visualize your React components as you interact with your application. Setup Install React Scope from Chrome web store. (Important) Install React Deve

A monorepo boilerplate for react web and react native. Uses react-native-web to reduce time invested in making the same components for mobile and web

Monorepo template Get Started Run the following command to install all the dependencies in the right location yarn lerna bootstrap yarn workspace @mar

The mobile app for MoneyBoy - a tool to track spendings between different people.
The mobile app for MoneyBoy - a tool to track spendings between different people.

MoneyBoy App MoneyBoy is a cross-platform app for tracking spending between groups of people. Development First, make sure to have the following insta

React Package Starter - a simple and slightly opinionated starter kit for developing and publishing React packages

React Package Starter This is a simple and slightly opinionated starter kit for developing and publishing React packages. It comes with a several pre-

Initial directory structure and package.json as a seed for new React based projects.

React Project Seed This serves as a seed for starting new React projects. It's less of a boilerplate and more of a suggested directory structure that

an npm package for displaying and direct updating state for prototypes on React

React state-control A bunch of lightweight components for updating the model stored in React's stateful components for fast prototyping. Complete libr

React package that is an Ergo dApp Connector. Current supported wallets are Nautilus Wallet and SafeW.
React package that is an Ergo dApp Connector. Current supported wallets are Nautilus Wallet and SafeW.

Ergo dApp Connector React Package Table of Contents About The Project Built With Getting Started Prerequisites Installation Usage Contributing License

This package contains the source code of the React components for the Cloudscape Design System.

React components for Cloudscape Design System This package contains the source code of the React components for the Cloudscape Design System. Cloudsca

Comments
  • added fix for white screen issue

    added fix for white screen issue

    This PR fixes the issue of white screens when the webview loads up. We still need to decide where to host the html so we can add the link on LazerPay.tsx

    opened by franko4don 0
  • Harlem Capital (https://harlem.capital/) would to learn more about LazerPay

    Harlem Capital (https://harlem.capital/) would to learn more about LazerPay

    hey Njoku 👋🏾 I'd love to connect you to the amazing team at Harlem Capital where I'm helping to scout the best startups in the world for investment.

    They are some of the most active investors in crypto and fintech and are looking to invest further into the space, particularly within Africa. I've been following LazerPay for a while and I've been really impressed by your story, the product, and all your progress so far.

    Would love to get an introductory call and help connect you if you're looking for investment in the future. Book a time at this link and I'd love to meet you and learn more about LazerPay.

    If you're a bit busy at the moment feel free to forward any pitch deck or investment memo to my email: [email protected]

    Thanks! - Helom

    opened by helomberhane 1
Releases(v0.2.22)
Owner
LazerPay
Lazerpay Finance
LazerPay
An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.

Universal Redux What and Why Universal Redux is an npm package that when used as a dependency in your project provides a universal (isomorphic) render

Buck DeFore 462 May 22, 2022
Payment Processor in smart contract and pay with crypto for business

Decentralized Pay With Crypto Implementation Tech Stack Node.js React Solidity S

Sercan ÇELENK 14 Sep 24, 2022
TaxiApp-react-typescript - A simple taxi application that allows you to look for a taxi nearby your place

Taxi Application A simple taxi application that allows you to look for a taxi ne

carmen 1 Aug 31, 2022
This single-page app allows you to browse through 250 pokemon cards, filter them by type and open every single card to see its description

This single-page app allows you to browse through 250 pokemon cards, filter them by type and open every single card to see its description. I used React and Redux to fetch Pokemon data from the API.

Alejandro Ramos 3 Oct 25, 2022
Msal-react-tester - A tester package when using msal-react in your application

MSAL React Tester is a NPM package to allows you creating unit tests for any of your components that need to be authenticated (or not) using the msal-react package and Azure AD

Sébastien Pertus 14 Dec 20, 2022
Free-from-jsx.macro - Babel macro that allows you to use a flutter like render syntax

Free-from-jsx.macro - Babel macro that allows you to use a flutter like render syntax

Gabriel Rohden 3 Jul 7, 2022
ReservoirKit is a react package that makes it easy to add buying NFTs into your dApp. It's intuitive, responsive and customizable.

ReservoirKit is a react package that makes it easy to add buying NFTs into your dApp. It's intuitive, responsive and customizable.

Reservoir Protocol 34 Dec 26, 2022
Braian D. Vaylet 17 Oct 22, 2022
Nextacular 19 Dec 1, 2022
A simple react native starter template that bootstraps development of your mobile application

rn-start-template A simple react native starter template that bootstraps development of your mobile application. What's inside React native 0.63 templ

null 3 Jan 15, 2022