Squad Payment is a comprehensive payments solution powered by GTCO that enables all types of businesses to make and receive payments from anywhere in the world.

Note: Before you proceed, signup for a Sandbox account at Squad Sandbox platform to obtain necessary public and private keys.

To install, run:

npm install react-squadpay 

import SquadPay from "react-squadpay"

function App() {

  const params = {
    key: "test_pk_sample-public-key-1",
    email: "[email protected]", // from HTML form
    amount: 5000, // no need to multiply by 100 for kobo, its taken care for you
    currencyCode: "NGN"
  }

  const Close = () => {
    console.log("Widget closed")
  }

  const Load = () => {
    console.log("Widget Loaded")
  }

  /**
   * @param {object} data
   * @description  reponse when payment is successful
   */
  const Success = (data) => {
    console.log(data)
    console.log("Widget success")
  }

  return (
    <div>
        <SquadPay className='css_class_here' text='Pay now' params={params} onClose={Close} onLoad={Load} onSuccess={(res)=>Success(res)} />
    </div>
  )
}

export default App

Note:

• amount should be the actual amount, that is, if payment is N1,000 enter N1000 as the amount. conversion to kobo is automatically handled.
• There is an error notifier alert included

Below is a list of all the SquadPay official supported parameters.

After a transaction, a sample response from the onSuccess function will be:

{
    "Customer_name": null,
    "access_token": undefined,
    "amount": 100000,
    "auth_url": undefined,
    "callback_url": null,
    "config_meta": {
        "browser_screen_height": 948,
        "browser_screen_width": 1307
    },
    "currency_code": "NGN",
    "email": "[email protected]",
    "formattedTransactionAmount": "1,000.00",
    "is_recurring": false,
    "key": "test_pk_sample-public-key-1",
    "merchant_id": undefined,
    "merchant_logo": undefined,
    "metadata": null,
    "pass_charge": false,
    "payment_channels": null,
    "recurring": {
        "type": 0
    },
    "transaction_amount": 100000,
    "transaction_ref": null
}

Below are list of the props of the <SquadPay /> component.

to go live refer to the Squad API documentation section for live payment

You can check out Squad Documentation for other guides and options.

1. Fork the repo
2. Create a branch for the new feature or suggestion: git branch feature-name
3. Checkout to feature branch: git checkout feature-name
4. Commit your changes: git commit -m "commit-type: commit-message". Please specify a commit type
5. Push to the feature branch: git push origin feature-name
6. Submit a pull request

Thanks!

Samuel Henshaw

The MIT License (MIT). Please see License File for more information.