Accept payments with Stripe

This recipe takes you from nothing to a working checkout: a pricing page in your app, a real Stripe payment behind it, and the confirmation flow after. It is the most-requested connector feature, and the whole thing is about fifteen minutes.

What you are building

Your app shows products or plans, the buyer clicks to pay, Stripe's hosted checkout page opens, and after payment they land back in your app on a confirmation screen. The payment itself happens entirely on Stripe's page, which is why your app never touches card numbers and why there is nothing payment-related for you to secure.

Before you start

• A Stripe account (stripe.com, free to create).
• A paid Vaulter plan. Connectors are a paid feature: Starter includes 3, Pro and Teams are unlimited. See Plans and pricing.
• Your Stripe secret key, from dashboard.stripe.com/apikeys. Start with the test mode key (it begins with sk_test_), so everything below runs on Stripe's test rails with fake money until you are ready.

The walkthrough

1. Create your products in Stripe

   In the Stripe dashboard, create the products and prices you want to sell (Products → Add product). Doing this in Stripe rather than describing prices in chat means the agent can pull the real catalog, with the real price IDs, and your app can never drift from what Stripe actually charges.

2. Connect Stripe in Vaulter

   Open Vault → Connectors, pick Stripe, and paste your secret key into the secure form. The key goes into Vaulter's connection layer, not your project files; the agent can see that Stripe is connected but never the key itself.

3. Ask for the feature

   Describe the outcome in chat, for example:

   Add a pricing page with my Stripe products. Each one has a Buy button that starts a Stripe checkout, and after paying the buyer comes back to a thank-you page that confirms the purchase.

   The agent reads your real products and prices from your Stripe account and builds the page from them, wired to checkout. If you skipped step 2, it will pause and put a Connect button in the chat instead.

4. Test the purchase in the preview

   Click a Buy button in the preview. Stripe's checkout opens in a new tab (hosted pages refuse to load inside the preview frame, so a new tab is correct behavior). Pay with Stripe's standard test card: number 4242 4242 4242 4242, any future expiry, any CVC. You should land back in your app on the confirmation screen, and the payment appears in your Stripe dashboard's test mode.

5. Publish, then switch to live keys

   When the flow works, publish. To take real money, swap the connection to your live key: reconnect Stripe in Vault → Connectors with the key that begins with sk_live_. Run one real small purchase yourself as the final check.

How it works underneath

Worth thirty seconds, because it explains the boundaries you will run into:

• Your app holds no keys. Every Stripe call goes through Vaulter's secure proxy, which adds your credential server-side. Nothing sensitive is in the code or the published bundle.
• The proxy allows storefront operations only: creating checkout sessions, reading products and prices, customers, subscriptions. Refunds, payouts, and account management are always blocked through the app, deliberately; you do those in the Stripe dashboard, where they belong.
• Buyers sign in before they pay. On the published app, connector calls run with the buyer's own signed-in identity. In practice a buyer creates an account (or signs in) before checkout, which is also what lets your app attach the purchase to a customer and show them their orders later.
• Payments land in your Stripe account, on your Stripe rails, with Stripe's own fees. Vaulter is not in the money path.

Subscriptions

The same recipe covers recurring billing: create recurring prices in Stripe, and ask for it in those terms ("three plans, monthly and yearly, subscribe buttons"). Checkout runs in subscription mode, and the buyer manages the result as a normal Stripe subscription. Ask the agent to show a "current plan" state by reading the buyer's subscription.

Guardrails you control

If your app's visitors spend on your Stripe connection, you can put a ceiling on it: an owner spend quota limits how many connector calls the published app may make on your credential per 30 days, hard-stopping when it is reached. Set it from the connector's settings. There is also a built-in rate limit (60 calls per minute) protecting every connector.

Frequently asked

Do I need to write any Stripe code?

No. You describe the outcome; the agent generates the pages and the checkout wiring. You can read the generated code any time.

Why does checkout open in a new tab?

Stripe's hosted page declines to render inside another page's frame, which is a security feature, not a bug. In the preview and the published app alike, checkout opens in its own tab and returns to your app when done.

The Buy button does nothing, or the checkout fails

First check the connector shows Connected in Vault → Connectors. Then check you created prices (not just products) in Stripe, and that you are testing with the test key and the test card together; a live key with a test card, or the reverse, fails. If it still fails, tell the agent exactly where the flow stops.

Can buyers pay without creating an account?

On the published app, checkout runs with the buyer signed in, so the practical flow is account first, payment second. That is also what makes "my orders" possible afterward.

How do I issue a refund?

In the Stripe dashboard. Refunds are deliberately not possible through your app, so a bug or a bad actor in the app can never move money backward.

Does Vaulter take a cut of my sales?

No. The payment goes from your buyer to your Stripe account directly. You pay Stripe's normal processing fees and nothing to Vaulter beyond your plan.