{"id":30750814,"url":"https://github.com/salmanazamdev/stripe-payment-react-native-app","last_synced_at":"2026-04-07T08:02:14.568Z","repository":{"id":312214250,"uuid":"1045550192","full_name":"salmanazamdev/stripe-payment-react-native-app","owner":"salmanazamdev","description":"Complete React Native app with Stripe Payment Sheet integration. Secure payments, TypeScript support, beautiful UI, and production-ready code. Includes backend API and comprehensive documentation.","archived":false,"fork":false,"pushed_at":"2025-08-29T06:55:57.000Z","size":280,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-08T16:44:46.476Z","etag":null,"topics":["express","mobile-payments","nodejs","payment","payment-gateway","payment-integration","payments","react","react-native","react-native-cli","react-native-stripe","reactnative","stripe","stripe-api","stripe-payment","stripe-payments"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/salmanazamdev.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-08-27T10:58:13.000Z","updated_at":"2025-08-29T06:55:59.000Z","dependencies_parsed_at":"2025-08-31T01:15:43.173Z","dependency_job_id":null,"html_url":"https://github.com/salmanazamdev/stripe-payment-react-native-app","commit_stats":null,"previous_names":["salmanazamdev/stripe-payment-react-native-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/salmanazamdev/stripe-payment-react-native-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salmanazamdev%2Fstripe-payment-react-native-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salmanazamdev%2Fstripe-payment-react-native-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salmanazamdev%2Fstripe-payment-react-native-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salmanazamdev%2Fstripe-payment-react-native-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/salmanazamdev","download_url":"https://codeload.github.com/salmanazamdev/stripe-payment-react-native-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salmanazamdev%2Fstripe-payment-react-native-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31504897,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["express","mobile-payments","nodejs","payment","payment-gateway","payment-integration","payments","react","react-native","react-native-cli","react-native-stripe","reactnative","stripe","stripe-api","stripe-payment","stripe-payments"],"created_at":"2025-09-04T07:02:04.078Z","updated_at":"2026-04-07T08:02:14.558Z","avatar_url":"https://github.com/salmanazamdev.png","language":"JavaScript","readme":"# 💳 Stripe Payment Sheet - React Native App\n\nA complete, production-ready React Native application demonstrating Stripe Payment Sheet integration with TypeScript, featuring secure payment processing, beautiful UI, and comprehensive error handling.\n\n[![React Native](https://img.shields.io/badge/React%20Native-0.72+-blue.svg)](https://reactnative.dev/)\n[![Stripe](https://img.shields.io/badge/Stripe-Payment%20Sheet-green.svg)](https://stripe.com/docs/payments/payment-sheet)\n[![TypeScript](https://img.shields.io/badge/TypeScript-4.9+-blue.svg)](https://www.typescriptlang.org/)\n[![Node.js](https://img.shields.io/badge/Node.js-16+-green.svg)](https://nodejs.org/)\n\n## ✨ Features\n\n- 🔒 **PCI Compliant** - Secure payment processing without handling sensitive card data\n- 📱 **Native UI** - Beautiful Payment Sheet that slides up from bottom\n- 💳 **Multiple Payment Methods** - Cards, Apple Pay, Google Pay support\n- 🛡️ **Built-in Security** - Fraud protection and 3D Secure authentication\n- 🎯 **TypeScript Support** - Full type safety and IntelliSense\n- 🔄 **Real-time Validation** - Instant card validation and error feedback\n- 📊 **Comprehensive Logging** - Detailed error handling and debugging\n- 🌍 **Production Ready** - Best practices for deployment and security\n\n\u003c!-- ## 📱 Screenshots\n\n| Payment Screen | Payment Sheet | Success Screen |\n|:-------------:|:-------------:|:-------------:|\n| Beautiful checkout UI | Native payment form | Payment confirmation | --\u003e\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js 16+ installed\n- React Native development environment setup\n- Stripe account ([Create free account](https://dashboard.stripe.com/register))\n- Android Studio (for Android development)\n\n### Installation\n\n1. **Clone the repository**\n```bash\ngit clone https://github.com/salmanazamdev/stripe-payment-react-native-app.git\ncd stripe-payment-react-native-app\n```\n\n2. **Install dependencies**\n```bash\n# Install React Native dependencies\nnpm install\n\n# Install backend dependencies\ncd stripe-backend\nnpm install\ncd ..\n```\n\n3. **Get your Stripe keys**\n   - Go to [Stripe Dashboard](https://dashboard.stripe.com/test/apikeys)\n   - Copy your **Publishable key** and **Secret key**\n\n4. **Configure your keys**\n\n   **Backend (`stripe-backend/server.js`):**\n   ```javascript\n   const stripe = require('stripe')('sk_test_YOUR_SECRET_KEY_HERE');\n   ```\n\n   **Frontend (`App.tsx`):**\n   ```typescript\n   setPublishableKey('pk_test_YOUR_PUBLISHABLE_KEY_HERE');\n   ```\n\n5. **Run the application**\n\n   **Terminal 1 - Start Backend:**\n   ```bash\n   cd stripe-backend\n   node server.js\n   # Should see: ✅ Server running on port 3000\n   ```\n\n   **Terminal 2 - Start React Native:**\n   ```bash\n   npx react-native run-android\n   ```\n\n6. **Test the payment**\n   - Tap \"Pay Now\" button\n   - Use test card: `4242 4242 4242 4242`\n   - Any future expiry date and CVC\n   - Complete the payment!\n\n## 🏗️ Project Structure\n\n```\nstripe-payment-react-native-app/\n├── 📱 React Native App\n│   ├── App.tsx                     # Main app with StripeProvider\n│   ├── src/\n│   │   └── components/\n│   │       └── CheckoutScreen.tsx  # Payment UI and logic\n│   └── package.json\n│\n├── 🖥️ Backend Server\n│   ├── server.js                   # Express server with Stripe\n│   ├── package.json\n│   └── .env.example\n│\n└── 📚 Documentation\n    ├── README.md\n    └── docs/\n        ├── API.md\n        └── DEPLOYMENT.md\n```\n\n## 🔧 Configuration\n\n### Environment Variables\n\nCreate `stripe-backend/.env`:\n```env\nSTRIPE_SECRET_KEY=sk_test_your_secret_key_here\nSTRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key_here\nPORT=3000\n```\n\n### Network Configuration\n\n**For Android Emulator:**\n```typescript\nconst API_URL = 'http://10.0.2.2:3000';\n```\n\n**For Physical Device:**\n```typescript\nconst API_URL = 'http://YOUR_COMPUTER_IP:3000';\n```\n\n## 🎯 How It Works\n\n1. **App Initialization** - Stripe Provider sets up with publishable key\n2. **Payment Setup** - App calls backend to create payment intent\n3. **Backend Processing** - Server creates customer, ephemeral key, and payment intent\n4. **Payment Sheet** - Beautiful native UI handles card input\n5. **Secure Processing** - Stripe processes payment securely\n6. **Result Handling** - App shows success/error feedback\n\n## 🧪 Testing\n\n### Test Cards\n\n| Card Number | Description |\n|:------------|:------------|\n| `4242 4242 4242 4242` | Successful payment |\n| `4000 0000 0000 0002` | Card declined |\n| `4000 0000 0000 9995` | Insufficient funds |\n| `4000 0025 0000 3155` | Requires authentication |\n\n### Running Tests\n\n```bash\n# Run React Native tests\nnpm test\n\n# Run backend tests\ncd stripe-backend\nnpm test\n```\n\n## 🚀 Production Deployment\n\n### Security Checklist\n\n- [ ] Environment variables for all keys\n- [ ] HTTPS enabled for all endpoints\n- [ ] Webhook signature verification\n- [ ] Rate limiting implemented\n- [ ] Error logging configured\n- [ ] User authentication added\n\n### Backend Deployment\n\n**Option 1: Heroku**\n```bash\n# Install Heroku CLI\nheroku create your-app-name\nheroku config:set STRIPE_SECRET_KEY=sk_live_your_live_key\ngit push heroku main\n```\n\n**Option 2: Railway/Vercel**\n- Deploy backend to your preferred platform\n- Update API_URL in React Native app\n- Configure environment variables\n\n### Mobile App Deployment\n\n**Android:**\n```bash\ncd android\n./gradlew assembleRelease\n```\n\n**iOS:**\n```bash\ncd ios\nxcodebuild -workspace StripePaymentApp.xcworkspace -scheme StripePaymentApp archive\n```\n\n## 📊 API Endpoints\n\n### POST `/payment-sheet`\n\nCreates payment intent and returns client secrets for Payment Sheet.\n\n**Response:**\n```json\n{\n  \"paymentIntent\": \"pi_1234567890_secret_abcdef\",\n  \"ephemeralKey\": \"ek_test_1234567890\",\n  \"customer\": \"cus_1234567890\",\n  \"publishableKey\": \"pk_test_...\"\n}\n```\n\n### GET `/`\n\nHealth check endpoint.\n\n**Response:**\n```json\n{\n  \"message\": \"✅ Stripe server is running!\"\n}\n```\n\n## 🛠️ Troubleshooting\n\n### Common Issues\n\n**❌ \"Network request failed\"**\n- Check if backend server is running\n- Verify API_URL is correct\n- For physical devices, use computer's IP address\n\n**❌ \"Invalid API key\"**\n- Double-check your Stripe keys\n- Ensure you're using test keys for development\n- Verify keys are properly set in environment variables\n\n**❌ \"Payment failed\"**\n- Use valid test card numbers\n- Check card expiry date is in the future\n- Ensure sufficient test balance\n\n**❌ Payment Sheet not opening**\n- Check server logs for errors\n- Verify payment intent creation is successful\n- Use \"Retry Setup\" button to reinitialize\n\n### Debug Mode\n\nEnable detailed logging:\n\n```typescript\n// Add to CheckoutScreen.tsx\nconsole.log('🔍 Debug mode enabled');\n```\n\n## 🔄 Next Steps\n\n**Enhance Your Payment System:**\n\n- [ ] **Webhooks** - Handle payment confirmations\n- [ ] **Subscriptions** - Recurring payments\n- [ ] **Customers** - Save payment methods\n- [ ] **Analytics** - Track payment metrics\n- [ ] **Multi-currency** - Support global payments\n- [ ] **Discounts** - Coupon system\n- [ ] **Refunds** - Handle payment returns\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit changes (`git commit -m 'Add amazing feature'`)\n4. Push to branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n\n## 🙏 Acknowledgments\n\n- [Stripe](https://stripe.com) for excellent payment infrastructure\n- [React Native Community](https://reactnative.dev) for the amazing framework\n- All contributors and testers\n\n## 📞 Support\n\n- 💬 **Issues**: [GitHub Issues](https://github.com/salmanazamdev/stripe-payment-react-native-app/issues)\n- 📖 **Documentation**: [Stripe Docs](https://stripe.com/docs)\n\n---\n\n### ⭐ Star this repository if it helped you!\n\n**Built with ❤️ by [Salman]**\n\n---\n\n\u003c!-- ## Related Projects\n\n- [OAuth 2.0 React Native Implementation](link-to-your-oauth-repo)\n- [Complete React Native Authentication](link-to-auth-repo)\n- [React Native Best Practices](link-to-best-practices-repo) --\u003e\n\n## Tags\n\n`react-native` `stripe` `payments` `mobile-payments` `typescript` `nodejs` `express` `payment-sheet` `mobile-development` `fintech` `pci-compliance` `android` `ios`","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalmanazamdev%2Fstripe-payment-react-native-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalmanazamdev%2Fstripe-payment-react-native-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalmanazamdev%2Fstripe-payment-react-native-app/lists"}