“Login works, data is saving — we're all set! ...Hold on, how do I actually send a welcome email to new sign-ups? And if I want to start charging for this, how do I even accept payments?”

In Part 2, we set up our backend using Supabase to handle data storage and user logins.

Now in Part 3, we'll take things up a notch by connecting a few more external services that handle some of the most common — and most dreaded — parts of running a web app.

Auto-sending emails, collecting user feedback with a polished contact form, and accepting payments — these things sound intimidating, but with AI coding tools and the right third-party services, you don't need to be a developer to pull them off.

Let's dive in.

1. Sending Emails Automatically

The moment you launch a web app, you'll need to send emails — things like welcome messages, password reset links, or order confirmations. Setting all of this up from scratch is a real headache: mail server configuration, spam filter issues, handling failed deliveries, and more. An email delivery service takes all of that off your plate.

Resend — Free for up to 100 emails per day

Paired with an AI coding tool, Resend makes it surprisingly easy to get email up and running — no deep technical knowledge required.
You can set your own domain as the sender address (e.g., mail.myapp.com) so emails actually land in inboxes instead of spam folders. And once it's connected to the Supabase user data from Part 2, you can automatically send emails to new sign-ups without lifting a finger.

1. When do you need it?

• Sending automated emails like sign-up confirmations or password resets

• Using your own domain as the sender address instead of Supabase's default

• Sending newsletters, announcements, or transactional messages to your users

• Tracking delivery status in real time from a dashboard

2. Setting Up Resend with Your AI Coding Tool

STEP 1 — Create a Resend Account

Go to resend.com → Get Started → Sign up with GitHub or email

STEP 2 — Verify Your Domain ⚠️ Don't Skip This

Before you can send emails from your own domain, you need to prove to Resend that you actually own it — similar to how a bank verifies your identity before issuing a credit card.

1. Resend Dashboard → Domains → Add Domain

2. Enter your domain (e.g., mail.myapp.com)

3. Copy the verification codes (SPF and DKIM records) Resend gives you, and paste them into your domain registrar or DNS provider (like Cloudflare or Namecheap)

4. Check back in a few hours — once it shows Verified, you're good to go (can take up to 48 hours)

STEP 3 — Get Your API Key

Resend Dashboard → API Keys → Create API Key → Copy it somewhere safe

STEP 4 — Connect MCP to Your AI Coding Tool

Resend supports MCP, which means your AI coding tool can talk to Resend directly. Just add this URL to your MCP settings:

https://resend.com/mcp

STEP 5 — Route Supabase Auth Emails Through Resend (Optional)

Want the sign-up and login emails from Supabase (created in Part 2) to come from your domain too? Here's how:

• Supabase Dashboard → Authentication → SMTP Settings → Enable Custom SMTP

• Host: smtp.resend.com / Port: 587 / Username: resend / Password: your Resend API Key

• Sender address: your verified domain (e.g., no-reply@mail.myapp.com)

3. Prompt Ideas to Get You Started

1. Automated confirmation and notification emails

   • ​“Automatically send a welcome email when someone signs up. Use the Resend API.”
   • ​“When a user requests a password reset, send them an email with a reset link.”

2. Email template design

   • ​“Build a receipt email template using React Email. Include the company logo, the amount charged, and the purchase date.”
   • ​“Create an HTML email template with a logo in the header, a personalized greeting in the body, and an unsubscribe link in the footer.”

3. Automatic receipt emails after payment

   • ​“When a Stripe payment success webhook fires, automatically send a receipt email using Resend.”

4. Delivery monitoring

   • ​“If an email fails to send, log the error and notify the admin.”

4. Free Plan Limits

Item	Free Limit
Monthly sends	3,000
Daily sends	100
Custom domains	1

---

2. Adding a Contact Form

A contact form lets visitors send you questions, feedback, or support requests — without needing your email address publicly listed. Sounds simple, but building one yourself involves more than you'd think:

• Where does the data actually go once someone hits Submit?

• How do you block spam bots from flooding your inbox?

• Can it automatically send a confirmation email back to the user?

• Can it ping you on Slack or log entries to a spreadsheet automatically?

A form service handles all of this for you, right out of the box.

Formspree — Free for up to 50 submissions per month

