https://github.com/seerbit/seerbit-reactjs
ReactJS Wrapper for SeerBit
https://github.com/seerbit/seerbit-reactjs
Last synced: about 1 year ago
JSON representation
ReactJS Wrapper for SeerBit
- Host: GitHub
- URL: https://github.com/seerbit/seerbit-reactjs
- Owner: seerbit
- Created: 2020-11-14T07:48:51.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-10-16T10:34:39.000Z (over 2 years ago)
- Last Synced: 2024-11-03T03:39:05.840Z (over 1 year ago)
- Language: TypeScript
- Size: 389 KB
- Stars: 0
- Watchers: 1
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Seerbit Checkout Wrapper for ReactJS
# Requirements
This module was built and tested using React 15.0.0 - 18.0.0
## Get Started
A simple way to add Seerbit to your React application
## Install
```bash
npm install --save seerbit-reactjs
```
OR
```bash
yarn add seerbit-reactjs
```
## Usage
Add Seerbit to your projects:
1. As a React Hook
2. As a React Button Component
### As React Hook
```jsx
import React, { Component } from "react";
import { useSeerbitPayment } from "seerbit-reactjs"
const App = () => {
const options = {
public_key: "YOUR_PUBLIC_KEY",
amount: 100,
tranref: new Date().getTime(),
currency: "NGN",
email: "test@mail.com",
full_name: "Sam Smart",
mobile_no: "081234566789",
description: "test",
tokenize: false,
planId: "",
pocketId: "",
vendorId: "",
customization: {
theme: {
border_color: "#000000",
background_color: "#004C64",
button_color: "#0084A0",
},
payment_method: ["card", "account", "transfer", "wallet", "ussd"],
display_fee: true, // true
display_type: "embed", //inline
logo: "logo_url | base64",
},
};
const close = (close) => {
console.log(close);
};
const callback = (response: any, closeCheckout: any) => {
console.log(response);
setTimeout(() => closeCheckout(), 2000);
};
const initializePayment = useSeerbitPayment(options, callback, close);
return (
Make Payment
Pay
);
};
export default App
```
### As Button Component
```jsx
import React, { Component } from "react";
import { SeerbitButton } from "seerbit-reactjs"
const App = () => {
const options = {
public_key: "YOUR_PUBLIC_KEY",
amount: 100,
tranref: new Date().getTime(),
currency: "NGN",
email: "test@mail.com",
full_name: "Sam Smart",
mobile_no: "081234566789",
description: "test",
tokenize: false,
planId: "",
pocketId: "",
vendorId: "",
customization: {
theme: {
border_color: "#000000",
background_color: "#004C64",
button_color: "#0084A0",
},
payment_method: ["card", "account", "transfer", "wallet", "ussd"],
display_fee: true, // true
display_type: "embed", //inline
logo: "logo_url | base64",
},
};
const close = (close) => {
console.log(close);
};
const callback = (response: any, closeCheckout: any) => {
console.log(response);
setTimeout(() => closeCheckout(), 2000);
};
const paymentProps = {
...options,
callback,
close,
};
return (
Make Payment
);
};
export default App
```
Please checkout Seerbit Documentation for other available options you can add to the tag
## License
MIT © [seerbit](https://github.com/seerbit)