Stripe Connect

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:

• Card Number: 4242 4242 4242 4242
• Expiry date: Any future date
• CVC: Any 3-digit number

Stripe Payment Setup

1. 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

2. 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.

3. Click the Add Stripe Secret Key Button

   

   • 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".

   

   You can 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.

4. Click the Add Stripe Webhook Secret Key Button

   

   • Enter your Webhook Secret Key

5. 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_failed
   • checkout.session.async_payment_succeeded
   • checkout.session.completed
   • checkout.session.expired

   

   After clicking "Continue", select "Webhook endpoint."

   

   Enter the endpoint URL from Supabase.

   

6. How to Find Your Supabase Endpoint URL:

   Click View Edge Function in MGX.

   

   • Click to select the edge function with the corresponding _webhook suffix.

     

   • In the Details panel of the corresponding edge function, copy the Endpoint URL and paste it into the Stripe Event Destination.

     

7. 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?

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?

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?

After completing a test payment, go to the Payments page in Stripe to view your test transaction records.