MGX Docs

Appearance

MGX

Stripe Connect ​

Stripe & Payment ​

MGX now supports quick configuration of Stripe payments via Supabase Edge Functions.

Requirements ​

Before integrating Stripe, ensure you have:

  • A working MGX application

  • The MGX project is already connected to a Supabase Project. Learn more about Supabasae

  • 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 ​

  1. Connect Supabase

  • Click the Supabase button in the top-right of MGX

  • Follow the Supabase Connect instructions to select your target Supabase Project

  • Once connected, you can configure payment settings via Supabase


  1. 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, MGX Agent will generate configuration buttons. You will need to fill in at least two fields.


  1. Click the Add Stripe Secret Key Button Add Stripe Secret Key图片示例

  • 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. Secret key与Price ID表单填写图片示例

You can retrieve your Stripe secret key here: https://dashboard.stripe.com/test/apikeys

Navigate to Product Catalog > Products, Obtain 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". Stripe页面Price ID获取方式1

  • Directly click the price name to open the detail page, then copy the price ID shown in the top-right corner. Stripe页面Price ID获取方式2

Finally, accurately paste each price ID into the corresponding input field.

MGX表单对应区域填写提示

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.


  1. Click the Add Stripe Webhook Secret KeyButton

点击Add Webhook Secret

  • Enter your Webhook Secret Key

  1. How to Find Webhook Secret Key：

In Stripe, click “Developers” in the lower-left corner, then select the Webhooks option.

开发者>Webhook

On the Webhooks page, click the "Add destination" button.

点击Add Destination

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选择对应的Webhook Event

After clicking “Continue”, select “Webhook endpoint.” 选择Wenhook端点

Enter the endpoint URL from Supabase 粘贴Supabase 端点URL


  1. How to Find Your Supabase Endpoint URL:

Click View Edge Functionin MGX. 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. 复制边缘函数端点URL


  1. 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?
How do I switch to Production Mode?
How can I verify if a test payment was successful?