Payments
Video coming soon
The payments video is on the way. In the meantime, this lesson covers the live way to take payments in HeroMate today.
Integrate payments so your application can charge customers. The live path uses the generic Stripe workflow node with your own Stripe keys (BYOK), so all charging logic runs server-side and your secrets stay out of the frontend.
The live path: Stripe node + BYOK credentials
Add your Stripe credentials
In your project, go to Studio → Settings → Advanced settings → Manual service credentials and create a Stripe credential with your Stripe secret key. To verify incoming events, also add a Stripe Webhook credential with your webhook signing secret. These are stored encrypted (Fernet, per-project) and decrypted only at execution time — never exposed to the browser.
Build a payment endpoint
In Build → API, create an endpoint and add the Stripe node to its workflow (for example, to create a Checkout Session or a PaymentIntent). The node uses the Stripe credential you added; it runs on the server, so the secret key never reaches the client.
Handle the webhook
Create a second endpoint with a Webhook trigger so Stripe can notify you when a payment succeeds. Verify the event signature using the Stripe Webhook credential, then update your database (mark the order paid, unlock a feature, etc.).
Test before going live
Use Stripe test mode keys and a test card to run the full flow end to end before switching to live keys.
Keep secrets server-side
Never put your Stripe secret key in a Frontend (Build) variable — those are baked into the client bundle. Charging logic belongs in an endpoint using the Stripe credential. For other runtime secrets, use Backend Secrets (Ship → Frontend → Variables), referenced as ctx.secrets.X.
HeroMate Payments
When enabled for your environment, open Studio → Payments. Select Test, your business country, and Connect Stripe. An organization administrator on a paid plan can complete verification and manage payments and payouts inside HeroMate.
The Overview tab shows net revenue, active subscriptions and a chart for the last 7, 30 or 90 days. Net revenue uses Stripe ledger entries including actual fees and adjustments; it is not the available payout balance. Currencies are shown separately and dates use UTC.
Under Transactions, view payments or subscriptions. Under Adjustments, view refunds, disputes and credit notes. Lists are paginated. Stripe account opens account setup and embedded payment, refund and payout management.
The preparation checklist checks account readiness, products and a confirmed paid Checkout. Creating an offer, testing a purchase and Customer portal → Add to my app prepare an assistant request: review and send the draft to implement the change. The buyer portal must open in a new tab and resolve customer ownership from the authenticated user on the server.
Choose HeroMate Connect and the environment in the Stripe node. Create customers, products, prices and Checkout Sessions for one-time or subscription payments without entering Stripe keys. Mutating operations require a stable idempotency key, such as your order ID. Prices must belong to the connected account in that environment.
To receive events in a published Flow, use .webhook({ provider: "stripe", event: "invoice.paid", verify: { mode: "stripe", credential: "dypai-stripe-connect-test" } }). Connecting the account creates this credential. Use dypai-stripe-connect-live for production. Test the full payment journey and update your order only after confirming payment through the appropriate event.
Test and live accounts are independent. Previews reject managed live operations. The card shows payments, payouts and failed events, with options to verify the connection and retry. Explicit Stripe keys remain available for other native Stripe node operations.
What you'll learn
- Adding Stripe and Stripe Webhook credentials under Credentials
- Charging from a server-side endpoint with the Stripe node
- Verifying webhooks and keeping secrets out of the frontend
- Testing in Stripe test mode before going live
Done
You’ve completed the Building your first app track. Return to the tutorials overview or explore the rest of the docs.