Merge pull request #63 from Flutterwave/dev

Pull deps and bugfixes from the dev branch

Author: corneliusyaovi

.babelrc.js

@@ -8,6 +8,7 @@ module.exports = {
         },
       },
     ],
+    '@babel/preset-react',
     '@babel/preset-typescript',
   ],
 

.gitignore

@@ -22,6 +22,7 @@ lib-cov
 # Coverage directory used by tools like istanbul
 coverage
 *.lcov
+test-report/
 
 # nyc test coverage
 .nyc_output

README.md

@@ -38,7 +38,8 @@ Available features include:
 
 1. Flutterwave version 3 API keys
 2. Node version >= 6.9.x and npm >= 3.x.x
-3. React version  >= 14
+3. React version >= 15 (including React 19)
+4. For Next.js: Version 12+ (both App Router and Pages Router supported)
 
 
 ## Installation
@@ -89,7 +90,8 @@ Add Flutterwave to your projects as a component or a react hook:
 
 1. [As a Component](#components)
 2. [Directly in your code](#hooks)
-3. [Making recurrent payments](#recurring-payments)
+3. [Next.js Applications](#nextjs-applications)
+4. [Making recurrent payments](#recurring-payments)
 
 
 ### Components
@@ -186,6 +188,184 @@ export default function App() {
 }
 ```
 
+### Next.js Applications
+
+The Flutterwave React SDK works seamlessly with Next.js applications. Since the library loads external scripts, you must ensure it runs only on the client side.
+
+#### App Router (Next.js 13+)
+
+Add the `'use client'` directive at the top of your payment component:
+
+```javascript
+'use client';
+
+import React from 'react';
+import { useFlutterwave, closePaymentModal } from 'flutterwave-react-v3';
+
+export default function FlutterwavePayment() {
+  const config = {
+    public_key: 'FLWPUBK-**************************-X',
+    tx_ref: Date.now(),
+    amount: 100,
+    currency: 'NGN',
+    payment_options: 'card,mobilemoney,ussd',
+    customer: {
+      email: 'user@gmail.com',
+      phone_number: '070********',
+      name: 'john doe',
+    },
+    customizations: {
+      title: 'My Payment',
+      description: 'Payment for items in cart',
+      logo: 'https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg',
+    },
+  };
+
+  const handleFlutterPayment = useFlutterwave(config);
+
+  return (
+    <div>
+      <h1>Make Payment</h1>
+      <button
+        onClick={() => {
+          handleFlutterPayment({
+            callback: (response) => {
+              console.log(response);
+              closePaymentModal();
+            },
+            onClose: () => {},
+          });
+        }}
+      >
+        Pay with Flutterwave
+      </button>
+    </div>
+  );
+}
+```
+
+You can also use the FlutterWaveButton component:
+
+```javascript
+'use client';
+
+import React from 'react';
+import { FlutterWaveButton, closePaymentModal } from 'flutterwave-react-v3';
+
+export default function PaymentButton() {
+  const config = {
+    public_key: 'FLWPUBK-**************************-X',
+    tx_ref: Date.now(),
+    amount: 100,
+    currency: 'NGN',
+    payment_options: 'card,mobilemoney,ussd',
+    customer: {
+      email: 'user@gmail.com',
+      phone_number: '070********',
+      name: 'john doe',
+    },
+    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();
+    },
+    onClose: () => {},
+  };
+
+  return (
+    <div>
+      <h1>Checkout</h1>
+      <FlutterWaveButton {...fwConfig} />
+    </div>
+  );
+}
+```
+
+#### Pages Router (Next.js 12 and below)
+
+Use dynamic imports with SSR disabled:
+
+```javascript
+import dynamic from 'next/dynamic';
+
+// Dynamically import the payment component with SSR disabled
+const FlutterwavePayment = dynamic(
+  () => import('../components/FlutterwavePayment'),
+  { ssr: false }
+);
+
+export default function CheckoutPage() {
+  return (
+    <div>
+      <h1>Checkout</h1>
+      <FlutterwavePayment />
+    </div>
+  );
+}
+```
+
+Then create your payment component in `components/FlutterwavePayment.js`:
+
+```javascript
+import React from 'react';
+import { useFlutterwave, closePaymentModal } from 'flutterwave-react-v3';
+
+export default function FlutterwavePayment() {
+  const config = {
+    public_key: 'FLWPUBK-**************************-X',
+    tx_ref: Date.now(),
+    amount: 100,
+    currency: 'NGN',
+    payment_options: 'card,mobilemoney,ussd',
+    customer: {
+      email: 'user@gmail.com',
+      phone_number: '070********',
+      name: 'john doe',
+    },
+    customizations: {
+      title: 'My Payment',
+      description: 'Payment for items in cart',
+      logo: 'https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg',
+    },
+  };
+
+  const handleFlutterPayment = useFlutterwave(config);
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          handleFlutterPayment({
+            callback: (response) => {
+              console.log(response);
+              closePaymentModal();
+            },
+            onClose: () => {},
+          });
+        }}
+      >
+        Pay with Flutterwave
+      </button>
+    </div>
+  );
+}
+```
+
+**Important Notes:**
+- Always use the `'use client'` directive when using Next.js App Router (Next.js 13+)
+- The Flutterwave script loads client-side only and cannot be server-side rendered
+- Ensure payment components are client components, not server components
+- For Pages Router, use `dynamic` import with `ssr: false` to prevent server-side rendering errors
+
 ### Recurring Payments
 
 Pass the payment plan ID into your payload to make [recurring payments](https://developer.flutterwave.com/docs/recurring-payments/payment-plans).

dist/FWButton.d.ts

@@ -8,5 +8,5 @@ interface FlutterWaveButtonProps extends FlutterwaveConfig {
     children?: React.ReactNode;
     callback: (response: FlutterWaveResponse) => void;
 }
-declare const FlutterWaveButton: ({ text, className, children, callback, onClose, disabled, ...config }: FlutterWaveButtonProps) => JSX.Element;
+declare const FlutterWaveButton: ({ text, className, children, callback, onClose, disabled, ...config }: FlutterWaveButtonProps) => React.ReactElement;
 export default FlutterWaveButton;

example/README.md

@@ -1,68 +1,104 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# Flutterwave React v3 Example
 
-## Available Scripts
+This example demonstrates how to integrate Flutterwave payment gateway into your React application using the `flutterwave-react-v3` package.
 
-In the project directory, you can run:
+## Features Demonstrated
 
-### `yarn start`
+✅ **Three Payment Integration Methods:**
+- Custom button with `useFlutterwave` hook
+- Pre-built `FlutterWaveButton` component
+- Custom styled payment buttons
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+✅ **Real-time Configuration:**
+- Dynamic amount input
+- Customer information management
+- Live payment preview
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
+✅ **Modern UI/UX:**
+- Responsive design
+- Beautiful gradient backgrounds
+- Interactive hover effects
+- Mobile-friendly layout
 
-### `yarn test`
+## Getting Started
 
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+### Prerequisites
 
-### `yarn build`
+- Node.js (v14 or higher)
+- npm or yarn
+- Flutterwave account ([Sign up here](https://flutterwave.com))
 
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
+### Installation
 
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
+1. Install dependencies:
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+```bash
+npm install
+# or
+yarn install
+```
 
-### `yarn eject`
+2. Update your Flutterwave public key in `src/App.js`:
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+```javascript
+const config = {
+  public_key: "YOUR_FLUTTERWAVE_PUBLIC_KEY", // Replace with your key
+  // ... other config
+};
+```
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### Running the Example
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+```bash
+npm start
+# or
+yarn start
+```
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-## Learn More
+## Test Credentials
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+For testing purposes, use these Flutterwave test card details:
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+- **Card Number:** 5531 8866 5214 2950
+- **CVV:** Any 3 digits
+- **Expiry:** Any future date
+- **PIN:** 3310
+- **OTP:** 12345
 
-### Code Splitting
+## Package Information
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+This example uses `flutterwave-react-v3` - the official Flutterwave React package with:
 
-### Analyzing the Bundle Size
+- ✅ 100% Test Coverage
+- ✅ TypeScript Support
+- ✅ React 19 Compatible
+- ✅ Multiple Payment Options
+- ✅ Comprehensive Documentation
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+## Learn More
+
+- [Flutterwave Documentation](https://developer.flutterwave.com/docs)
+- [React Documentation](https://react.dev)
+- [Package Repository](https://github.com/Flutterwave/React-v3)
+
+## Available Scripts
 
-### Making a Progressive Web App
+### `npm start`
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+Runs the app in development mode at [http://localhost:3000](http://localhost:3000).
 
-### Advanced Configuration
+### `npm test`
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+Launches the test runner in interactive watch mode.
 
-### Deployment
+### `npm run build`
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+Builds the app for production to the `build` folder.
 
-### `yarn build` fails to minify
+## Support
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+For issues or questions:
+- [GitHub Issues](https://github.com/Flutterwave/React-v3/issues)
+- [Flutterwave Support](https://support.flutterwave.com)