Connect Stripe to your MonstarX app

Take card payments, subscriptions and checkouts in your app.

Type

For your app

Category

Payments and billing

Connect with

API key

Stripe is a payments company: it handles the card form, the bank side and the receipts, and pays the money out to your bank account. Connect it and your app can sell things — a class pass, a product, a monthly membership — with a secure checkout page run by Stripe.

What can you build with it?

• A “Buy now” button that opens Stripe’s checkout page and brings the customer back to your app when they have paid.
• Passes and bundles, like “5 classes for $90”, that unlock something in the app once paid.
• Monthly or yearly subscriptions for members or a paid plan.
• An order history for each customer, and an admin page listing payments.
• Automatic follow-up, like marking an order as paid and emailing a receipt, when Stripe confirms the payment.

Before you start

• A Stripe account. Creating one is free; Stripe takes a fee from each successful payment (see Stripe’s pricing). MonstarX adds nothing on top.
• For testing, nothing else: every Stripe account can use a sandbox, a practice copy of your account where no real money moves.
• For real payments, Stripe asks you to activate your account first — your business details and the bank account to pay into.

What are Sandbox and Production?

Stripe gives you two sets of keys, and MonstarX asks which one you are pasting in the Environment choice:

Environment	Keys start with	What happens
Sandbox (test keys)	sk_test_… and pk_test_…	Pretend payments with test card numbers. No real card is charged and no money moves. Use it while you build.
Production (live keys)	sk_live_… and pk_live_…	Real cards, real money, paid out to your bank. Use it when real customers pay.

Things you create in one do not exist in the other: products, prices, customers and payments made in a sandbox stay in the sandbox.

How do I pay with a test card?

In a sandbox, Stripe’s checkout accepts its published test cards. Use any future expiry date (like 12/34), any three-digit CVC and any postcode:

Card number	What it does
4242 4242 4242 4242	The payment succeeds.
4000 0000 0000 0002	The card is declined, so you can see what customers see when a payment fails.
4000 0025 0000 3155	The bank asks for an extra check (3D Secure) before the payment goes through.

Never type a real card number into a sandbox checkout. Stripe lists more test cards in its testing guide.

Get your keys

1. Sign in to the Stripe Dashboard.

2. To test, open a sandbox from the account menu at the top left. To go live, switch to live mode instead.

3. Open API keys (under Developers). Copy the Publishable key, then reveal and copy the Secret key.

Caution

The secret key can take money and refunds on your account. Paste it only into MonstarX’s connector form — never into the chat, an email or your app’s code. A live secret key is shown only once, so keep it somewhere safe.

Connect it in MonstarX

When you ask for payments, MonstarX usually shows a Connect Stripe card in the chat with the same fields. You can also connect it yourself:

1. Open your project and click Backend in the top bar, then Cloud.

2. Under Connectors, click Connect beside Stripe.

3. Choose the Environment: Sandbox (test keys) or Production (live keys).

4. Paste the Secret key and Publishable key. Leave Webhook signing secret empty for now.

   

5. Click Connect Stripe. The row shows Connected · sandbox (or Connected · production) and your preview restarts with the keys.

MonstarX does not check that the keys match the environment you picked, so make sure sk_test_ keys go with Sandbox and sk_live_ keys with Production.

Do I need the webhook signing secret?

A webhook is Stripe telling your app “this payment went through”, even if the customer closed the page before coming back. Apps that unlock something after payment, or run subscriptions, should have one. Add it once your app is published, because Stripe cannot reach your private preview:

1. Ask MonstarX: “What is my Stripe webhook address, and which events should it listen to?” It is usually https://your-app.monstarx.app/api/stripe-webhook.

2. In Stripe, open Webhooks, click Create an event destination, pick those events, choose Webhook endpoint and paste the address.

3. Reveal the signing secret (it starts with whsec_) and copy it.

4. In MonstarX, click Update keys on the Stripe row, paste it into Webhook signing secret and click Save keys. Publish again so the live app gets it.

Sandbox and live mode each have their own webhooks and signing secrets.

Ask MonstarX to use it

You type	What happens
“Let members buy a 5-class pass for $90 with Stripe.”	A buy button, a Stripe checkout for that amount and a thank-you page; the pass is added once paid.
“Add a monthly Pro plan at $12 with Stripe, and a page to see my plan.”	A subscription checkout and a page showing the member’s plan.
“Add an admin page that lists every payment.”	A page listing payments, with who paid, what for and when.
“Import my Stripe products into the shop.”	MonstarX needs your keys to read your account, so the card says MonstarX needs Stripe to continue and it carries on by itself once you connect.

No keys yet? Click Later on the card. MonstarX builds the whole checkout anyway, and the button says Stripe is not connected yet until you add them.

Go live

1. Activate your Stripe account, switch to live mode and copy the live keys.

2. In Backend›Cloud, click Update keys on the Stripe row.

3. Set Environment to Production (live keys), paste both live keys (and a live webhook signing secret, if you use one) and click Save keys.

4. Publish your app again. From now on, payments are real.

Tip

Make one real payment yourself with a small amount, then refund it from the Stripe Dashboard. It is the quickest way to check everything works in live mode.

Security and privacy

• Your keys are stored encrypted with this app only. Their names appear in Backend›Secrets; their values are never shown again.
• The secret key and webhook signing secret are only used by your app’s server. The publishable key is made to be seen in the browser, and that is safe.
• Card numbers are typed into Stripe’s own checkout page. They never reach your app or MonstarX.
• Only the project’s owner can connect, update or disconnect Stripe. Disconnect removes the keys from this app; the checkout then shows that Stripe is not connected.
• If a key leaks, roll it in the Stripe Dashboard and paste the new one with Update keys.

Good to know

• One app uses one Stripe environment at a time. Switching a live app back to sandbox keys stops real payments until you switch again.
• Stripe also offers restricted keys (rk_…) with only the permissions you choose. They work in the Secret key field if they allow everything your app does, such as creating checkout sessions.
• QA testing tests a payment flow up to the Stripe step and marks it as needing keys while Stripe is not connected.

Frequently asked questions

Does MonstarX take a share of my sales?

No. Payments go straight to your Stripe account. Only Stripe's own fees apply.

Can I try payments without a real card?

Yes. Connect with Sandbox (test keys) and pay with the test card 4242 4242 4242 4242, any future date and any CVC. No money moves.

How do I switch from test to real payments?

Click Update keys on the Stripe row, set Environment to Production (live keys), paste your live keys, click Save keys and publish again.

Why does my checkout say Stripe is not connected?

The keys are not in yet, or were removed. Open Backend → Cloud and connect Stripe; the preview restarts with the keys.

Can I see payments in MonstarX?

Your app shows what MonstarX built for it, like an orders page. The full record of every payment, refund and payout is in your Stripe Dashboard.

Related

Connect a service to your appHow app connectors, cards and Later work.

Publish your appPut your app online so Stripe can reach it.

TwilioText customers a receipt or a reminder.

Secrets and API keysWhere your keys are kept.