# react-flutterwave

> This is a react package for implementing flutterwave collection gateway

Latest version **1.0.4** (published 2020-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-flutterwave
pnpm add react-flutterwave
yarn add react-flutterwave
bun add react-flutterwave
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-08-09 |
| First published | 2020-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 29.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Somto M.Ugeh |
| Maintainers | somtougeh |
| Keywords | javaScript, typeScript, github, react, open source, payments, flutterwave, collections |

## Links

- npm: https://www.npmjs.com/package/react-flutterwave
- Repository: https://github.com/SomtoUgeh/react-flutterwave
- Homepage: https://github.com/SomtoUgeh/react-flutterwave#readme
- Issues: https://github.com/SomtoUgeh/react-flutterwave/issues
- npm.io page: https://npm.io/package/react-flutterwave

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2020-08-09
- 1.0.3 — 2020-08-09
- 1.0.2 — 2020-08-09
- 1.0.1 — 2020-08-09
- 1.0.0 — 2020-08-09

## README

# React-Flutterwave

> This is a react package for implementing Flutterwave collection gateway

## Installation

```bash
$ npm install react-flutterwave
# or
$ yarn add react-flutterwave
```

## Examples

```javascript
import React from 'react';
import { useFlutterwave, FlutterWaveButton } from 'react-flutterwave';

export default function App() {
  const config = {
    public_key: 'YOUR_FW_PUBLIC_KEY',
    tx_ref: Date.now(),
    amount: 100,
    currency: 'NGN',
    payment_options: 'card,mobilemoney,ussd',
    customer: {
      email: 'user@gmail.com',
      phonenumber: '08102909304',
      name: 'yemi desola',
    },
    customizations: {
      title: 'My store',
      description: 'Payment for items in cart',
      logo: 'https://assets.piedpiper.com/logo.png',
    },
  };

  const handleFlutterPayment = useFlutterwave(config);

  const fwConfig = {
    ...config,
    text: 'Pay with Flutterwave!',
    callback: (response) => {
      console.log(response);
    },
    onClose: () => {},
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <button
        onClick={() => {
          handleFlutterPayment({
            callback: (response) => {
              console.log(response);
            },
            onClose: () => {},
          });
        }}
      >
        Testing FW Payment
      </button>

      <FlutterWaveButton {...fwConfig} />
    </div>
  );
}
```

Please checkout
[Flutterwave Documentation](https://developer.flutterwave.com/docs/flutterwave-standard)
for other available options you can add to the tag

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE)
file for details

## Contributions ✨

1. Fork it!
2. Create your feature branch: `git checkout -b feature-name`
3. Commit your changes: `git commit -am 'Some commit message'`
4. Push to the branch: `git push origin feature-name`
5. Submit a pull request

Follow on Twitter [@somtougeh](https://twitter.com/SomtoUgeh)

This project follows the
[all-contributors](https://github.com/all-contributors/all-contributors)
specification. Contributions of any kind welcome!

---
_Source: https://npm.io/package/react-flutterwave · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._