Buy Pro
Docs
Payments

Payments

Charge customers via subscriptions.

Stripe

Stripe is a popular online payment processing platform that enables businesses to accept and manage digital payments securely through its robust set of APIs and tools. The payment system for the solution is managed using Stripe billing with webhooks. This allows users to manage their subscriptions and view invoices through the settings billing section.

To set up Stripe for your application, follow these steps:

  1. Configure Stripe

    • Sign in to your Stripe account.
    • Navigate to the API keys section under Developers.
    • Generate and securely store your Publishable key and Secret key.

  2. Enable Customer Billing Portal

    • In the Stripe Dashboard, go to Billing > Customer portal.
    • Click Enable customer portal. This allows your customers to manage their subscriptions, payment methods, and view invoices.

  3. Create a Product

    • Under Products, click + Add product.
    • Fill in the necessary details (name, description, etc.) and set up the pricing.
    • Save the product to generate a Product ID and a Price ID.

  4. Update Environment Variables

    In your project, open the .env file and add the following entries with the respective values from your Stripe Dashboard:

    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
PRO_PRODUCT_ID=
PRO_PRODUCT_PRICE_ID=

Webhooks

Webhooks allow Stripe to communicate with your application about important events, such as invoice payments and subscription changes. There are two main approaches to working with Stripe webhooks: Stripe CLI Simulated Events and ngrok proxy.

Stripe CLI Simulated Events

This method is suitable for basic setup and testing:

  1. Install the Stripe CLI

    • Download and install the Stripe CLI for your operating system.

  2. Authenticate the Stripe CLI

stripe login

  1. Forward events to your local server

    • Use the Stripe CLI to forward webhook events to your local server:
stripe listen --forward-to localhost:<your-local-port>/api/stripe/webhook
  • For example, if your app runs on port 3000:
stripe listen --forward-to localhost:3000/api/stripe/webhook
  1. Trigger test events
    • Use the Stripe CLI to trigger test webhook events:
stripe trigger <event>
  • For example, to simulate a completed checkout:
stripe trigger checkout.session.completed

The Stripe CLI method for simulated events is quick and easy to set up, making it good for initial testing. However, its main drawback is that it doesn't test the app in a fully integrated environment.

Using ngrok with Stripe Webhooks

This approach allows for more realistic testing:

  1. Install ngrok:

    • Visit ngrok and sign up for an account.
    • Download and install ngrok for your operating system.

  2. Start your local server:

    • Ensure your application is running locally, typically on port 3000 or 8000.

  3. Start ngrok:

    • Open a terminal and run:
ngrok http <your-local-port>
  • For example, if your app runs on port 3000:
 ngrok http 3000

  1. Copy the ngrok URL:

    • ngrok will display a public URL (e.g., https://1234abcd.ngrok.io).
    • This URL will forward to your local server.

  2. Configure Stripe webhook:

    • Go to the Stripe Dashboard.
    • Navigate to Developers > Webhooks.
    • Add a new webhook endpoint.
    • Paste your ngrok URL followed by your webhook route (e.g., https://1234abcd.ngrok.io/api/stripe/webhook).

  3. Test your webhook:

    • Trigger events in Stripe or use the Stripe CLI to send test events.
    • Monitor your local application logs to see incoming webhook events.

Note: Remember to update the webhook URL in Stripe each time you restart ngrok, as the URL changes with each session.

This method allows you to test your app's subscription flow in a more integrated and realistic manner.

Fraud Prevention

To enhance the security of your transactions and prevent fraud, follow these steps:

  1. Enable 3D Secure (3DS) Rules

    • In the Stripe Dashboard, type rules in the search box.
    • Navigate to Fraud Prevention > Rules.
    • Ensure the first 3DS rule is enabled. This requires 3D Secure authentication for payments, adding an extra layer of security.
    • It is recommended to also enable the second 3DS rule for additional protection.

  2. Block Payments if CVC Fails

    • Make sure to block payments if the Card Verification Code (CVC) fails. This helps in preventing fraudulent transactions from being processed.

Production

When you are ready to move to production, make sure to turn off Test Mode and update your environment variables accordingly.

  1. Turn OFF Test Mode in your Stripe Dashboard

    • In your Stripe Dashboard, switch to live mode.

  2. Update Keys

    • In the Developers section, copy your live Publishable key and Secret key.
    • Add them to your production environment variables:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=

  1. Configure Webhook Endpoint

    • In the Developers section, navigate to Webhooks.
    • Click Add Endpoint and set your domain followed by /api/webhook/stripe.
    • Select the checkout.session.completed event (or other events as needed).
    • Copy the signing secret and add it to your production environment variables:
STRIPE_WEBHOOK_SECRET=

  1. Optional: Manage Payouts

    • In the Balance section, go to Manage Payouts.
    • Set a specific date of the month to receive your payouts (e.g., the 10th of each month).

  2. Optional: Activate Customer Emails

    • In the Settings section, go to Customer Emails.
    • Activate emails for successful payments and refunds.
AuthenticationEmails