One of the most important things of your SaaS is to create a payment gateway. In this small tutorial, we show, how you can monetize your work in minutes.

Before we start:
Think about, which payment you want to offer. Are you planning with onetime payments, monthly or anualy payments? How high are your prices? Which features do you like to sell?
After these thoughts are done, we are ready to integrate Stripe.

Setup

Go to https://stripe.com and create a account. This is easy and costs only a few minutes. After a successful registration, you are able to generate a SecretKey. Copy this key and paste it inside your .env

STRIPE_SECRET_KEY=[PASTE_HERE]
STRIPE_WEBHOOK_SECRET=
STRIPE_PRO_PRICE_ID=hhh

In our next step we have to create products. Move to Stripe Dashboard again and move to “Product catalogue”. Creation of products is very simple and easy. Just follow steps on stripe. You can create as much products you like. But don’t forget, if a user has to many prices to choose it makes it quite heavier to sell one of them.

Now we have to give our users a chance to click a link to go to our payment page.

Copy following code and put it inside your landing page at: /app/static/landing/index.html

<div class="mt-8 flex flex-col items-center gap-3">
    <div id="plansStatus" class="text-base-content/70 text-sm">Loading plans...</div>
    <div id="plansContainer" class="flex flex-wrap justify-center gap-3"></div>
    <div id="checkoutAlert" role="alert" style="display: none; max-width: 420px">
        <span id="checkoutAlertText" class="text-sm"></span>
    </div>
</div>

This code reads your previos created products directly from stripe. If one button is clicked, you have to login/register and do payment.