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

); }; 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)