Comprehensive Training Manual:
Managing Product Offerings & PayPal Integration
This manual provides a step-by-step guide for updating product details, generating PayPal buttons, and integrating them into your existing website template.
1. Website Structure Overview (for Admin Panel Integration)
Your website's pricing section (`<section id="pricing">`) is designed to dynamically render PayPal buttons based on unique "Hosted Button IDs."
1.1. Global PayPal SDK (Part 1: Head Script)
This script loads the core PayPal functionality and is placed **ONCE** in the `<head>` section of your `index.html`. It is essential for PayPal's features to function across your page.
<script
src="https://www.paypal.com/sdk/js?client-id=BAAGdPecRsf6dw_nIrWqUen0GdW0UsBZapp1Gn62xkPdD-Vqc-4lqWAidKK8LOObXux8pHJGjXknZoar6Q&components=hosted-buttons&disable-funding=venmo¤cy=USD">
</script>
**Admin Panel Placement (Conceptual):** If your Admin Panel has a global "Header Scripts" or "Custom Code" section, this code would go there. It is a one-time setup and does not need to be repeated on every page if it's placed globally.
1.2. Product-Specific PayPal Buttons (Part 2: Body Code)
Each pricing package has a dedicated section in the `<body>` of `index.html`. Within each section, a `div` container and a small JavaScript snippet render the PayPal button for that specific product.
**Important:** These snippets should be placed directly inside each `<div class="pricing-card">` for the respective product.
<div id="paypal-container-YOUR_HOSTED_ID"></div>
<script>
paypal.HostedButtons({
hostedButtonId: "YOUR_HOSTED_ID",
}).render("#paypal-container-YOUR_HOSTED_ID")
</script>
2. Product Details & Hosted IDs
Here are the specific details and PayPal Hosted IDs for your products. You will use these when updating product information in PayPal.
-
Product Name: 🌱 Agriculture & Biotech Starter Package
Current Price: $30.52 USD
Hosted Button ID: `EMWGPGHNN8Y8E`
Product Link: `https://www.paypal.com/ncp/payment/EMWGPGHNN8Y8E`
Description: Basic API Access, Standard Analytics Dashboard, Community Support, Up to 5 Users, 50 GB Data Storage.
-
Product Name: 🌱 Agriculture & Biotech Pro Package
Current Price: $76.30 USD
Hosted Button ID: `QGU3ZUQCMD49Q`
Product Link: `https://www.paypal.com/ncp/payment/QGU3ZUQCMD49Q`
Description: Advanced API Access, Premium Analytics & Reporting, Dedicated Priority Support, Unlimited Users, Custom Data Integrations.
-
Product Name: 🌱 Agriculture & Biotech Enterprise Package
Current Price: $152.60 USD
Hosted Button ID: `9C88S44F93M5J`
Product Link: `https://www.paypal.com/ncp/payment/9C88S44F93M5J`
Description: All Business Package Features, Dedicated Account Manager, 24/7 Phone Support, Enhanced Custom Integrations, On-site Training & Setup, Active Users: Unlimited, API Calls/Month: Custom, Storage: Custom.
3. Step-by-Step Guide: Generating & Integrating PayPal Buttons
Follow these steps to update product details and ensure your PayPal buttons are correctly integrated.
3.1. Update Product Details in PayPal (PayPal Account)
- Log in to your **PayPal Business Account** (https://www.paypal.com/ncp/links).
- Navigate to **Tools** > **PayPal Buttons** > **"Manage Saved Links and Buttons"**.
- Find the product package you wish to update (e.g., "Agriculture & Biotech Starter Package").
- Click **"Edit"** next to the corresponding button.
- **Update the Price, Description, and any other product details.** Ensure the price exactly matches the price displayed on your website.
- **Crucially, ensure the "Listing type" is set to "One set price" and under "Button specs," "Stacked buttons: Vertical" is selected** if you want the Yellow PayPal + Black Checkout button display.
- **Save Changes** in your PayPal account.
3.2. Retrieve PayPal Button Code (PayPal Account)
- After saving your changes in PayPal, return to **"Manage Saved Links and Buttons"**.
- Find your updated product button and click **"Open"** to view its code snippets.
- **Copy the "Part 2" code snippet.** This includes both the `<div id="paypal-container-...">` and its immediately following `<script>...</script>` block. This is the code you will paste into your website.
3.3. Update Your Website's HTML (Admin Panel)
- Access your website's `index.html` file through your **Admin Panel's code editor**.
- **Verify Global PayPal SDK (Part 1):** In the `<head>` section of `index.html`. Ensure it matches the latest "Part 1" code from PayPal (provided in Section 1.1 of this manual). This script needs to be present **only once**.
- **Locate Product Pricing Cards:** Scroll down to the `<section id="pricing" ...>` area in the `<body>`. Each pricing package is contained within a `<div class="pricing-card">`.
- **Update Product Details (Text):** Manually update the price (`<p class="price">`) and descriptive text (`<p class="price-description">`, `<ul>` list items) within each product card to reflect any changes you made in PayPal.
- **Replace PayPal Button Code (CRITICAL STEP):**
- For each product card (Starter, Pro, Enterprise), find the existing `<div>` and `<script>` block for its PayPal button.
- **Replace the entire existing PayPal `div` and `script` block** with the new "Part 2" code snippet you copied directly from PayPal in Step 3.2. Ensure the `id` of the `div` and the `hostedButtonId` in the script are specific to the correct package.
- **Save** your `index.html` file in your Admin Panel.
- **Clear Website Cache:** If your website platform has caching, clear it to ensure the changes appear live.
4. Managing QR Codes
QR codes provide a fast way for customers to access product payment links.
4.1. QR Code Details & Naming Convention
You have provided the Enterprise QR code details, and indicated a new sector: `agriculture-biotech`.
**Recommended Naming for Uploaded QR Images (for 7000+ products):**
`https://seedwave.faa.zone/sectors/agriculture-biotech/agrichain/package_name/paypal/agriqr_XX.png`
Where `XX` is `01` for Starter, `02` for Pro, `03` for Enterprise, and so on.
Example for Starter: `https://seedwave.faa.zone/sectors/agriculture-biotech/agrichain/starter/paypal/agriqr_01.png`
You will need to generate and upload QR codes for **Pro** and **Starter** packages from your PayPal account as well, following the same pattern for naming and storage.
4.2. Integrating QR Codes (HTML)
To display QR codes on your page, use standard `<img>` tags. You can add these inside your product cards or in a dedicated section. Ensure your Admin Panel allows for direct HTML insertion or image uploads.
<div class="qr-code-display">
<p>Scan to purchase:</p>
<img src="https://seedwave.faa.zone/sectors/agriculture-biotech/agrichain/starter/paypal/agriqr_01.png" alt="Starter Package QR Code" style="width:150px; height:150px;">
</div>
**Admin Panel Placement (Conceptual):** If your Admin Panel allows image uploads or direct HTML insertion, you would add these `<img>` tags where appropriate. Remember to upload the QR code image files to your hosting server first following the naming convention.
5. How to Instruct This AI for Future Tasks (10 Prompts Example)
When requesting code assistance from this AI, be as precise as possible. Follow these types of prompts for effective results:
- "Update the price for the Pro Package to `$80.00 USD` on the website and provide the full HTML."
- "Add a new section for 'Customer Testimonials' right above the Footer. Provide the HTML with 3 placeholder testimonials."
- "Change the background color of all pricing cards to `#F0F0F0` in light mode. Provide only the updated CSS."
- "My PayPal button for the Enterprise Package is not showing. Here is my current HTML [paste full HTML]. Please fix the Enterprise PayPal button. The Hosted ID is `9C88S44F93M5J`."
- "I need to add a dropdown for subscription terms (Monthly/Annual) to the Starter Package. Update the HTML for the quantity selector. Do NOT change any PayPal code."
- "The copyright year needs to be dynamic. Update the footer HTML to automatically display the current year using JavaScript."
- "I want to add a new 'FAQ' link to the main navigation. Show me how to add it and create a placeholder section for FAQs."
- "I have a new product, 'YieldBoost Add-on'. Add a new pricing card for it in the pricing grid. It costs `$25.00 USD` and its PayPal Hosted ID is `NEW_YIELD_BOOST_ID`. Provide the full HTML."
- "My website has an issue on mobile where sections overlap. Please review the CSS and suggest responsive adjustments for the `.feature-grid` layout. Provide only the relevant CSS changes."
- "I want to replace the `+more` text with an actual icon next to the PayPal/Visa/Mastercard logos for the QR code display. Provide the updated HTML for the QR code image block."