Skip to main content

Stripe

Use Stripe for checkout pages, subscriptions, one-time payments, invoices, customer portals, and payment status dashboards.

Example app: ecommerce checkout​

Build a full-stack ecommerce app with Stripe payments.
The frontend has product listings, a cart, checkout, and order confirmation.
The backend creates Stripe Payment Intents, stores orders, and handles webhooks.
Use PostgreSQL for products, carts, orders, and payment status.
Keep secret keys on the server and show clear payment errors.

Decide the payment model​

Before prompting Cocoding AI, decide:

  • One-time payment or subscription.
  • Product names and prices.
  • Currency.
  • Trial period, discount, or coupon behavior.
  • Success and cancel pages.
  • Webhook events the app should handle.
Example checkout page generated for a Stripe payment flow
A payment feature normally includes a public offer page, secure checkout, and post-payment status handling.
STRIPE_SECRET_KEY=
STRIPE_PUBLISHABLE_KEY=
STRIPE_WEBHOOK_SECRET=
STRIPE_PRICE_ID_PRO=

Use test mode while building. Store secret keys server-side only. The publishable key can be used in browser code when needed, but the secret key and webhook secret must never be sent to the client.

Prompt Cocoding AI​

Add Stripe checkout for the Pro plan.
Use STRIPE_SECRET_KEY and STRIPE_PRICE_ID_PRO on the server.
Use STRIPE_WEBHOOK_SECRET to verify webhook events.
Create success and cancel pages.
Update the user subscription status after checkout.session.completed.

Test payments​

  1. Use Stripe test mode.
  2. Create products and prices in Stripe.
  3. Store test credentials in the runtime configuration.
  4. Start checkout from the Cocoding AI preview.
  5. Complete payment with Stripe test card data.
  6. Confirm the app updates subscription or purchase state.
  7. Trigger webhook test events from Stripe and verify logs.
Generated Stripe payment success screen
A complete Stripe flow should end with a clear success screen and order state update.

Webhook setup​

Use webhooks when the database must reflect Stripe's final payment state.

  1. Add a backend route such as /api/webhooks/stripe.
  2. Verify the webhook signature with STRIPE_WEBHOOK_SECRET.
  3. Handle events such as payment_intent.succeeded, checkout.session.completed, or subscription updates.
  4. Update the local order or subscription record after verification.
  5. Log failed webhook verification without exposing secrets.

For local testing, Stripe CLI can forward events to the generated backend. Keep the webhook signing secret in environment configuration.

Payment status model​

Ask Cocoding AI to store clear states such as:

  • pending
  • requires_action
  • paid
  • failed
  • refunded
  • cancelled

Troubleshooting​

SymptomLikely causeWhat to check
Checkout will not startMissing price ID or secret keyConfirm server-side variables are present.
Payment completes but app does not updateWebhook not configuredCheck webhook URL and signing secret.
Secret key appears in client codeUnsafe implementationAsk Cocoding AI to move Stripe calls to backend routes.
Currency or amount is wrongPrice ID mismatchConfirm the product and price used by the app.