├── css
└── index.css
├── index.html
└── README.md
/css/index.css:
--------------------------------------------------------------------------------
1 | /* Styling for form container */
2 | #paymentForm {
3 | width: 300px;
4 | margin: 0 auto;
5 | }
6 |
7 | /* Styling for form groups */
8 | .form-group {
9 | margin-bottom: 20px;
10 | }
11 |
12 | /* Styling for labels */
13 | label {
14 | display: block;
15 | font-weight: bold;
16 | margin-bottom: 5px;
17 | }
18 |
19 | /* Styling for input fields */
20 | input[type="email"],
21 | input[type="tel"],
22 | input[type="text"] {
23 | width: 100%;
24 | padding: 8px;
25 | border: 1px solid #ccc;
26 | border-radius: 4px;
27 | }
28 |
29 | /* Styling for submit button */
30 | button[type="submit"] {
31 | background-color: #4CAF50;
32 | color: white;
33 | padding: 10px 20px;
34 | border: none;
35 | border-radius: 4px;
36 | cursor: pointer;
37 | }
38 |
39 | button[type="submit"]:hover {
40 | background-color: #45a049;
41 | }
42 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Paystack Integration
2 |
3 | Important Notice
4 |
5 | 🚨 DO NOT hardcode sensitive information (such as API keys or secret keys) directly in your JavaScript code. Instead, use a secure method to store and access them.
6 |
7 | Storing API Keys Securely
8 |
9 | Option 1: Using a .env File (For Local Development with a Backend)
10 |
11 | If you're using a local development server with Node.js or another backend technology, store your API keys in a .env file:
12 |
13 | PAYSTACK_PUBLIC_KEY=your-public-key-here
14 |
15 | Then, access them securely in your JavaScript:
16 |
17 | fetch('/get-paystack-key')
18 | .then(response => response.json())
19 | .then(data => {
20 | const paystackPublicKey = data.key;
21 | console.log(paystackPublicKey);
22 | });
23 |
24 | Option 2: Using Environment Variables in Deployment
25 |
26 | If deploying to a hosting platform like Vercel or Netlify, store API keys as environment variables in the project settings.
27 |
28 | Option 3: Using JavaScript Safely
29 |
30 | If you must use an API key in frontend JavaScript, ensure it is only the public key and never expose private or secret keys:
31 |
32 | const PAYSTACK_PUBLIC_KEY = 'your-public-key-here';
33 |
34 | This key should only be used for client-side transactions while all sensitive operations happen on a secure backend.
35 |
36 | Best Practices
37 |
38 | ✅ Never commit your API keys to GitHub.✅ Use a backend to handle sensitive transactions securely.✅ Rotate your API keys regularly for security.✅ Always check that your `` includes sensitive files before pushing to GitHub.
39 |
40 | Stay secure and happy coding! 🔐🚀
41 |
42 |
--------------------------------------------------------------------------------