DevRocket
Features

Stripe Integration

This guide provides step-by-step instructions to configure Stripe for handling payments and subscriptions in a NestJS + Angular project. Stripe is a robust payment gateway, making it ideal for managing one-time payments and recurring subscriptions.

Features

Stripe

Stripe enables features such as:

  • One-time payments
  • Recurring subscriptions
  • Customer portal for billing management

Setup Instructions

1. Create a Stripe Account

  1. Register a new account at Stripe.
  2. Complete the payment activation process (e.g., verify your business details).

2. Configure Your Stripe Account

  1. Go to SettingsPublic Details:
    • Add your website URL.
  2. Go to SettingsBranding:
    • Add your logo and primary colors for a consistent checkout experience.
  3. Go to SettingsCustomer Emails:
    • Enable emails for successful payments and refunds.
  4. Go to SettingsCustomer Portal:
    • Enable the customer portal to allow users to manage their subscriptions.

3. Enable Fraud Prevention Rules

  1. In the search bar, type Rules, then go to Fraud Prevention > Rules.
  2. Ensure the following are enabled:
    • The first 3DS rule for strong customer authentication.
    • The second rule (recommended) to block payments if the CVC check fails.

4. Turn On Test Mode

  1. In your Stripe dashboard, toggle Test Mode.
  2. Create test products and plans.

5. Add Stripe Keys to Your Project

  1. Go to DevelopersAPI Keys:
    • Copy the Publishable Key and Secret Key.
  2. Add them to your environment variables:
    STRIPE_SECRET_KEY=your-secret-key
    STRIPE_PUBLIC_KEY=your-publishable-key
    

6. Enable Stripe Module in NestJS

To integrate Stripe functionality, ensure the StripeModule is properly enabled in your app.module.ts file. Uncomment the following line to import the module:

// import { StripeModule } from './stripe/stripe.module'; // Uncomment this line to enable the Stripe module

Then, uncomment and register the StripeModule in the imports array:

// imports: [StripeModule], // Uncomment this line to enable the Stripe module

This configuration activates payment functionality, allowing your application to process payments and manage subscriptions through Stripe. Ensure the environment variables for Stripe are set correctly in your .env file.


7. Set Up a Webhook for Local Development (Optional)

  1. Install the Stripe CLI and log in:
    stripe login
  2. Forward webhooks to your local API endpoint:
    stripe listen --forward-to localhost:3000/stripe/webhook
  3. Copy the webhook signing secret and add it to your environment variables:
    STRIPE_WEBHOOK_SECRET=your-webhook-secret
    

Going to Production?

  1. Turn Off Test Mode:
    • In the Stripe dashboard, disable Test Mode and switch to live keys.
  2. Update Your Keys:
    • Replace STRIPE_SECRET_KEY and STRIPE_PUBLIC_KEY with live keys in your production environment.
  3. Set Up Webhooks:
    • Go to DevelopersWebhooksAdd Endpoint.
    • Add your production endpoint (e.g., https://your-domain.com/api/stripe/webhook).
    • Select events such as checkout.session.completed.
    • Copy the signing secret and update STRIPE_WEBHOOK_SECRET in your production environment.
  4. Optional: Enable payout schedules in BalanceManage Payouts.
  5. Optional: Enable emails for successful payments and refunds in SettingsCustomer Emails.

Using Stripe

1. Creating a Checkout Session

Use the /stripe/create/checkout endpoint to initiate a checkout session. The endpoint:

  • Validates the request (e.g., priceId, mode, and URLs).
  • Associates the session with the user for tracking.
  • Returns a Stripe Checkout URL for redirection.

On the frontend, you can use the Angular StripeService to call this endpoint and redirect users to Stripe Checkout.


2. Handling Webhooks

Your application is pre-configured to listen to Stripe webhooks for subscription lifecycle management. Key events handled include:

  • checkout.session.completed: Grants product access after a successful subscription or payment.
  • customer.subscription.deleted: Revokes access when a subscription ends.
  • invoice.paid: Re-grants access after recurring payment success.
  • invoice.payment_failed: Logs and optionally revokes access.

This ensures the user's access is always in sync with their subscription status.


3. Customer Portal [TODO]

4. Frontend Integration

The Angular StripeService simplifies frontend integration. Key methods include:

  • createCheckoutSession: Calls the backend to create a checkout session.
  • redirectToCheckout: Redirects users to Stripe Checkout.

Example usage:

this.stripeService.createCheckoutSession(priceId, mode, successUrl, cancelUrl)
  .subscribe(({ url }) => window.location.href = url);

With this setup, your NestJS + Angular application is ready to handle payments and subscriptions using Stripe. Make sure to test thoroughly in Test Mode before going live.

Notes

  • Test thoroughly in Test Mode before switching to live keys.
  • Use HTTPS in production to secure API calls.
  • Monitor and log webhook events to handle any errors gracefully.

Ready for production? Review the Stripe documentation for further optimization and security best practices.