Skip to content

Commit 5f537c9

Browse files
Jokotoye18Jokotoye18
committed
feat: add a demo project to showcase react-native-paystack-webview
1 parent c41258d commit 5f537c9

21 files changed

+10045
-0
lines changed

‎demo/.gitignore‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
2+
3+
# dependencies
4+
node_modules/
5+
6+
# Expo
7+
.expo/
8+
dist/
9+
web-build/
10+
expo-env.d.ts
11+
12+
# Native
13+
.kotlin/
14+
*.orig.*
15+
*.jks
16+
*.p8
17+
*.p12
18+
*.key
19+
*.mobileprovision
20+
21+
# Metro
22+
.metro-health-check*
23+
24+
# debug
25+
npm-debug.*
26+
yarn-debug.*
27+
yarn-error.*
28+
29+
# macOS
30+
.DS_Store
31+
*.pem
32+
33+
# local env files
34+
.env*.local
35+
36+
# typescript
37+
*.tsbuildinfo
38+
39+
app-example

‎demo/.yarn/install-state.gz‎

987 KB
Binary file not shown.

‎demo/.yarnrc.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodeLinker: node-modules

‎demo/README.md‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
# React Native Paystack WebView Demo
2+
3+
This is a clean, interactive demo showcasing the React Native Paystack WebView library in action. The demo provides a streamlined payment interface that demonstrates the library's core functionality.
4+
5+
## 🚀 Features
6+
7+
- **Clean UI/UX**: Modern, minimalist design with smooth interactions
8+
- **Real Paystack Integration**: Uses the actual Paystack WebView library
9+
- **Form Validation**: Email and amount validation with real-time feedback
10+
- **Payment Processing**: Simulates the complete payment flow
11+
- **Mobile Optimized**: Touch-friendly interface with proper keyboard handling
12+
- **Status Bar Integration**: Proper status bar styling for iOS/Android
13+
14+
## 🎯 Demo Features
15+
16+
### Interactive Payment Flow
17+
18+
- Enter email and amount
19+
- Real-time form validation
20+
- Process payment through Paystack WebView
21+
- Success/error handling with user feedback
22+
- Clean, intuitive interface
23+
24+
### UI Components
25+
26+
- **Header**: Gradient background with payment info and amount display
27+
- **Form Inputs**: Email and amount with validation and proper keyboard handling
28+
- **Payment Button**: Dynamic state with loading indicator
29+
- **Demo Notice**: Clear indication this is a demo environment
30+
- **Status Bar**: Light status bar for better visual integration
31+
32+
## 🛠️ Technical Details
33+
34+
### Integration
35+
36+
- Uses `PaystackProvider` from the development library
37+
- Implements `usePaystack` hook for payment processing
38+
- Proper TypeScript types and error handling
39+
- Safe area handling for different device types
40+
41+
### Styling
42+
43+
- Modern color scheme with Paystack branding
44+
- Smooth animations and transitions
45+
- Responsive design for different screen sizes
46+
- Proper spacing and typography
47+
- Status bar integration
48+
49+
### Validation
50+
51+
- Email format validation
52+
- Amount validation (positive numbers only)
53+
- Required field validation
54+
- Real-time feedback
55+
56+
## 🚀 Running the Demo
57+
58+
1. **Start the development server**:
59+
60+
```bash
61+
yarn start
62+
# or
63+
npm start
64+
```
65+
66+
2. **Open on your device**:
67+
68+
- Scan the QR code with Expo Go app
69+
- Or press 'i' for iOS simulator
70+
- Or press 'a' for Android emulator
71+
72+
3. **Test the payment flow**:
73+
- Enter a valid email (e.g., `test@example.com`)
74+
- Enter an amount (e.g., `5000`)
75+
- Tap "Pay" to initiate payment
76+
- Experience the WebView integration
77+
78+
## 📱 Demo Screenshots
79+
80+
The demo features:
81+
82+
- Clean, modern interface
83+
- Intuitive payment flow
84+
- Real-time validation
85+
- Professional styling
86+
- Mobile-optimized design
87+
- Proper status bar integration
88+
89+
## 🔧 Configuration
90+
91+
### Paystack Setup
92+
93+
The demo uses a test public key. To use your own:
94+
95+
1. Replace the public key in `app/_layout.tsx`:
96+
97+
```typescript
98+
publicKey = 'pk_test_YOUR_TEST_KEY_HERE';
99+
```
100+
101+
2. For production, use your live key:
102+
```typescript
103+
publicKey = 'pk_live_YOUR_LIVE_KEY_HERE';
104+
```
105+
106+
### Customization
107+
108+
- Modify colors in the component styles
109+
- Update validation rules
110+
- Customize success/error messages
111+
- Adjust status bar styling
112+
113+
## 🎨 Design System
114+
115+
### Colors
116+
117+
- Primary: `#667eea` (Paystack Blue)
118+
- Background: `#f8fafc` (Light Gray)
119+
- Text: `#1a202c` (Dark Gray)
120+
- Input Border: `#e2e8f0` (Light Gray)
121+
- Success: `#48bb78` (Green)
122+
- Error: `#f56565` (Red)
123+
124+
### Typography
125+
126+
- Headers: Bold, 24px
127+
- Body: Regular, 16px
128+
- Labels: Semi-bold, 16px
129+
- Amount Display: Bold, 32px
130+
131+
### Spacing
132+
133+
- Consistent 8px grid system
134+
- Proper padding and margins
135+
- Touch-friendly button sizes
136+
- Safe area handling
137+
138+
## 🔒 Security
139+
140+
- SSL encryption notice
141+
- Secure payment processing
142+
- No sensitive data stored
143+
- Demo environment only
144+
145+
## 📄 License
146+
147+
This demo is part of the React Native Paystack WebView project and follows the same MIT license.
148+
149+
## 🤝 Contributing
150+
151+
Feel free to contribute to improve the demo:
152+
153+
1. Fork the repository
154+
2. Create a feature branch
155+
3. Make your changes
156+
4. Submit a pull request
157+
158+
## 🔗 Links
159+
160+
- [Main Library Repository](https://github.com/just1and0/React-Native-Paystack-WebView)
161+
- [Paystack Documentation](https://paystack.com/docs)
162+
- [React Native WebView](https://github.com/react-native-webview/react-native-webview)
163+
164+
---
165+
166+
**Enjoy testing the React Native Paystack WebView library! 🎉**

‎demo/app.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"expo": {
3+
"name": "demo",
4+
"slug": "demo",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/images/icon.png",
8+
"scheme": "demo",
9+
"userInterfaceStyle": "automatic",
10+
"newArchEnabled": true,
11+
"ios": {
12+
"supportsTablet": true
13+
},
14+
"android": {
15+
"adaptiveIcon": {
16+
"foregroundImage": "./assets/images/adaptive-icon.png",
17+
"backgroundColor": "#ffffff"
18+
},
19+
"edgeToEdgeEnabled": true
20+
},
21+
"web": {
22+
"bundler": "metro",
23+
"output": "static",
24+
"favicon": "./assets/images/favicon.png"
25+
},
26+
"plugins": [
27+
"expo-router",
28+
[
29+
"expo-splash-screen",
30+
{
31+
"image": "./assets/images/splash-icon.png",
32+
"imageWidth": 200,
33+
"resizeMode": "contain",
34+
"backgroundColor": "#ffffff"
35+
}
36+
]
37+
],
38+
"experiments": {
39+
"typedRoutes": true
40+
}
41+
}
42+
}

‎demo/app/_layout.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Stack } from 'expo-router';
2+
import { PaystackProvider } from '../../development/PaystackProvider';
3+
4+
export default function Layout() {
5+
return (
6+
<PaystackProvider
7+
publicKey="pk_test_d319f8851d3f60e748d8c67ac58af67ba0ecd72d"
8+
currency="NGN"
9+
debug={true}
10+
onGlobalSuccess={(res) => console.log('Global Success:', res)}
11+
onGlobalCancel={() => console.log('Global Cancel')}
12+
>
13+
<Stack
14+
screenOptions={{
15+
headerShown: false,
16+
}}
17+
/>
18+
</PaystackProvider>
19+
);
20+
}

0 commit comments

Comments
 (0)