{"id":30905258,"url":"https://github.com/chrxsdev/payments-pattern","last_synced_at":"2025-09-09T10:06:31.729Z","repository":{"id":307364405,"uuid":"1029287003","full_name":"chrxsdev/payments-pattern","owner":"chrxsdev","description":"Basic example using Strategy + Factory Pattern in a payments app","archived":false,"fork":false,"pushed_at":"2025-07-30T20:09:58.000Z","size":119,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-30T22:52:30.083Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrxsdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2025-07-30T20:04:12.000Z","updated_at":"2025-07-30T20:10:02.000Z","dependencies_parsed_at":"2025-07-30T22:52:35.379Z","dependency_job_id":"ba513212-0371-416d-b364-acbb4c17dd6c","html_url":"https://github.com/chrxsdev/payments-pattern","commit_stats":null,"previous_names":["chrxsdev/payments-pattern"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/chrxsdev/payments-pattern","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrxsdev%2Fpayments-pattern","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrxsdev%2Fpayments-pattern/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrxsdev%2Fpayments-pattern/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrxsdev%2Fpayments-pattern/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrxsdev","download_url":"https://codeload.github.com/chrxsdev/payments-pattern/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrxsdev%2Fpayments-pattern/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274277789,"owners_count":25255218,"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","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-09-09T10:06:28.948Z","updated_at":"2025-09-09T10:06:31.716Z","avatar_url":"https://github.com/chrxsdev.png","language":"TypeScript","funding_links":["https://developer.paypal.com/"],"categories":[],"sub_categories":[],"readme":"# Payments App\r\n\r\nA full-stack payment processing application built with NestJS (backend) and React (frontend) that supports multiple payment providers including Stripe and PayPal.\r\n\r\n## 🚀 Features\r\n\r\n- **Multi-Provider Support**: Seamlessly handle payments through Stripe and PayPal\r\n- **Strategy Pattern Implementation**: Extensible architecture for adding new payment providers\r\n- **Modern Tech Stack**: NestJS backend with React/TypeScript frontend\r\n- **Real-time Processing**: Instant payment processing and order capture\r\n- **Responsive UI**: Beautiful, responsive interface built with Tailwind CSS\r\n- **Type Safety**: Full TypeScript implementation across the stack\r\n\r\n## 📁 Project Structure\r\n\r\n```\r\npayments-app/\r\n├── api/                    # NestJS Backend API\r\n│   ├── src/\r\n│   │   ├── payments/       # Payment module\r\n│   │   │   ├── strategies/ # Payment provider strategies\r\n│   │   │   ├── factory/    # Payment strategy factory\r\n│   │   │   ├── dtos/       # Data transfer objects\r\n│   │   │   └── types/      # Type definitions\r\n│   │   └── config/         # Configuration module\r\n│   └── package.json\r\n├── client/                 # React Frontend\r\n│   ├── src/\r\n│   │   ├── components/     # React components\r\n│   │   │   └── payments/   # Payment-specific components\r\n│   │   ├── pages/          # Application pages\r\n│   │   ├── api/            # API client\r\n│   │   └── types/          # Type definitions\r\n│   └── package.json\r\n└── readme.md\r\n```\r\n\r\n## 🛠️ Technology Stack\r\n\r\n### Backend\r\n- **NestJS** - Progressive Node.js framework\r\n- **TypeScript** - Type-safe JavaScript\r\n- **Stripe SDK** - Stripe payment processing\r\n- **PayPal SDK** - PayPal payment processing\r\n- **dotenv** - Environment variable management\r\n\r\n### Frontend\r\n- **React 19** - Modern React with latest features\r\n- **TypeScript** - Type-safe development\r\n- **Vite** - Fast build tool and dev server\r\n- **Tailwind CSS** - Utility-first CSS framework\r\n- **React Router** - Client-side routing\r\n- **Axios** - HTTP client for API calls\r\n- **@stripe/react-stripe-js** - Stripe React components\r\n- **@paypal/react-paypal-js** - PayPal React components\r\n\r\n## 🚦 Prerequisites\r\n\r\nBefore running this application, make sure you have:\r\n\r\n- **Node.js** (v18 or higher)\r\n- **pnpm** (recommended package manager)\r\n- **Stripe Account** with API keys\r\n- **PayPal Developer Account** with API credentials\r\n\r\n## ⚙️ Environment Configuration\r\n\r\n### Backend (.env file in `/api` directory)\r\n\r\nCreate a `.env` file in the `api` directory with the following variables:\r\n\r\n```env\r\n# Server Configuration\r\nPORT=3000\r\nNODE_ENV=development\r\n\r\n# Stripe Configuration\r\nSTRIPE_SECRET_KEY=sk_test_your_stripe_secret_key\r\nSTRIPE_PUBLISHABLE_KEY=pk_test_your_stripe_publishable_key\r\n\r\n# PayPal Configuration\r\nPAYPAL_CLIENT_ID=your_paypal_client_id\r\nPAYPAL_SECRET=your_paypal_secret\r\n```\r\n\r\n### Frontend Environment Configuration\r\n\r\nCreate a `.env` file in the `client` directory:\r\n\r\n```env\r\n# API Configuration\r\nVITE_API_BASE_URL=http://localhost:3000\r\n\r\n# Stripe Configuration\r\nVITE_STRIPE_PUBLISHABLE_KEY=pk_test_your_stripe_publishable_key\r\n\r\n# PayPal Configuration\r\nVITE_PAYPAL_CLIENT_ID=your_paypal_client_id\r\n```\r\n\r\n## 🚀 Installation \u0026 Setup\r\n\r\n### 1. Clone the Repository\r\n\r\n```bash\r\ngit clone https://github.com/chrxsdev/payments-pattern.git\r\ncd payments-app\r\n```\r\n\r\n### 2. Install Backend Dependencies\r\n\r\n```bash\r\ncd api\r\npnpm install\r\n```\r\n\r\n### 3. Install Frontend Dependencies\r\n\r\n```bash\r\ncd ../client\r\npnpm install\r\n```\r\n\r\n### 4. Set Up Environment Variables\r\n\r\n- Create `.env` files in both `api` and `client` directories\r\n- Add your Stripe and PayPal credentials as shown above\r\n\r\n## 🏃‍♂️ Running the Application\r\n\r\n### Development Mode\r\n\r\n#### Start the Backend API\r\n\r\n```bash\r\ncd api\r\npnpm run start:dev\r\n```\r\n\r\nThe API will be available at `http://localhost:3000`\r\n\r\n#### Start the Frontend\r\n\r\n```bash\r\ncd client\r\npnpm run dev\r\n```\r\n\r\nThe frontend will be available at `http://localhost:5173`\r\n\r\n### Production Mode\r\n\r\n#### Build and Start Backend\r\n\r\n```bash\r\ncd api\r\npnpm run build\r\npnpm run start:prod\r\n```\r\n\r\n#### Build and Start Frontend\r\n\r\n```bash\r\ncd client\r\npnpm run build\r\npnpm run preview\r\n```\r\n\r\n## 📚 API Documentation\r\n\r\n### Payment Endpoints\r\n\r\n#### Create Payment\r\n- **POST** `/payments/pay`\r\n- **Body**: \r\n  ```json\r\n  {\r\n    \"paymentMethod\": \"stripe\" | \"paypal\",\r\n    \"amount\": 100,\r\n    \"metadata\": {\r\n      \"products\": [...]\r\n    }\r\n  }\r\n  ```\r\n\r\n#### Capture Payment\r\n- **POST** `/payments/capture/:orderId/:paymentMethod`\r\n- **Params**: \r\n  - `orderId`: Order ID to capture\r\n  - `paymentMethod`: Payment method used\r\n\r\n#### Get Payment Configuration\r\n- **GET** `/payments/config/:paymentMethod`\r\n- **Params**: \r\n  - `paymentMethod`: Payment method to get config for\r\n\r\n## 🏗️ Architecture Overview\r\n\r\n### Strategy Pattern Implementation\r\n\r\nThe application uses the Strategy Pattern to handle different payment providers:\r\n\r\n1. **Payment Strategy Interface**: Defines common methods for all payment providers\r\n2. **Concrete Strategies**: Stripe and PayPal implementations\r\n3. **Strategy Factory**: Creates appropriate strategy instances\r\n4. **Payment Service**: Orchestrates payment processing\r\n\r\n### Key Components\r\n\r\n- **PaymentStrategyFactory**: Creates payment strategy instances\r\n- **StripeStrategy**: Handles Stripe payment processing\r\n- **PaypalStrategy**: Handles PayPal payment processing\r\n- **PaymentsController**: Exposes payment endpoints\r\n- **PaymentsService**: Business logic for payment processing\r\n\r\n## 🧪 Testing\r\n\r\n### Backend Tests\r\n\r\n```bash\r\ncd api\r\n# Unit tests\r\npnpm run test\r\n\r\n# E2E tests\r\npnpm run test:e2e\r\n\r\n# Test coverage\r\npnpm run test:cov\r\n```\r\n\r\n### Frontend Tests\r\n\r\n```bash\r\ncd client\r\npnpm run test\r\n```\r\n\r\n## 🔧 Available Scripts\r\n\r\n### Backend Scripts\r\n- `pnpm run start` - Start the application\r\n- `pnpm run start:dev` - Start in development mode with hot reload\r\n- `pnpm run start:debug` - Start in debug mode\r\n- `pnpm run build` - Build for production\r\n- `pnpm run lint` - Run ESLint\r\n- `pnpm run test` - Run unit tests\r\n\r\n### Frontend Scripts\r\n- `pnpm run dev` - Start development server\r\n- `pnpm run build` - Build for production\r\n- `pnpm run preview` - Preview production build\r\n- `pnpm run lint` - Run ESLint\r\n\r\n## 🤝 Contributing\r\n\r\n1. Fork the repository\r\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\r\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\r\n4. Push to the branch (`git push origin feature/amazing-feature`)\r\n5. Open a Pull Request\r\n\r\n## 📝 License\r\n\r\nThis project is licensed under the UNLICENSED License.\r\n\r\n## 🆘 Support\r\n\r\nIf you encounter any issues or have questions:\r\n\r\n1. Check the [Issues](https://github.com/chrxsdev/payments-pattern/issues) page\r\n2. Create a new issue with detailed information\r\n3. Contact the maintainers\r\n\r\n## 🌟 Acknowledgments\r\n\r\n- [NestJS](https://nestjs.com/) for the powerful backend framework\r\n- [React](https://reactjs.org/) for the flexible frontend library\r\n- [Stripe](https://stripe.com/) for payment processing\r\n- [PayPal](https://developer.paypal.com/) for payment processing\r\n- [Tailwind CSS](https://tailwindcss.com/) for styling","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrxsdev%2Fpayments-pattern","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrxsdev%2Fpayments-pattern","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrxsdev%2Fpayments-pattern/lists"}