| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Claude-PayPal MCP Integration</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #0070ba 0%, #00a8e8 100%); |
| } |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .animate-pulse { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| @keyframes pulse { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.5; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| |
| <header class="gradient-bg text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-4"> |
| <div class="bg-white rounded-full p-2"> |
| <i class="fas fa-robot text-blue-600 text-2xl"></i> |
| </div> |
| <h1 class="text-2xl font-bold">Claude-PayPal MCP</h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="#" class="hover:text-blue-200 transition">Dashboard</a> |
| <a href="#" class="hover:text-blue-200 transition">Transactions</a> |
| <a href="#" class="hover:text-blue-200 transition">Settings</a> |
| <a href="#" class="hover:text-blue-200 transition">Docs</a> |
| </nav> |
| <button class="md:hidden text-white"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <section class="mb-12"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="md:flex"> |
| <div class="md:w-1/2 p-8 md:p-12"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">AI-Powered Payment Integration</h2> |
| <p class="text-gray-600 mb-6"> |
| Seamlessly integrate Claude AI with PayPal to create intelligent payment flows, automated receipts, and AI-powered transaction processing. |
| </p> |
| <div class="flex space-x-4"> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition"> |
| Get Started |
| </button> |
| <button class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition"> |
| View Demo |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 bg-gradient-to-br from-blue-50 to-indigo-50 flex items-center justify-center p-8"> |
| <div class="relative w-full max-w-md"> |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-blue-200 rounded-full opacity-20"></div> |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-indigo-200 rounded-full opacity-20"></div> |
| <div class="relative bg-white p-6 rounded-xl shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-comment-dots text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-gray-800">AI Payment Assistant</h3> |
| <p class="text-sm text-gray-500">Ready to help with your transactions</p> |
| </div> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg mb-3"> |
| <p class="text-gray-700">"I can help you process payments, generate receipts, and answer questions about your transactions."</p> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <button class="bg-blue-100 text-blue-600 p-2 rounded-full"> |
| <i class="fas fa-dollar-sign"></i> |
| </button> |
| <button class="bg-blue-100 text-blue-600 p-2 rounded-full"> |
| <i class="fas fa-receipt"></i> |
| </button> |
| </div> |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm"> |
| Start Chat |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-12"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Key Features</h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover"> |
| <div class="p-6"> |
| <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-brain text-blue-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">AI-Powered Processing</h3> |
| <p class="text-gray-600"> |
| Claude AI handles transaction processing, generates receipts, and provides intelligent responses to payment queries. |
| </p> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover"> |
| <div class="p-6"> |
| <div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> |
| <i class="fab fa-paypal text-green-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Seamless PayPal Integration</h3> |
| <p class="text-gray-600"> |
| Full integration with PayPal's API for secure payment processing with support for both sandbox and production environments. |
| </p> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover"> |
| <div class="p-6"> |
| <div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-terminal text-purple-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Termux Ready</h3> |
| <p class="text-gray-600"> |
| Optimized for Termux on Android devices, allowing you to run this integration anywhere with just your phone. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-8"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Quick Setup Guide</h2> |
| |
| <div class="space-y-6"> |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0"> |
| 1 |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Install Required Packages</h3> |
| <div class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"> |
| <code class="text-sm"> |
| pkg update -y && pkg install -y nodejs yarn git python nano openssl |
| </code> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0"> |
| 2 |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Clone the Repository</h3> |
| <div class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"> |
| <code class="text-sm"> |
| git clone https://github.com/yourusername/claude-paypal-mcp.git<br> |
| cd claude-paypal-mcp |
| </code> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0"> |
| 3 |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Install Dependencies</h3> |
| <div class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"> |
| <code class="text-sm"> |
| yarn install |
| </code> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0"> |
| 4 |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Configure Environment</h3> |
| <div class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"> |
| <code class="text-sm"> |
| nano .env<br> |
| # Add your PayPal and Claude API credentials |
| </code> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0"> |
| 5 |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Start the Server</h3> |
| <div class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"> |
| <code class="text-sm"> |
| node claude-paypal-mcp.js |
| </code> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-12"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-8"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">API Demo</h2> |
| |
| <div class="grid md:grid-cols-2 gap-6"> |
| |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> |
| <div class="bg-gray-50 px-4 py-3 border-b border-gray-200"> |
| <h3 class="font-semibold text-gray-800">Create Payment Order</h3> |
| </div> |
| <div class="p-4"> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Amount</label> |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="10.00" value="10.00"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Currency</label> |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option>USD</option> |
| <option>EUR</option> |
| <option>GBP</option> |
| </select> |
| </div> |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition"> |
| Create Order |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> |
| <div class="bg-gray-50 px-4 py-3 border-b border-gray-200"> |
| <h3 class="font-semibold text-gray-800">API Response</h3> |
| </div> |
| <div class="p-4 h-full"> |
| <div class="bg-gray-800 text-gray-100 p-4 rounded-lg h-full overflow-auto"> |
| <pre class="text-sm"> |
| <span class="text-blue-400">{</span> |
| <span class="text-yellow-400">"orderId"</span>: <span class="text-green-400">"5O190127TN364705T"</span>, |
| <span class="text-yellow-400">"status"</span>: <span class="text-green-400">"CREATED"</span>, |
| <span class="text-yellow-400">"links"</span>: <span class="text-blue-400">[</span> |
| <span class="text-blue-400">{</span> |
| <span class="text-yellow-400">"href"</span>: <span class="text-green-400">"https://www.sandbox.paypal.com/checkoutnow?token=5O190127TN364705T"</span>, |
| <span class="text-yellow-400">"rel"</span>: <span class="text-green-400">"approve"</span>, |
| <span class="text-yellow-400">"method"</span>: <span class="text-green-400">"GET"</span> |
| <span class="text-blue-400">}</span> |
| <span class="text-blue-400">]</span> |
| <span class="text-blue-400">}</span></pre> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-12"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">What Our Users Say</h2> |
| <div class="grid md:grid-cols-3 gap-6"> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-user text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">Alex Johnson</h4> |
| <p class="text-sm text-gray-500">Developer</p> |
| </div> |
| </div> |
| <p class="text-gray-600 italic"> |
| "The Claude-PayPal integration saved me countless hours of development time. The AI-generated receipts are a game-changer!" |
| </p> |
| <div class="mt-4 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-user text-green-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">Sarah Miller</h4> |
| <p class="text-sm text-gray-500">E-commerce Owner</p> |
| </div> |
| </div> |
| <p class="text-gray-600 italic"> |
| "Running this on my Android phone via Termux has been incredibly convenient. The setup was straightforward and it just works." |
| </p> |
| <div class="mt-4 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-user text-purple-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">David Chen</h4> |
| <p class="text-sm text-gray-500">CTO</p> |
| </div> |
| </div> |
| <p class="text-gray-600 italic"> |
| "The combination of AI and payments opens up so many possibilities. This integration is powerful yet simple to implement." |
| </p> |
| <div class="mt-4 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="gradient-bg text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Claude-PayPal MCP</h3> |
| <p class="text-blue-100"> |
| AI-powered payment processing solution that integrates Claude AI with PayPal for intelligent transaction handling. |
| </p> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-blue-100 hover:text-white transition">Documentation</a></li> |
| <li><a href="#" class="text-blue-100 hover:text-white transition">GitHub Repository</a></li> |
| <li><a href="#" class="text-blue-100 hover:text-white transition">API Reference</a></li> |
| <li><a href="#" class="text-blue-100 hover:text-white transition">Support</a></li> |
| </ul> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Resources</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-blue-100 hover:text-white transition">PayPal Developer</a></li> |
| <li><a href="#" class="text-blue-100 hover:text-white transition">Anthropic API</a></li> |
| <li><a href="#" class="text-blue-100 hover:text-white transition">Termux Wiki</a></li> |
| <li><a href="#" class="text-blue-100 hover:text-white transition">Blog</a></li> |
| </ul> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Connect</h3> |
| <div class="flex space-x-4 mb-4"> |
| <a href="#" class="bg-blue-700 hover:bg-blue-800 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="bg-blue-700 hover:bg-blue-800 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| <i class="fab fa-github"></i> |
| </a> |
| <a href="#" class="bg-blue-700 hover:bg-blue-800 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| <i class="fab fa-discord"></i> |
| </a> |
| </div> |
| <p class="text-blue-100"> |
| Subscribe to our newsletter for updates |
| </p> |
| <div class="mt-3 flex"> |
| <input type="email" placeholder="Your email" class="px-3 py-2 rounded-l-md text-gray-800 w-full focus:outline-none"> |
| <button class="bg-blue-800 hover:bg-blue-900 px-4 py-2 rounded-r-md transition"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-blue-400 mt-8 pt-8 text-center text-blue-100"> |
| <p>© 2023 Claude-PayPal MCP Integration. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.querySelector('.features-grid').addEventListener('click', function(e) { |
| if (e.target.classList.contains('feature-card')) { |
| |
| e.target.classList.add('animate-pulse'); |
| setTimeout(() => { |
| e.target.classList.remove('animate-pulse'); |
| }, 2000); |
| } |
| }); |
| |
| |
| const createOrderBtn = document.querySelector('button:contains("Create Order")'); |
| if (createOrderBtn) { |
| createOrderBtn.addEventListener('click', function() { |
| alert('Order creation would be processed here in a real implementation'); |
| }); |
| } |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Drewtu/clawd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
