### Install Dependencies

Source: https://github.com/flutterwave/react-v3/blob/master/example/README.md

Install project dependencies using npm or yarn.

```bash
npm install
# or
yarn install
```

--------------------------------

### Run Development Server

Source: https://github.com/flutterwave/react-v3/blob/master/example/README.md

Start the React application in development mode. The app will be accessible at http://localhost:3000.

```bash
npm start
# or
yarn start
```

--------------------------------

### Install Flutterwave React SDK

Source: https://github.com/flutterwave/react-v3/blob/master/README.md

Install the Flutterwave React SDK using npm or yarn. Ensure your Node.js and npm versions meet the requirements.

```bash
$ npm install flutterwave-react-v3

# or
$ yarn add flutterwave-react-v3
```

--------------------------------

### Flutterwave Recurring Payments with React Hooks

Source: https://github.com/flutterwave/react-v3/blob/master/README.md

Initiate recurring payments by including a `payment_plan` ID in the configuration. This example demonstrates setting up a payment that can be charged periodically.

```javascript
import React from "react";
import { useFlutterwave, 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',
    payment_plan: '3341',
    customer: {
      email: 'user@gmail.com',
      phone_number: '070********',
      name: 'John Doe',
    },
    meta: {
      consumer_id: '7898',
      consumer_mac: 'kjs9s8ss7dd',
    },
    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',
    },
  };

  const handleFlutterPayment = useFlutterwave(config);

  return (
    <div className="App">
      <h1>Hello Test User</h1>

      <button
        onClick={() => {
          handleFlutterPayment({
            callback: (response) => {
              console.log(response);
              closePaymentModal();
            },
            onClose: () => {},
          });
        }}
      >
        Payment with React hooks
      </button>
    </div>
  );
}
```

--------------------------------

### Initialize Flutterwave Hook with Configuration

Source: https://github.com/flutterwave/react-v3/blob/master/README.md

Import and use the `useFlutterwave` hook in your React component. Pass your public key, transaction details, currency, customer information, and customization options. The hook returns a function to initiate the payment modal.

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

const PaymentComponent = () => {
  const config = {
    public_key: 'FLWPUBK-**************************-X',
    tx_ref: `${Date.now()}`, // String format is safer
    amount: 100,
    currency: 'NGN',
    payment_options: 'card,mobilemoney,ussd',
    customer: {
      email: 'user@gmail.com',
      phone_number: '070********',
      name: 'john doe',
    },
    customizations: {
      title: 'my Payment Title',
      description: 'Payment for items in cart',
      logo: 'https://your-logo-url.com/logo.png',
    },
  };

  //Initialize the hook
  const handleFlutterPayment = useFlutterwave(config);

  return (
    <div className="App">
      <button
        onClick={() => {
          handleFlutterPayment({
            callback: (response) => {
               console.log("Payment Response:", response);
               closePaymentModal();
            },
            onClose: () => {
              console.log("User closed the modal");
            },
          });
        }}
      >
        Pay Now
      </button>
    </div>
  );
}

export default PaymentComponent;
```

--------------------------------

### Commit Message Formatting

Source: https://github.com/flutterwave/react-v3/blob/master/CONTRIBUTING.md

Use a clear and concise format for commit messages. A brief summary followed by a more detailed explanation is recommended for larger changes.

```markdown
$ git commit -m "A brief summary of the commit
> 
A paragraph describing what changed and its impact."
```

--------------------------------

### React Payment Integration with Hooks

Source: https://github.com/flutterwave/react-v3/blob/master/README.md

Use the `useFlutterwave` hook for handling payments in React applications. Ensure all necessary configurations are provided.

```javascript
import React from 'react';
import { useFlutterwave, 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',
      phone_number: '070********',
      name: 'john doe',
    },
    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',
    },
  };

  const handleFlutterPayment = useFlutterwave(config);

  return (
    <div className="App">
     <h1>Hello Test user</h1>

      <button
        onClick={() => {
          handleFlutterPayment({
            callback: (response) => {
               console.log(response);
               closePaymentModal(); // this will close the modal programmatically
            },
            onClose: () => {},
          });
        }}
      >
        Payment with React hooks
      </button>
    </div>
  );
}
```

--------------------------------

### Next.js App Router Payment with FlutterWaveButton

Source: https://github.com/flutterwave/react-v3/blob/master/README.md

Utilize the `FlutterWaveButton` component for a declarative payment integration in Next.js App Router. Ensure the `'use client'` directive is present.

```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>
  );
}
```

--------------------------------

### Flutterwave Payment Component with React Hooks

Source: https://github.com/flutterwave/react-v3/blob/master/README.md

A React component that utilizes the `useFlutterwave` hook to initiate a payment. Configure payment details, customer information, and customizations. Ensure the Flutterwave script loads client-side.

```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>
  );
}
```

--------------------------------

### Next.js App Router Payment with Hooks

Source: https://github.com/flutterwave/react-v3/blob/master/README.md

Integrate Flutterwave payments in Next.js 13+ App Router using the `useFlutterwave` hook. Remember to add the `'use client'` directive.

```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>
  );
}
```

--------------------------------

### Integrate Flutterwave as a Component

Source: https://github.com/flutterwave/react-v3/blob/master/README.md

Use the `FlutterWaveButton` component for a declarative approach to payment integration. Configure it with payment details, button text, and callback functions for success and modal closure. The `closePaymentModal` function can be used to programmatically close the modal.

```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',
      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(); // this will close the modal programmatically
    },
    onClose: () => {},
  };

  return (
    <div className="App">
     <h1>Hello Test user</h1>
     <FlutterWaveButton {...fwConfig} />
    </div>
  );
}
```

--------------------------------

### Update Flutterwave Public Key

Source: https://github.com/flutterwave/react-v3/blob/master/example/README.md

Replace 'YOUR_FLUTTERWAVE_PUBLIC_KEY' with your actual Flutterwave public key in the configuration object within src/App.js.

```javascript
const config = {
  public_key: "YOUR_FLUTTERWAVE_PUBLIC_KEY", // Replace with your key
  // ... other config
};
```

--------------------------------

### Dynamic Payment Component for Next.js Pages Router

Source: https://github.com/flutterwave/react-v3/blob/master/README.md

Dynamically import your payment component to disable server-side rendering. This is crucial for client-side payment integrations in Next.js versions 12 and below.

```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>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.