\n\n {\n handleFlutterPayment({\n callback: (response) => {\n console.log(response);\n closePaymentModal() // this will close the modal programmatically\n },\n onClose: () => {},\n });\n }}\n >\n Payment with React hooks\n \n
\n );\n}\n```\n\n### Next.js Applications\n\nThe 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.\n\n#### App Router (Next.js 13+)\n\nAdd the `'use client'` directive at the top of your payment component:\n\n```javascript\n'use client';\n\nimport React from 'react';\nimport { useFlutterwave, closePaymentModal } from 'flutterwave-react-v3';\n\nexport default function FlutterwavePayment() {\n const config = {\n public_key: 'FLWPUBK-**************************-X',\n tx_ref: Date.now(),\n amount: 100,\n currency: 'NGN',\n payment_options: 'card,mobilemoney,ussd',\n customer: {\n email: 'user@gmail.com',\n phone_number: '070********',\n name: 'john doe',\n },\n customizations: {\n title: 'My Payment',\n description: 'Payment for items in cart',\n logo: 'https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg',\n },\n };\n\n const handleFlutterPayment = useFlutterwave(config);\n\n return (\n
\n );\n}\n```\n\nYou can also use the FlutterWaveButton component:\n\n```javascript\n'use client';\n\nimport React from 'react';\nimport { FlutterWaveButton, closePaymentModal } from 'flutterwave-react-v3';\n\nexport default function PaymentButton() {\n const config = {\n public_key: 'FLWPUBK-**************************-X',\n tx_ref: Date.now(),\n amount: 100,\n currency: 'NGN',\n payment_options: 'card,mobilemoney,ussd',\n customer: {\n email: 'user@gmail.com',\n phone_number: '070********',\n name: 'john doe',\n },\n customizations: {\n title: 'My store',\n description: 'Payment for items in cart',\n logo: 'https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg',\n },\n };\n\n const fwConfig = {\n ...config,\n text: 'Pay with Flutterwave!',\n callback: (response) => {\n console.log(response);\n closePaymentModal();\n },\n onClose: () => {},\n };\n\n return (\n
\n
Checkout
\n \n
\n );\n}\n```\n\n#### Pages Router (Next.js 12 and below)\n\nUse dynamic imports with SSR disabled:\n\n```javascript\nimport dynamic from 'next/dynamic';\n\n// Dynamically import the payment component with SSR disabled\nconst FlutterwavePayment = dynamic(\n () => import('../components/FlutterwavePayment'),\n { ssr: false }\n);\n\nexport default function CheckoutPage() {\n return (\n
\n
Checkout
\n \n
\n );\n}\n```\n\nThen create your payment component in `components/FlutterwavePayment.js`:\n\n```javascript\nimport React from 'react';\nimport { useFlutterwave, closePaymentModal } from 'flutterwave-react-v3';\n\nexport default function FlutterwavePayment() {\n const config = {\n public_key: 'FLWPUBK-**************************-X',\n tx_ref: Date.now(),\n amount: 100,\n currency: 'NGN',\n payment_options: 'card,mobilemoney,ussd',\n customer: {\n email: 'user@gmail.com',\n phone_number: '070********',\n name: 'john doe',\n },\n customizations: {\n title: 'My Payment',\n description: 'Payment for items in cart',\n logo: 'https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg',\n },\n };\n\n const handleFlutterPayment = useFlutterwave(config);\n\n return (\n
\n );\n}\n```\n\n**Important Notes:**\n- Always use the `'use client'` directive when using Next.js App Router (Next.js 13+)\n- The Flutterwave script loads client-side only and cannot be server-side rendered\n- Ensure payment components are client components, not server components\n- For Pages Router, use `dynamic` import with `ssr: false` to prevent server-side rendering errors\n\n### Recurring Payments\n\nPass the payment plan ID into your payload to make [recurring payments](https://developer.flutterwave.com/docs/recurring-payments/payment-plans).\n\n\n```javascript\nimport React from 'react';\nimport { useFlutterwave, closePaymentModal } from 'flutterwave-react-v3';\n\nexport default function App() {\n const config = {\n public_key: 'FLWPUBK-**************************-X',\n tx_ref: Date.now(),\n amount: 100,\n currency: 'NGN',\n payment_options=\"card\",\n payment_plan=\"3341\",\n customer: {\n email: 'user@gmail.com',\n phone_number: '070********',\n name: 'john doe',\n },\n meta = { counsumer_id: \"7898\", consumer_mac: \"kjs9s8ss7dd\" },\n customizations: {\n title: 'my Payment Title',\n description: 'Payment for items in cart',\n logo: 'https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg',\n },\n };\n\n const handleFlutterPayment = useFlutterwave(config);\n\n return (\n
\n
Hello Test user
\n\n {\n handleFlutterPayment({\n callback: (response) => {\n console.log(response);\n closePaymentModal() // this will close the modal programmatically\n },\n onClose: () => {},\n });\n }}\n >\n Payment with React hooks\n \n
\n );\n}\n```\n\n### Parameters\n\nRead more about our parameters and how they can be used [here](https://developer.flutterwave.com/docs/collecting-payments/inline).\n\n| Parameter | Always Required ? | Description |\n| ------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| public_key | True | Your API public key |\n| tx_ref | True | Your transaction reference. This MUST be unique for every transaction |\n| amount | True | Amount to charge the customer. |\n| currency | False | currency to charge in. Defaults to NGN |\n| integrity_hash | False | This is a sha256 hash of your FlutterwaveCheckout values, it is used for passing secured values to the payment gateway. |\n| payment_options | True | This specifies the payment options to be displayed e.g - card, mobilemoney, ussd and so on. |\n| payment_plan | False | This is the payment plan ID used for Recurring billing |\n| 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. |\n| customer | True | This is an object that can contains your customer details: e.g - 'customer': {'email': 'example@example.com','phone_number': '08012345678','name': 'Takeshi Kovacs' } |\n| 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 |\n| 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' } |\n| 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' } |\n| callback (function) | False | This is the function that runs after payment is completed |\n| close (function) | False | This is the function that runs after payment modal is closed |\n\n## Other methods and descriptions:\n\nMethods provided by the React SDK:\n\n| Method Name | Parameters | Returns |Description |\n| ------------- | ------------- | ------------- | ------------- |\n| closePaymentModal | Null | Null | This methods allows you to close the payment modal via code. |\n\nPlease checkout [Flutterwave Documentation](https://developer.flutterwave.com/docs/flutterwave-standard) for other available options you can add to the tag.\n\n\n\n## Debugging Errors\n\nWe 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).\n\nFor `authorization` and `validation` error responses, double-check your API keys and request. If you get a `server` error, kindly engage the team for support.\n\n\n\n# Support\n\nFor 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).\n\nYou can also follow us [@FlutterwaveEng](https://twitter.com/FlutterwaveEng) and let us know what you think 😊.\n\n\n\n## Contribution Guidelines\n\nWe welcome contributions from the community. Read more about our community contribution guidelines [here](/CONTRIBUTING.md).\n\n\n\n\n## License\n\nBy contributing to this library, you agree that your contributions will be licensed under its [MIT license](/LICENSE.md).\n\nCopyright (c) Flutterwave Inc.\n\n\n\n## Contributors\n\n- [Somto Ugeh](https://twitter.com/SomtoUgeh)\n","readmeFilename":"README.md"}
![](\"https://flutterwave.com/images/logo/full.svg\" "\\"Flutterwave\\""){kind=logo}
\n