{"id":15107137,"url":"https://github.com/iamraphson/react-paystack","last_synced_at":"2025-05-15T13:05:38.794Z","repository":{"id":39498467,"uuid":"95382874","full_name":"iamraphson/react-paystack","owner":"iamraphson","description":"ReactJS library for implementing paystack payment gateway","archived":false,"fork":false,"pushed_at":"2024-08-04T07:01:59.000Z","size":3071,"stargazers_count":465,"open_issues_count":45,"forks_count":166,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-11T22:05:37.791Z","etag":null,"topics":["javascript","payment-gateway","payment-integration","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-paystack","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamraphson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-25T20:03:12.000Z","updated_at":"2025-04-15T10:11:42.000Z","dependencies_parsed_at":"2024-06-18T12:41:42.833Z","dependency_job_id":"e2c79a3d-9726-4ec8-8601-cdaf0361a8b2","html_url":"https://github.com/iamraphson/react-paystack","commit_stats":{"total_commits":90,"total_committers":18,"mean_commits":5.0,"dds":"0.33333333333333337","last_synced_commit":"8246451e4f41a06f916ddea036eb06a588e7fe4f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamraphson%2Freact-paystack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamraphson%2Freact-paystack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamraphson%2Freact-paystack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamraphson%2Freact-paystack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamraphson","download_url":"https://codeload.github.com/iamraphson/react-paystack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254346624,"owners_count":22055808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","payment-gateway","payment-integration","reactjs"],"created_at":"2024-09-25T21:04:44.079Z","updated_at":"2025-05-15T13:05:38.745Z","avatar_url":"https://github.com/iamraphson.png","language":"TypeScript","readme":"# react-paystack\n\nThis is a react library for implementing paystack payment gateway\n\n## Demo\n\n![Demo](React_App_01.png?raw=true \"Demo Image\")\n\n## Get Started\n\nThis React library provides a wrapper to add Paystack Payments to your React application\n\n### Install\n\n```sh\nnpm install react-paystack --save\n```\n\nor with `yarn`\n\n```sh\nyarn add react-paystack\n```\n\n### Usage\n\nThis library can be implemented into any react application in 3 different ways:\n1. By using hooks provided by the library\n2. By using a button provided by the library\n3. By using a context consumer provided by the library\n\nNote that all 3 implementations produce the same results.\n\n\n### 1. Using the paystack hook\n```javascript\n  import React from 'react';\n  import logo from './logo.svg';\n  import { usePaystackPayment } from 'react-paystack';\n  import './App.css';\n  \n  const config = {\n      reference: (new Date()).getTime().toString(),\n      email: \"user@example.com\",\n      amount: 20000, //Amount is in the country's lowest currency. E.g Kobo, so 20000 kobo = N200\n      publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',\n  };\n  \n  // you can call this function anything\n  const onSuccess = (reference) =\u003e {\n    // Implementation for whatever you want to do with reference and after success call.\n    console.log(reference);\n  };\n\n  // you can call this function anything\n  const onClose = () =\u003e {\n    // implementation for  whatever you want to do when the Paystack dialog closed.\n    console.log('closed')\n  }\n\n  const PaystackHookExample = () =\u003e {\n      const initializePayment = usePaystackPayment(config);\n      return (\n        \u003cdiv\u003e\n            \u003cbutton onClick={() =\u003e {\n                initializePayment(onSuccess, onClose)\n            }}\u003ePaystack Hooks Implementation\u003c/button\u003e\n        \u003c/div\u003e\n      );\n  };\n  \n  function App() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003cheader className=\"App-header\"\u003e\n          \u003cimg src={logo} className=\"App-logo\" alt=\"logo\" /\u003e\n          \u003cp\u003e\n            Edit \u003ccode\u003esrc/App.js\u003c/code\u003e and save to reload.\n          \u003c/p\u003e\n          \u003ca\n            className=\"App-link\"\n            href=\"https://reactjs.org\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          \u003e\n            Learn React\n          \u003c/a\u003e\n        \u003c/header\u003e\n        \u003cPaystackHookExample /\u003e\n      \u003c/div\u003e\n    );\n  }\n  \n  export default App;\n```\n\n\n### 2. Using the paystack button\n\n``` javascript \n  import React from 'react';\n  import logo from './logo.svg';\n  import { PaystackButton } from 'react-paystack';\n  import './App.css';\n  \n  const config = {\n    reference: (new Date()).getTime().toString(),\n    email: \"user@example.com\",\n    amount: 20000, //Amount is in the country's lowest currency. E.g Kobo, so 20000 kobo = N200\n    publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',\n  };\n  \n  function App() {\n    // you can call this function anything\n    const handlePaystackSuccessAction = (reference) =\u003e {\n      // Implementation for whatever you want to do with reference and after success call.\n      console.log(reference);\n    };\n\n    // you can call this function anything\n    const handlePaystackCloseAction = () =\u003e {\n      // implementation for  whatever you want to do when the Paystack dialog closed.\n      console.log('closed')\n    }\n\n    const componentProps = {\n        ...config,\n        text: 'Paystack Button Implementation',\n        onSuccess: (reference) =\u003e handlePaystackSuccessAction(reference),\n        onClose: handlePaystackCloseAction,\n    };\n\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003cheader className=\"App-header\"\u003e\n          \u003cimg src={logo} className=\"App-logo\" alt=\"logo\" /\u003e\n          \u003cp\u003e\n            Edit \u003ccode\u003esrc/App.js\u003c/code\u003e and save to reload.\n          \u003c/p\u003e\n          \u003ca\n            className=\"App-link\"\n            href=\"https://reactjs.org\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          \u003e\n            Learn React\n          \u003c/a\u003e\n        \u003c/header\u003e\n        \u003cPaystackButton {...componentProps} /\u003e\n      \u003c/div\u003e\n    );\n  }\n  \n  export default App;\n```\n\n### 3. using the Paystack consumer\n``` Javascript\nimport React from 'react';\nimport logo from './logo.svg';\nimport { PaystackConsumer } from 'react-paystack';\nimport './App.css';\n  \n  const config = {\n      reference: (new Date()).getTime().toString(),\n      email: \"user@example.com\",\n      amount: 20000, //Amount is in the country's lowest currency. E.g Kobo, so 20000 kobo = N200\n      publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',\n  };\n  \n  // you can call this function anything\n  const handleSuccess = (reference) =\u003e {\n    // Implementation for whatever you want to do with reference and after success call.\n    console.log(reference);\n  };\n\n  // you can call this function anything\n  const handleClose = () =\u003e {\n    // implementation for  whatever you want to do when the Paystack dialog closed.\n    console.log('closed')\n  }\n\n  function App() {\n      const componentProps = {\n          ...config,\n          text: 'Paystack Button Implementation',\n          onSuccess: (reference) =\u003e handleSuccess(reference),\n          onClose: handleClose\n      };\n  \n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003cheader className=\"App-header\"\u003e\n          \u003cimg src={logo} className=\"App-logo\" alt=\"logo\" /\u003e\n          \u003cp\u003e\n            Edit \u003ccode\u003esrc/App.js\u003c/code\u003e and save to reload.\n          \u003c/p\u003e\n          \u003ca\n            className=\"App-link\"\n            href=\"https://reactjs.org\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          \u003e\n            Learn React\n          \u003c/a\u003e\n        \u003c/header\u003e\n        \u003cPaystackConsumer {...componentProps} \u003e\n          {({initializePayment}) =\u003e \u003cbutton onClick={() =\u003e initializePayment(handleSuccess, handleClose)}\u003ePaystack Consumer Implementation\u003c/button\u003e}\n        \u003c/PaystackConsumer\u003e\n      \u003c/div\u003e\n    );\n  }\n  \n  export default App;\n```\n\n### Sending Metadata with Transaction\nIf you want to send extra metadata e.g. Transaction description, user that made the transaction. Edit your config like so:\n\n```ts\n    const config = {\n       // Your required fields\n          metadata: {\n            custom_fields: [\n                {\n                    display_name: 'description',\n                    variable_name: 'description',\n                    value: 'Funding Wallet'\n                }\n                // To pass extra metadata, add an object with the same fields as above\n            ]\n        }\n    };\n```\n\nPlease checkout [Paystack Documentation](https://developers.paystack.co/docs/paystack-inline) for other available options you can add to the tag\n\n## Deployment\n\nREMEMBER TO CHANGE THE KEY WHEN DEPLOYING ON A LIVE/PRODUCTION SYSTEM\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b feature-name`\n3. Commit your changes: `git commit -am 'Some commit message'`\n4. Push to the branch: `git push origin feature-name`\n5. Submit a pull request 😉😉\n\n## How can I thank you?\n\nWhy not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter or Any Social Media? Spread the word!\n\nDon't forget to [follow me on twitter](https://twitter.com/iamraphson)!\n\nThanks!\nOlusegun Ayeni.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamraphson%2Freact-paystack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamraphson%2Freact-paystack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamraphson%2Freact-paystack/lists"}