diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..97585fd
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,83 @@
+# Community contribution guide
+
+Thank you for taking the time to contribute to our library🙌🏾.
+
+In this section, we detail everything you need to know about contributing to this library.
+
+
+
+**[Code of Conduct](https://github.com/probot/template/blob/master/CODE_OF_CONDUCT.md)**
+
+## **I don't want to contribute, I have a question**
+
+Please don't raise an issue to ask a question. You can ask questions on our [forum](http://forum.flutterwave.com) or developer [slack](https://bit.ly/34Vkzcg). We have an army of Engineers on hand to answer your questions there.
+
+## How can I contribute?
+
+### Reporting a bug
+
+Have you spotted a bug? Fantastic! Before raising an issue, here are some things to do:
+
+1. Search to see if another user has reported the bug. For existing issues that are still open, add a comment instead of creating a new one.
+2. Check our forum and developer slack to confirm that we did not address it there.
+
+When you report an issue, it is important to:
+
+1. Explain the problem
+ - Use a clear and descriptive title to help us to identify the problem.
+ - Describe steps we can use to replicate the bug and be as precise as possible.
+ - Include screenshots of the error messages.
+2. Include details about your configuration and setup
+ - What version of the library are you using?
+ - Did you experience the bug on test mode or live?
+ - Do you have the recommended versions of the library dependencies?
+
+> 💡 Please make use of the issue template when reporting bugs.
+
+### Requesting a feature
+
+If you need an additional feature added to the library, kindly send us an email at developers@flutterwavego.com. Be sure to include the following in your request:
+
+1. A clear title that helps us to identify the requested feature.
+2. A brief description of the use case for that feature.
+3. Explain how this feature would be helpful to your integration.
+4. Library name and version.
+
+### Submitting changes (PR)
+
+Generally, you can make any of the following changes to the library:
+
+1. Bug fixes
+2. Performance improvement
+3. Documentation update
+4. Functionality change (usually new features)
+
+> 💡 Changes that are cosmetic in nature and do not add anything substantial to the stability, functionality, or testability of the library will generally not be accepted.
+
+Follow these steps when making a pull request to the library:
+
+1. Fork the repository and create your branch from master.
+2. For all types of changes (excluding documentation updates), add tests for the changes.
+3. If you are making a functionality change, update the docs to show how to use the new feature.
+4. Ensure all your tests pass.
+5. Make sure your code lints.
+6. Write clear log messages for your commits. one-liners are fine for small changes, but bigger changes should have a more descriptive commit message (see sample below).
+7. Use present tense for commit messages, "Add feature" not "Added feature”.
+8. Ensure that you fill out all sections of the PR template.
+9. Raise the PR against the `dev` branch.
+10. After you submit the PR, verify that all [status checks](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/collaborating-on-repositories-with-code-quality-features/about-status-checks) are passing
+
+```markdown
+$ git commit -m "A brief summary of the commit
+>
+> A paragraph describing what changed and its impact."
+```
+
+> 💡 For your pull request to be reviewed, you need to meet the requirements above. We may ask you to complete additional tests, or other changes before your pull request can be ultimately accepted.
+
+
+We encourage you to contribute and help make the library better for the community. Got questions? send us a [message](https://bit.ly/34Vkzcg).
+
+Thank you.
+
+The Flutterwave team 🦋
diff --git a/LICENSE b/LICENSE.md
similarity index 96%
rename from LICENSE
rename to LICENSE.md
index 7e0fa87..1c9bc22 100644
--- a/LICENSE
+++ b/LICENSE.md
@@ -1,6 +1,6 @@
MIT License
-Copyright (c) 2020 Joel Ugwumadu
+Copyright (c) 2020 Flutterwave
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 50626f3..299acfc 100644
--- a/README.md
+++ b/README.md
@@ -8,31 +8,44 @@
+
+
+## Introduction
+
+The React SDK helps you create seamless payment experiences in your React mobile or web app. By connecting to our modal, you can start collecting payment in no time.
+
+Available features include:
+
+- Collections: Card, Account, Mobile money, Bank Transfers, USSD, Barter, NQR.
+- Recurring payments: Tokenization and Subscriptions.
+- Split payments
+
## Table of Contents
-- [About](#about)
-- [Getting Started](#getting-started)
-- [Usage](#usage)
-- [Deployment](#deployment)
-- [Built Using](#build-tools)
-- [References](#references)
+1. [Requirements](#requirements)
+2. [Installation](#installation)
+3. [Initialization](#initialization)
+4. [Usage](#usage)
+5. [Support](#support)
+6. [Contribution Guidelines](#contribution-guidelines)
+7. [License](#license)
-
-## About
+
-This is a react package for implementing Flutterwave gateway with different payment methods.
+## Requirements
-
+1. Flutterwave version 3 API keys
+2. Node version >= 6.9.x and npm >= 3.x.x
+3. React version >= 14
-## Getting Started
-These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See [deployment](#deployment) for notes on how to deploy the project on a live system.
-See [references](#references) for links to dashboard and API documentation.
+
+## Installation
-### Installation
+Install the SDK
```bash
$ npm install flutterwave-react-v3
@@ -40,12 +53,97 @@ $ npm install flutterwave-react-v3
# or
$ yarn add flutterwave-react-v3
+```
+
+
+
+## Initialization
+
+Import useFlutterwave to any component in your application and pass your config
+
+```javascript
+import { useFlutterwave } from 'flutterwave-react-v3';
+ const config = {
+ public_key: 'FLWPUBK-**************************-X',
+ tx_ref: Date.now(),
+ amount: 100,
+ currency: 'NGN',
+ payment_options: 'card,mobilemoney,ussd',
+ customer: {
+ email: 'user@gmail.com',
+ phonenumber: '07064586146',
+ name: 'joel ugwumadu',
+ },
+ customizations: {
+ title: 'my Payment Title',
+ description: 'Payment for items in cart',
+ logo: 'https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg',
+ },
+ };
+ useFlutterwave(config)
```
+
+
+
## Usage
+You can use Flutterwave in your projects as a component or as a react Hooks:
+
+1. [As a Component](#using-flutterwave-as-a-component)
+2. [Directly in your code](#using-flutterwave-as-a-hook)
+
+
+
+### Components
+
+```javascript
+import React from 'react';
+import { FlutterWaveButton, closePaymentModal } from 'flutterwave-react-v3';
+
+export default function App() {
+ const config = {
+ public_key: 'FLWPUBK-**************************-X',
+ tx_ref: Date.now(),
+ amount: 100,
+ currency: 'NGN',
+ payment_options: 'card,mobilemoney,ussd',
+ customer: {
+ email: 'user@gmail.com',
+ phonenumber: '07064586146',
+ name: 'joel ugwumadu',
+ },
+ customizations: {
+ title: 'My store',
+ description: 'Payment for items in cart',
+ logo: 'https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg',
+ },
+ };
+
+ const fwConfig = {
+ ...config,
+ text: 'Pay with Flutterwave!',
+ callback: (response) => {
+ console.log(response);
+ closePaymentModal() // this will close the modal programmatically
+ },
+ onClose: () => {},
+ };
+
+ return (
+
+
Hello Test user
+
+
+ );
+}
+```
+
+
+
+
### Hooks
```javascript
@@ -95,52 +193,85 @@ export default function App() {
}
```
+### Recurring Payments
+
+Pass the payment plan ID into your payload to make [recurring payments](https://developer.flutterwave.com/docs/recurring-payments/payment-plans).
-### Components
```javascript
import React from 'react';
-import { FlutterWaveButton, closePaymentModal } from 'flutterwave-react-v3';
+import { useFlutterwave, closePaymentModal } from 'flutterwave-react-v3';
export default function App() {
- const config = {
+ const config = {
public_key: 'FLWPUBK-**************************-X',
tx_ref: Date.now(),
amount: 100,
currency: 'NGN',
- payment_options: 'card,mobilemoney,ussd',
+ payment_options="card",
+ payment_plan="3341",
customer: {
email: 'user@gmail.com',
phonenumber: '07064586146',
name: 'joel ugwumadu',
},
+ meta = { counsumer_id: "7898", consumer_mac: "kjs9s8ss7dd" },
customizations: {
- title: 'My store',
+ title: 'my Payment Title',
description: 'Payment for items in cart',
logo: 'https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg',
},
};
- const fwConfig = {
- ...config,
- text: 'Pay with Flutterwave!',
- callback: (response) => {
- console.log(response);
- closePaymentModal() // this will close the modal programmatically
- },
- onClose: () => {},
- };
+ const handleFlutterPayment = useFlutterwave(config);
return (
Hello Test user
-
+
+
);
}
```
+
+### Parameters
+
+Read more about our parameters and how they can be used [here](https://developer.flutterwave.com/docs/collecting-payments/inline).
+
+| Parameter | Always Required ? | Description |
+| ------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| public_key | True | Your API public key |
+| tx_ref | True | Your transaction reference. This MUST be unique for every transaction |
+| amount | True | Amount to charge the customer. |
+| currency | False | currency to charge in. Defaults to NGN |
+| integrity_hash | False | This is a sha256 hash of your FlutterwaveCheckout values, it is used for passing secured values to the payment gateway. |
+| payment_options | True | This specifies the payment options to be displayed e.g - card, mobilemoney, ussd and so on. |
+| payment_plan | False | This is the payment plan ID used for Recurring billing |
+| redirect_url | False | URL to redirect to when a transaction is completed. This is useful for 3DSecure payments so we can redirect your customer back to a custom page you want to show them. |
+| customer | True | This is an object that can contains your customer details: e.g - 'customer': {'email': 'example@example.com','phonenumber': '08012345678','name': 'Takeshi Kovacs' } |
+| subaccounts | False | This is an array of objects containing the subaccount IDs to split the payment into. Check our Split Payment page for more info |
+| meta | False | This is an object that helps you include additional payment information to your request e.g {'consumer_id': 23,'consumer_mac': '92a3-912ba-1192a' } |
+| customizations | True | This is an object that contains title, logo, and description you want to display on the modal e.g{'title': 'Pied Piper Payments','description': 'Middleout isn't free. Pay the price','logo': 'https://assets.piedpiper.com/logo.png' } |
+| callback (function) | False | This is the function that runs after payment is completed |
+| close (function) | False | This is the function that runs after payment modal is closed |
+
## Other methods and descriptions:
+Methods provided by the React SDK:
+
| Method Name | Parameters | Returns |Description |
| ------------- | ------------- | ------------- | ------------- |
| closePaymentModal | Null | Null | This methods allows you to close the payment modal via code. |
@@ -148,19 +279,45 @@ export default function App() {
Please checkout [Flutterwave Documentation](https://developer.flutterwave.com/docs/flutterwave-standard) for other available options you can add to the tag.
-
-## Deployment
+## Debugging Errors
+
+We understand that you may run into some errors while integrating our library. You can read more about our error messages [here](https://developer.flutterwave.com/docs/integration-guides/errors).
+
+For `authorization` and `validation` error responses, double-check your API keys and request. If you get a `server` error, kindly engage the team for support.
+
+
+
+
+# Support
+
+For additional assistance using this library, please create an issue on the Github repo or contact the developer experience (DX) team via [email](mailto:developers@flutterwavego.com) or on [slack](https://bit.ly/34Vkzcg).
+
+You can also follow us [@FlutterwaveEng](https://twitter.com/FlutterwaveEng) and let us know what you think 😊.
+
+
+
+## Contribution Guidelines
+
+We welcome contributions from the community. Read more about our community contribution guidelines [here](/CONTRIBUTING.md).
+
+
+
+
+## License
+
+By contributing to this library, you agree that your contributions will be licensed under its [MIT license](/LICENSE.md).
+
+Copyright (c) Flutterwave Inc.
+
-- Switch to Live Mode on the Dashboard settings page
-- Use the Live Public API key
-
## Built Using
- [Typescript](https://www.typescriptlang.org/)
- React
+
## Contributors
- [Somto Ugeh](https://twitter.com/SomtoUgeh)