Skip to main content
Stripe
We will be building a payment hub for users to create and register for workshops or events that are hosted either online or on a physical location. The workshops will be able to accept payments from registered attendees which will be handled by Stripe.

​
Why Stripe?

Stripe is an easy to use integration that gets you up and running and accepting payments in no time. You will be able to quickly set up a Stripe account that allows you to accept payments from all types of methods, including credit cards, debit cards, electronic wallets, and more. To get started, head on over to stripe.com and sign up for an account.

​
Start your app on Mocha

The foundational prompt matters. When you first create your app on Mocha, make sure your genisis prompt is clear and precise. We want to use exact language to touch on all of the important aspects of the build, so be sure to provide as much detail as possible about what you are trying to build. In this example, we will be using the following prompt: 
Build a workshop booking and payment system for experts who want to sell online sessions.

As the workshop host, I want to:
- Create workshops with a title, description, date/time, duration, and price
- Set a maximum number of attendees
- See who has registered and paid

As an attendee, I want to:
- Browse available workshops
- Pay to register for a workshop
- Receive confirmation of my booking
- See my upcoming registered workshops

Use Stripe for payment processing. The checkout flow should be smooth — when someone clicks "Register", they pay through Stripe and get confirmed automatically.

Include proper webhook handling so registrations are only confirmed after successful payment. Show sold out status when workshops reach capacity.
Notice how this prompt includes:
  • A clear description of the app’s purpose and audience
  • Specific features broken down by role
  • Technical requirements (Stripe, webhook handling)
  • Experience expectations (smooth checkout flow)
This level of detail helps Mocha understand exactly what you’re building and sets a solid foundation for the rest of the development process. Once you’ve submitted the initial prompt, you should be met with an input field asking you to add a few API keys from your Stripe account. We should be able to retrieve them from the Stripe dashboard.
Stripe Keys

​
Setting up the Stripe API Key

During the build, you should see a prompt to add secrets for Stripe. You’ll need:
  • STRIPE_SECRET_KEY
  • STRIPE_WEBHOOK_SECRET
If you need a walkthrough for adding secrets, click the walkthrough button and follow the instructions.
Stripe Secret Key

​
How to get your STRIPE_SECRET_KEY

  1. Visit dashboard.stripe.com
  2. Click on the Developers menu in the bottom left corner
  3. Click on the API keys option third from the bottom
  4. There you will be able to create a new “Secret key” by clicking the Create secret key button
  5. Copy the Secret key and paste it into the STRIPE_SECRET_KEY field in your Mocha app. The secret key should begin with the letters sk_live_.
Make sure it is the secret key, and not the publishable key. The publishable key starts with the letters pk_live_ while the secret key starts with the letters sk_live_
Stripe Secret Key

​
Configuring Webhooks

This is the most involved piece of the setup. You will be asked to provide a webhook secret but you must first look for the webhook URL in your Mocha app. In order for Stripe to access your webhook URL, you will need to publish your app to the public internet.

​
Publish your app first

Publish App
Pro plans will be able to publish their app to a custom subdomain. I’ve named mine workshopstudio.mocha.app. If you are on a free plan, your app will be published to a random .mocha.app subdomain. Pay attention to what your URL is, because we will be using it to set up our webhook in Stripe.

​
Finding the webhook URL

Now go back to the Mocha chat log and find the part that mentions the webhook endpoint. It will look something like this:
Stripe Webhook URL
Notice how the Mocha AI agent mentions the /api/webhooks/stripe endpoint. This is the URL that Stripe will use to send webhooks to your app. Now take the published URL of your app and add the /api/webhooks/stripe endpoint to it. For example, if your app is published to https://workshopstudio.mocha.app, the full URL will be https://workshopstudio.mocha.app/api/webhooks/stripe. This is the URL that we will be using to set up our webhook in Stripe.

​
Setting up the webhook in Stripe

In the Stripe Dashboard:
  1. Go to Developers → Webhooks
  2. Click Add destination
  3. Select events: In my example, the Mocha AI agent wanted me to listen for checkout.session.completed events. You can listen for other events as well, but for this example, we will be using checkout.session.completed.
Stripe Webhook Setup
  1. Set the endpoint URL to your Mocha app’s webhook route (in my example, it is https://workshopstudio.mocha.app/api/webhooks/stripe)
Stripe Webhook Endpoint
  1. Copy the Signing secret and paste it into the STRIPE_WEBHOOK_SECRET field in your Mocha app.
The webhook signing secret should begin with the letters whsec_.
Stripe Webhook Signing Secret

​
Testing Payments

Once you’ve set everything up correctly, payments should start appearing in your Stripe account from your Mocha app. Test this by using your live published Mocha app and sending payments to your Stripe account.
Stripe Test Payment

​
Wrapping up

Stripe Send Payment
In this guide, we walked through the process of setting up a Mocha app that accepts payments through Stripe. We covered:
  • Crafting a strong initial prompt
  • Setting up Stripe API keys
  • Configuring webhooks for payment confirmation
Stripe does deduct a small fee from each payment. This amounts to roughly 2.9% + $0.30 per transaction but this may vary depending on your country and the type of payment method used. You can see the full source code for the app we built in this guide by cloning the app in the Workshop Payments Example App at https://workshopstudio.mocha.app