Formspree is about as plug-and-play as it gets. You sign up, copy a single URL (your form's endpoint), and paste it into your code. That's it — form submissions go straight to your inbox. No server required, no database to set up.

It's a perfect fit for landing pages, portfolios, or any site where you just need a simple, reliable way to hear from users.

1. When do you need it?

• Adding a contact or support form without writing any backend code

• Getting form submissions delivered directly to your email

• Syncing responses to Google Sheets, Slack, or other tools automatically

• Blocking spam with built-in reCAPTCHA support

2. Setting Up Formspree with Your AI Coding Tool

STEP 1 — Create a Formspree Account

Go to formspree.io → Get started → Sign up with email or Google

STEP 2 — Create a Form & Copy the Endpoint URL

1. In your dashboard, click New Form → Give it a name (e.g., “Contact Form”)

2. You'll see a unique submission URL — copy it (e.g., https://formspree.io/f/xpznqkdl)

3. Share that URL with your AI coding tool and ask it to wire it up in your form — it'll just work.

STEP 3 — Turn On Spam Protection

Formspree Dashboard → Form Settings → Spam protection

• Built-in spam filtering: Formspree catches most bots automatically, no setup needed.

• Custom reCAPTCHA v2/v3: For extra protection, you can connect Google's reCAPTCHA.

• reCAPTCHA v3 is especially nice because it runs silently in the background — no “I'm not a robot” checkbox for your users to deal with.

STEP 4 — Connect to Other Tools (Optional)

Formspree can automatically forward submissions to wherever you already work:

• Google Sheets: Every submission gets logged as a row in a spreadsheet — great for keeping records.

• Slack: Get a Slack notification every time someone fills out your form.

• Salesforce / Asana: Route leads or tasks straight into your CRM or project management tool.

• Webhooks: Send data anywhere — your own server, another API, you name it.

STEP 5 — Ask the AI to Build the Form

Grab the endpoint URL from STEP 2 and try prompts like these:

• ​“Build a contact form using Formspree. The endpoint URL is https://formspree.io/f/xpznqkdl. Include fields for name, email, and message.”

• ​“After the form is submitted, show a success message if it worked, or a helpful error message if something went wrong.”

3. Prompt Ideas to Get You Started

1. Basic contact form

   • ​“Create a contact form with name, email, and message fields. Connect it to my Formspree endpoint and show a success or error message after submission.”

2. No page-reload submission (AJAX)

   • ​“Submit the form using AJAX so the page doesn't reload. Show a 'Thanks, we'll be in touch!' message on success.”

3. Auto-reply confirmation email

   • ​“When someone submits the form, automatically send them a confirmation email so they know we received it.”

4. Custom styling

   • ​“Style the contact form with Tailwind CSS so it looks clean and modern. Make sure it works in dark mode too.”

4. Free Plan Limits

Item	Free Limit
Monthly submissions	50
Email recipients	Up to 2
Data retention	30 days
Number of forms	Unlimited

---

3. Accepting Payments

If you want to charge for your service, you'll need a way to collect payments — and this is one area where you really don't want to cut corners. Handling credit card data comes with serious legal and security obligations, and building a compliant system from the ground up is complex even for experienced developers.

Here's what you'd have to deal with on your own:

• Card data security — Global payment card standards (PCI DSS) prohibit storing raw card numbers in your own database

• Refunds and cancellations — Handling partial refunds, mid-cycle subscription cancels, and edge cases

• Taxes and invoices — Calculating sales tax by region, auto-generating receipts

• Subscription logic — Billing cycles, plan upgrades/downgrades, and retrying failed payments

A dedicated payment service handles all of this, and with MCP and your AI coding tool, you can set it up without writing everything from scratch.

Stripe

Stripe is the gold standard for online payments. Millions of businesses — from solo founders to Fortune 500 companies — use it to handle one-time purchases, recurring subscriptions, free trials, discount codes, and automated receipts. It's also developer-friendly, which means AI coding tools work with it really well.

1. When do you need it?

• Charging for monthly or annual subscription plans

• Selling one-time purchases like digital downloads or services

• Gating features behind a paywall (e.g., unlocking Pro features after a successful payment)

• Offering free trials, coupons, or discount codes

• Automatically sending email receipts after every purchase

2. Setting Up Stripe with Your AI Coding Tool

STEP 1 — Create a Stripe Account

Go to stripe.com → Start now → Sign up with email

• You'll start in Test mode by default — you can make fake purchases with test card numbers to make sure everything works before going live.

• When you're ready to accept real payments, you'll submit your business info and switch to Live mode.

STEP 2 — Create Your Products and Prices

Stripe Dashboard → Products → Add product

• Add a name, description, and optional image for your product

• Set a price: choose between a one-time charge or a recurring subscription

• For subscriptions, you can set up both monthly and annual pricing side by side

STEP 3 — Get Your API Keys

Stripe Dashboard → Developers → API Keys

• Publishable key: Safe to use in your frontend code (the part users can see)

• Secret key: Only used in backend/server code — never expose this publicly (⚠️)

STEP 4 — Connect MCP to Your AI Coding Tool

Stripe supports MCP, so you can connect it directly to your AI coding tool. Add this URL to your MCP settings:

https://mcp.stripe.com

Once connected, your AI can handle a lot of the Stripe configuration for you — no need to manually click through every settings screen.

STEP 5 — Set Up Webhooks (Payment Notifications)

When a customer completes a payment, your app needs to know about it — so it can unlock features, send a receipt, or update the user's account. That's where webhooks come in: Stripe sends a real-time notification to a URL on your server whenever something important happens.

• Stripe Dashboard → Developers → Webhooks → Add endpoint

• Enter a URL on your site that will receive the notifications (e.g., https://myapp.com/api/webhooks/stripe)

• Choose which events to listen for: checkout.session.completed (payment succeeded), customer.subscription.deleted (subscription canceled), etc.

3. Prompt Ideas to Get You Started

1. Build a checkout page

   • ​“Build a subscription checkout page using Stripe Checkout with two plan options: $10/month and $100/year. Let the user pick which one they want.”
   • ​“After a successful payment, redirect to /success. If they close the checkout, send them back to /pricing.”

2. Subscription management

   • ​“Check if the current user has an active subscription. If they do, show the Pro features. If not, show an upgrade prompt.”
   • ​“Add a ‘Manage Subscription’ button to the account page that opens Stripe's Customer Portal so users can cancel or update their plan themselves.”

3. Free trials and discount codes

   • ​“Set up a 7-day free trial. After the trial ends, automatically start billing the user.”
   • ​“Apply a 20% discount to the first month when a user enters the promo code ‘WELCOME20’ at checkout.”

4. Automating payment events with webhooks

   • ​“When a payment succeeds, update the user's subscription status in the database and send them a receipt email via Resend.”
   • ​“When a subscription is canceled, downgrade the user's account and send a friendly offboarding email.”