{"id":15295933,"url":"https://github.com/mdbootstrap/react-payment-forms","last_synced_at":"2025-07-27T08:32:12.362Z","repository":{"id":57863621,"uuid":"527952236","full_name":"mdbootstrap/react-payment-forms","owner":"mdbootstrap","description":"Responsive React Payment Forms built with the latest Bootstrap 5. Credit card, PayPal, Stripe, eCommerce checkout, multi-step payment, donation form \u0026 more examples.  https://mdbootstrap.com/docs/react/extended/payment-forms/","archived":false,"fork":false,"pushed_at":"2022-08-23T12:44:23.000Z","size":280,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-15T06:51:22.596Z","etag":null,"topics":["bootstrap","bootstrap-template","bootstrap-theme","bootstrap5","css","forms","html","js","payment","react","template"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdbootstrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.pdf","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-23T11:07:16.000Z","updated_at":"2024-10-28T19:50:16.000Z","dependencies_parsed_at":"2022-09-06T16:40:16.420Z","dependency_job_id":null,"html_url":"https://github.com/mdbootstrap/react-payment-forms","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-payment-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-payment-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-payment-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-payment-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/react-payment-forms/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227782043,"owners_count":17819196,"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":["bootstrap","bootstrap-template","bootstrap-theme","bootstrap5","css","forms","html","js","payment","react","template"],"created_at":"2024-09-30T18:08:39.064Z","updated_at":"2024-12-02T18:40:27.006Z","avatar_url":"https://github.com/mdbootstrap.png","language":"JavaScript","readme":"![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)\n\n# MDB React 5\n\nResponsive React Payment Forms built with the latest Bootstrap 5. Credit card, PayPal, Stripe, eCommerce checkout, multi-step payment, donation form \u0026 more examples.\n\nCheck out [React Payment Forms Documentation](https://mdbootstrap.com/docs/react/extended/payment-forms) for detailed instructions \u0026 even more examples.\n\n## Basic example\n![React Payment Forms Basic example](https://user-images.githubusercontent.com/108793661/186144545-d666f0eb-7ebf-4629-a945-f48cb9f1344e.png)\n```js\nimport React from \"react\";\nimport {\n  MDBContainer,\n  MDBCol,\n  MDBRow,\n  MDBBtnGroup,\n  MDBBtn,\n} from \"mdb-react-ui-kit\";\n\nexport default function App() {\n  return (\n    \u003cMDBContainer className=\"py-5\"\u003e\n      \u003cdiv className=\"d-flex justify-content-between align-items-center mb-5\"\u003e\n        \u003cdiv className=\"d-flex flex-row align-items-center\"\u003e\n          \u003ch4 className=\"text-uppercase mt-1\"\u003eEligible\u003c/h4\u003e\n          \u003cspan className=\"ms-2 me-3\"\u003ePay\u003c/span\u003e\n        \u003c/div\u003e\n        \u003ca href=\"#!\"\u003eCancel and return to the website\u003c/a\u003e\n      \u003c/div\u003e\n      \u003cMDBRow\u003e\n        \u003cMDBCol md=\"7\" lg=\"7\" xl=\"6\" className=\"mb-4 mb-md-0\"\u003e\n          \u003ch5 className=\"mb-0 text-success\"\u003e$85.00\u003c/h5\u003e\n          \u003ch5 className=\"mb-3\"\u003eDiabites Pump \u0026amp; Supplies\u003c/h5\u003e\n          \u003cdiv\u003e\n            \u003cdiv className=\"d-flex justify-content-between\"\u003e\n              \u003cdiv className=\"d-flex flex-row mt-1\"\u003e\n                \u003ch6\u003eInsurance Responsibility\u003c/h6\u003e\n                \u003ch6 className=\"fw-bold text-success ms-1\"\u003e$71.76\u003c/h6\u003e\n              \u003c/div\u003e\n              \u003cdiv className=\"d-flex flex-row align-items-center text-primary\"\u003e\n                \u003cspan className=\"ms-1\"\u003eAdd Insurer card\u003c/span\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cp\u003e\n              Insurance claim and all neccessary dependencies will be submitted\n              to your insurer for the covered portion of this order.\n            \u003c/p\u003e\n            \u003cdiv\n              className=\"p-2 d-flex justify-content-between align-items-center\"\n              style={{ backgroundColor: \"#eee\" }}\n            \u003e\n              \u003cspan\u003eAetna - Open Access\u003c/span\u003e\n              \u003cspan\u003eAetna - OAP\u003c/span\u003e\n            \u003c/div\u003e\n            \u003chr /\u003e\n            \u003cdiv className=\"d-flex justify-content-between align-items-center\"\u003e\n              \u003cdiv className=\"d-flex flex-row mt-1\"\u003e\n                \u003ch6\u003ePatient Balance\u003c/h6\u003e\n                \u003ch6 className=\"fw-bold text-success ms-1\"\u003e$13.24\u003c/h6\u003e\n              \u003c/div\u003e\n              \u003cdiv className=\"d-flex flex-row align-items-center text-primary\"\u003e\n                \u003cspan className=\"ms-1\"\u003eAdd Payment card\u003c/span\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cp\u003e\n              Insurance claim and all neccessary dependencies will be submitted\n              to your insurer for the covered portion of this order.\n            \u003c/p\u003e\n            \u003cdiv class=\"d-flex flex-column mb-3\"\u003e\n              \u003cMDBBtnGroup vertical aria-label=\"Vertical button group\"\u003e\n                \u003cinput\n                  type=\"radio\"\n                  className=\"btn-check\"\n                  name=\"options\"\n                  id=\"option1\"\n                  autocomplete=\"off\"\n                /\u003e\n                \u003clabel className=\"btn btn-outline-primary btn-lg\" for=\"option1\"\u003e\n                  \u003cdiv className=\"d-flex justify-content-between\"\u003e\n                    \u003cspan\u003eVISA \u003c/span\u003e\n                    \u003cspan\u003e**** 5436\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/label\u003e\n\n                \u003cinput\n                  type=\"radio\"\n                  className=\"btn-check\"\n                  name=\"options\"\n                  id=\"option2\"\n                  autocomplete=\"off\"\n                  checked\n                /\u003e\n                \u003clabel className=\"btn btn-outline-primary btn-lg\" for=\"option2\"\u003e\n                  \u003cdiv className=\"d-flex justify-content-between\"\u003e\n                    \u003cspan\u003eMASTER CARD \u003c/span\u003e\n                    \u003cspan\u003e**** 5038\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/label\u003e\n              \u003c/MDBBtnGroup\u003e\n            \u003c/div\u003e\n            \u003cMDBBtn color=\"success\" size=\"lg\" block\u003e\n              Proceed to payment\n            \u003c/MDBBtn\u003e\n          \u003c/div\u003e\n        \u003c/MDBCol\u003e\n        \u003cMDBCol md=\"5\" lg=\"4\" xl=\"4\" offsetLg=\"1\" offsetXl=\"2\"\u003e\n          \u003cdiv className=\"p-3\" style={{ backgroundColor: \"#eee\" }}\u003e\n            \u003cspan className=\"fw-bold\"\u003eOrder Recap\u003c/span\u003e\n            \u003cdiv className=\"d-flex justify-content-between mt-2\"\u003e\n              \u003cspan\u003econtracted Price\u003c/span\u003e \u003cspan\u003e$186.86\u003c/span\u003e\n            \u003c/div\u003e\n            \u003cdiv className=\"d-flex justify-content-between mt-2\"\u003e\n              \u003cspan\u003eAmount Deductible\u003c/span\u003e \u003cspan\u003e$0.0\u003c/span\u003e\n            \u003c/div\u003e\n            \u003cdiv className=\"d-flex justify-content-between mt-2\"\u003e\n              \u003cspan\u003eCoinsurance(0%)\u003c/span\u003e \u003cspan\u003e+ $0.0\u003c/span\u003e\n            \u003c/div\u003e\n            \u003cdiv className=\"d-flex justify-content-between mt-2\"\u003e\n              \u003cspan\u003eCopayment \u003c/span\u003e \u003cspan\u003e+ 40.00\u003c/span\u003e\n            \u003c/div\u003e\n            \u003chr /\u003e\n            \u003cdiv className=\"d-flex justify-content-between mt-2\"\u003e\n              \u003cspan className=\"lh-sm\"\u003e\n                Total Deductible,\n                \u003cbr /\u003e\n                Coinsurance and copay\n              \u003c/span\u003e\n              \u003cspan\u003e$40.00\u003c/span\u003e\n            \u003c/div\u003e\n            \u003cdiv className=\"d-flex justify-content-between mt-2\"\u003e\n              \u003cspan className=\"lh-sm\"\u003e\n                Maximum out-of-pocket \u003cbr /\u003e\n                on insurance policy\n              \u003c/span\u003e\n              \u003cspan\u003e$40.00\u003c/span\u003e\n            \u003c/div\u003e\n            \u003chr /\u003e\n            \u003cdiv className=\"d-flex justify-content-between mt-2\"\u003e\n              \u003cspan\u003eInsurance Responsibility \u003c/span\u003e \u003cspan\u003e$71.76\u003c/span\u003e\n            \u003c/div\u003e\n            \u003cdiv className=\"d-flex justify-content-between mt-2\"\u003e\n              \u003cspan\u003ePatient Balance \u003c/span\u003e \u003cspan\u003e$13.24\u003c/span\u003e\n            \u003c/div\u003e\n            \u003chr /\u003e\n            \u003cdiv className=\"d-flex justify-content-between mt-2\"\u003e\n              \u003cspan\u003eTotal \u003c/span\u003e \u003cspan class=\"text-success\"\u003e$85.00\u003c/span\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/MDBCol\u003e\n      \u003c/MDBRow\u003e\n    \u003c/MDBContainer\u003e\n  );\n}\n```\n\n## How to use?\n\n1. Download MDB 5 - FREE REACT UI KIT\n\n2. Choose your favourite customized component and click on the image\n\n3. Copy \u0026 paste the code into your MDB project\n\n[▶️ Subscribe to YouTube channel for web development tutorials \u0026 resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)\n\n## More examples (click on the image to see a live demo)\n### Ecommerce checkout page:\n[![React Payment Forms #1](https://user-images.githubusercontent.com/108793661/186144771-ab3f161b-ca20-4fb8-b6f3-81092d539491.png)](https://mdbootstrap.com/docs/react/extended/payment-forms#section-2)\n\n### Payment card / Donation form:\n[![React Payment Forms #2](https://user-images.githubusercontent.com/108793661/186144944-6dce034b-0312-43a0-9eeb-3d13b83a5d4c.png)](https://mdbootstrap.com/docs/react/extended/payment-forms#section-3)\n\n### Pricing plan with credit card payment details:\n[![React Payment Forms #3](https://user-images.githubusercontent.com/108793661/186145119-86582e33-597c-4c00-a63c-bc443c829068.png)](https://mdbootstrap.com/docs/react/extended/payment-forms#section-4)\n\nYou can find other examples [here](https://mdbootstrap.com/docs/react/extended/payment-forms).\n\n\u003chr /\u003e\n\n## More extended React documentation\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/code/\"\u003eReact Bootstrap Code\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/gallery/\"\u003eReact Bootstrap Gallery\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/hamburger-menu/\"\u003eReact Bootstrap Hamburger Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/jumbotron/\"\u003eReact Bootstrap Jumbotron\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/maps/\"\u003eReact Bootstrap Maps\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/mega-menu//\"\u003eReact Bootstrap Mega Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/media-object/\"\u003eReact Bootstrap Media object\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/multiselect/\"\u003eReact Bootstrap Multiselect\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/masonry/\"\u003eReact Bootstrap Masonry\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/contact/\"\u003eReact Bootstrap Contact form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/gradients/\"\u003eReact Bootstrap Gradients\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/pagination/\"\u003eReact Bootstrap Pagination\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/panels/\"\u003eReact Bootstrap Panels\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/social-media/\"\u003eReact Bootstrap Social Media icons \u0026 buttons\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/search/\"\u003eReact Bootstrap Search\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-sort/\"\u003eReact Bootstrap Table sort\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-responsive/\"\u003eReact Bootstrap Table responsive\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-scroll/\"\u003eReact Bootstrap Table scroll\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-search/\"\u003eReact Bootstrap Table search\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/textarea/\"\u003eReact Bootstrap Textarea\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/sidebar/\"\u003eReact Bootstrap Sidebar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/profiles/\"\u003eReact Bootstrap Profiles\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/dropdown-multilevel/\"\u003eReact Bootstrap Nested Dropdown\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/bootstrap-address-form/\"\u003eReact Bootstrap Address Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/back-to-top\"\u003eReact Scroll Back to Top button\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/product-cards\"\u003eReact Product Cards\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/avatar\"\u003eReact Avatar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/carousel-with-thumbnails\"\u003eReact Carousel Slider with Thumbnails\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/chat\"\u003eReact Chat\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/comparison-table\"\u003eReact Comparison table\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/comments\"\u003eReact Comments\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/drawer\"\u003eReact Drawer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/faq\"\u003eReact FAQ component / section\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/invoice\"\u003eReact Invoice\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/news-feed\"\u003eReact News feed\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/offcanvas\"\u003eReact Offcanvas\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/order-details\"\u003eReact Order details\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/page-transitions\"\u003eReact Page transitions\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/quotes\"\u003eReact Quotes\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Freact-payment-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2Freact-payment-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Freact-payment-forms/lists"}