Integrate Squad Payment Modal with your react app.

Introducing "Squad Pay": Your Gateway to Effortless Payment Integration in React!

Elevate your React application's payment capabilities with Squad Pay – the ultimate solution for crafting a seamless payment journey within your mobile or web app. With Squad Pay, you're empowered to effortlessly integrate the Squad Payment Modal into your application, unlocking a world of hassle-free transactions for your users.

Say goodbye to the complexities of payment integration – Squad Pay streamlines the process, allowing you to start accepting payments in record time. Whether you're a seasoned developer or diving into the world of React for the first time, Squad Pay simplifies the integration process, ensuring a smooth and intuitive experience every step of the way.

• Versatile Payment Options: Enable transactions with ease using a variety of payment methods, including Card, Bank Account, Bank Transfers, and USSD. With Squad Pay, flexibility is at your fingertips, catering to the diverse needs of your users.

See more information on the Squad Docs

Experience the power of SquadPay today and revolutionize the way you handle payments in your React applications. Seamlessly blend cutting-edge technology with user-centric design, and embark on a journey towards unparalleled payment excellence with SquadPay.

1. Installation
2. Usage
   • useSquadPay
   • SquadProvider
3. License

npm

npm i @toluade/squad-pay-react --save

yarn

yarn add @toluade/squad-pay-react

You can add Squad Pay to your projects as a react hook or as a context provider and use the context in components under the provider tree:

Note: The useSquadPay hook can take in all the parameter (such as currency_code, redirect_url, etc) passed in the squadPay function except amount and email.

import { useSquadPay } from "@toluade/squad-pay-react";

const publicKey = env_variable;

const App = () => {
  const squadPay = useSquadPay({
    publicKey,
  });

  const pay = () => {
    squadPay({
      amount: 500,
      email: "example@email.com",
      currency_code: "NGN",
      redirect_link: "https://squadco.com",
    });
  };

  return <button onClick={pay}>Make Payment</button>;
};

export default App;

Note: The SquadProvider can take in all the parameter (such as currency_code, redirect_url, etc) passed in the squadPay function except amount and email.

import { SquadProvider } from "@toluade/squad-pay-react";
import PaymentPage from "./PaymentPage";

const publicKey = env_variable;

const App = () => {
  return (
    <SquadProvider publicKey={publicKey}>
      <PaymentPage />
    </SquadProvider>
  );
};

export default App;

import { useSquadContext } from "@toluade/squad-pay-react";

const PaymentPage = () => {
  const { squadPay } = useSquadContext();

  const pay = () => {
    squadPay({
      amount: 500,
      email: "example@email.com",
      currency_code: "NGN",
      redirect_link: "https://squadco.com",
    });
  };

  return (
    <div>
      <p>Kindly click on the button below to make your payment</p>
      <button onClick={pay}>Make Payment</button>
    </div>
  );
};

export default PaymentPage;

Read more about the parameters and how they can be used here.

MIT © Toluade