> For the complete documentation index, see [llms.txt](https://docs.myherb.co.il/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.myherb.co.il/devsphere-eco-friendly-open-source-codes-hub/product-guides/treewise.io-trees-planting-app-development/how-do-i-integrate-cleanhub-api.md).
# How do I integrate CleanHub API?
{% hint style="info" %}
[Read the Impact Report](https://www.cleanhub.com/impact-report/myherb) to learn about the environmental activities and initiatives undertaken by myHerb in collaboration with CleanHub.
{% endhint %}
## Here’s a detailed guide to help you get started:
### **1. Get API Key**
First, you need to obtain an API key from CleanHub. You can do this by signing up on their website and requesting access to their API.
### **2. Install Dependencies**
Ensure you have Node.js and npm installed. Then, create a new Node.js project and install the necessary dependencies.
#### **Command:**
```bash
npm init -y
npm install express body-parser node-fetch dotenv
```
### **3. Set Up Project Structure**
Create the following files and directories:
```
cleanhub-app/
├── index.html
├── styles.css
├── script.js
├── server.js
├── .env
└── README.md
```
### **4. Configure Environment Variables**
Create a `.env` file to store your API key securely.
#### **.env:**
```plaintext
CLEANHUB_API_KEY=your_api_key_here
```
### **5. Create Server**
Set up an Express server to handle API requests.
#### **server.js:**
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const fetch = require('node-fetch');
require('dotenv').config();
const app = express();
app.use(bodyParser.json());
app.post('/donate', async (req, res) => {
const { project, amount } = req.body;
try {
const response = await fetch('https://api.cleanhub.com/donate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.CLEANHUB_API_KEY}`
},
body: JSON.stringify({ project, amount })
});
const data = await response.json();
res.json({ message: 'Donation successful', data });
} catch (error) {
console.error('Error:', error);
res.status(500).json({ message: 'Donation failed' });
}
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
```
### **6. Create Frontend**
Set up the HTML, CSS, and JavaScript files for the frontend.
#### **index.html:**
```html
CleanHub Integration
CleanHub Integration
Donate to Plastic Cleanup Projects
Confirmation
```
#### **styles.css:**
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
main {
padding: 2rem;
}
section {
margin-bottom: 2rem;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
position: fixed;
width: 100%;
bottom: 0;
}
```
#### **script.js:**
```javascript
document.addEventListener('DOMContentLoaded', function() {
const donationForm = document.getElementById('donation-form');
const confirmationMessage = document.getElementById('confirmation-message');
donationForm.addEventListener('submit', function(event) {
event.preventDefault();
const project = document.getElementById('project').value;
const amount = document.getElementById('amount').value;
fetch('/donate', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ project, amount })
})
.then(response => response.json())
.then(data => {
confirmationMessage.textContent = `Thank you for your donation of $${amount} to ${project}!`;
})
.catch(error => console.error('Error:', error));
});
});
```
### **7. Run the Application**
Start your server and open `index.html` in your web browser.
#### **Command:**
```bash
node server.js
```
Following these steps, you can integrate the CleanHub API into your application, allowing users to donate to plastic cleanup projects. This setup ensures secure handling of API keys and provides a user-friendly interface for making donations.
Would you like more detailed guidance on any specific part of this process or additional features for your application?
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.myherb.co.il/devsphere-eco-friendly-open-source-codes-hub/product-guides/treewise.io-trees-planting-app-development/how-do-i-integrate-cleanhub-api.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.