# Integrating Stripe Payment Gateway: Frontend Form Implementation In this task, we'll create a secure and user-friendly frontend form for card details and payment confirmation using Stripe Elements. This form will ensure PCI compliance and provide a seamless payment experience for users. ## Step 1: Include Stripe.js Library First, we need to include the Stripe.js library in our HTML file. This library provides the necessary functionality to interact with Stripe's API. ```html ``` ## Step 2: Initialize Stripe Initialize Stripe with your publishable key. Replace `'your_publishable_key'` with your actual Stripe publishable key. ```javascript // Initialize Stripe const stripe = Stripe('your_publishable_key'); ``` ## Step 3: Create Payment Form Create a form with card details using Stripe Elements. We'll use the `cardElement` component provided by Stripe. ```html ``` ## Step 4: Style the Payment Form Add CSS styles to make the form look clean and professional. ```css #payment-form { background: #f5f5f5; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } #payment-element { margin-bottom: 20px; } #submit { background: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } #submit:hover { background: #45a049; } #payment-status { margin-top: 10px; text-align: center; } ``` ## Step 5: Implement Stripe Elements Create and mount the Stripe Card Element. ```javascript // Create a Stripe client instance const stripeClient = Stripe('your_publishable_key'); // Create the Payment Element const { Error, Elements, CardElement, useStripe, useElements, } = stripeClient.loadStripe('your_publishable_key'); // Mount the Card Element const elements = Elements(); const cardElement = elements.create('card'); cardElement.mount('#payment-element'); // Handle form submission document.getElementById('payment-form').addEventListener('submit', async (event) => { event.preventDefault(); try { // Show processing status document.getElementById('payment-status').textContent = 'Processing...'; // Create a payment intent on your server const response = await fetch('/create-payment-intent', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ amount: document.getElementById('amount').textContent }), }); const { clientSecret } = await response.json(); // Confirm the payment const { error, paymentIntent } = await stripeClient.confirmCardPayment(clientSecret, { payment_method: { card: cardElement, type: 'card', }, }); if (error) { document.getElementById('payment-status').textContent = error.message; } else { if (paymentIntent.status === 'succeeded') { document.getElementById('payment-status').textContent = 'Payment successful!'; // Redirect to success page or show success message window.location.href = '/payment-success'; } else { document.getElementById('payment-status').textContent = 'Payment failed. Please try again.'; } } } catch (error) { document.getElementById('payment-status').textContent = 'An error occurred. Please try again.'; console.error(error); } }); ``` ## Step 6: Handle Payment Status Create a server-side endpoint to handle the payment status. This will be used to update your database and send confirmation emails. ```javascript // Server-side endpoint app.post('/payment-status', async (req, res) => { const { paymentIntentId } = req.body; try { const paymentIntent = await stripe.paymentIntents.retrieve( paymentIntentId, { expand: ['payment_method_types'], } ); if (paymentIntent.status === 'succeeded') { // Update your database with successful payment res.status(200).json({ success: true }); } else { res.status(400).json({ success: false, error: 'Payment failed' }); } } catch (error) { res.status(500).json({ success: false, error: error.message }); } }); ``` ## Step 7: Add Error Handling and User Feedback Implement proper error handling and provide clear feedback to users. ```javascript cardElement.addEventListener('change', (event) => { if (event.error) { document.getElementById('payment-status').textContent = event.error.message; } else { document.getElementById('payment-status').textContent = ''; } }); ``` ## Step 8: Security Considerations - Always use HTTPS for production environments. - Never expose your Stripe secret key on the client side. - Use environment variables to store sensitive keys. - Regularly update your Stripe.js library to the latest version. ## Next Steps After completing this task, you'll need to: 1. Implement the backend logic for handling payment intents. 2. Set up webhook handlers for payment status updates. 3. Add error handling and user feedback for different payment scenarios. 4. Implement a donation receipt generation system. ## Recommended Reading - [Stripe Documentation](https://stripe.com/docs) - [Stripe Security Best Practices](https://stripe.com/docs/security) - [PCI Compliance with Stripe](https://stripe.com/docs/security#pci-dss-compliance)

Donation Amount: $50.00