Requirements
Before integrating Stripe, ensure you have:
A working MGX application
The MGX project is already connected to a Supabase Project. Learn more about Supabase.
Created products and corresponding prices in your Stripe dashboard
Note: Preview mode cannot be used to test payment functionality. Deploy your MGX app and switch Stripe to Test Mode to verify integration.
Test card: 4242 4242 4242 4242
Any future expiry date and any three-digit CVC will work.
Stripe Payment Setup
Connect Supabase
Click the Supabase button in the top-right of MGX
Follow the Supabase Connect Guides to select your target Supabase Project
Once connected, you can configure payment settings via Supabase
Describe Your Subscription Requirements in Natural Language
Example: Create a payment system that supports three subscription plans at $4.99 per week, $14.99 per month, and $149.99 per year.
After submitting, the MGX Agent will generate configuration buttons. You will need to fill in at least two fields.
Click the
Add Stripe Secret KeyButton
Enter your Stripe secret key under the STRIPE_SECRET_KEY field.
For each plan, enter its corresponding Stripe Price ID in the field ending with PRICE_ID.
You can retrieve your Stripe secret key here: https://dashboard.stripe.com/test/apikeys
Navigate to Product Catalog > Products, get the price ID using either of the following methods:
In the "Pricing" list, click the “More” button to the right of the corresponding price, then click "Copy Price ID".
Directly click the price name to open the detail page, then copy the price ID shown in the top-right corner.
Finally, accurately paste each price ID into the corresponding input field.
Note: For privacy and security, never paste your secret key directly into the MGX chat. Exposure may allow unauthorized access to your Stripe account. Use MGX's "Add API Key" button to store it securely instead.
Click the
Add Stripe Webhook Secret KeyButton
Enter your Webhook Secret Key
How to Find Webhook Secret Key:
In Stripe, click “Developers” in the lower-left corner, then select the Webhooks option.
On the Webhooks page, click the "Add destination" button
Select the webhook events that match your project needs:
checkout.session.async_payment_failedcheckout.session.async_payment_succeededcheckout.session.completedcheckout.session.expired
After clicking "Continue", select "Webhook endpoint."
Enter the endpoint URL from Supabase
How to Find Your Supabase Endpoint URL:
Click
View Edge Functionin MGX.
Click to select the edge function with the corresponding
_webhooksuffix.
In the Details panel of the corresponding edge function, copy the Endpoint URL and paste it into the Stripe Event Destination.
Test Your Integration
Use Stripe's Test Mode to test payments.
Test card details:
Card number: 4242 4242 4242 4242
Any future expiration date
Any 3-digit CVC
FAQ
Why can't I test payments in Preview Mode?
Why can't I test payments in Preview Mode?
Preview Mode runs in a local environment, which does not provide a publicly accessible Webhook URL. You must deploy your app to receive Stripe events.
How do I switch to Production Mode?
How do I switch to Production Mode?
You can disable Test Mode in the Stripe Dashboard and use your live Secret Key and Webhook Secret.
How can I verify if a test payment was successful?
How can I verify if a test payment was successful?
After completing a test payment, go to the Payments page in Stripe to view your test transaction records.