How are you selling? Webify Edition

It was about time to put this together.

Selling websites 1 by 1 can be good for starters.

Even before that, you have this kind of journey:

1. S**k at something
2. Do it for free
3. Repeat n times
4. Get better
5. Start $
6. Swap free for $

As demand can grow when you get better at something, you will need to increase the supply.

As your time is limited, you will want to scale the ideas with tech:

Via LogTo Authentication plugged into a Flask WebApp called… Webifyer or…WebifAI or…WebGenerAItor…

WebGenerAItor

Source Code on GH | Tinkering with CloudflareDNS and Traefik v3_3 to serve websites

WebifAi / WebifAIyer

Source Code on Github to package and sale SSG Themes

And shame on me, I have not been tinkering with Stripe since last year with the CV project as per these tests.

What we will be covering on this post:

1. How to setup Stripe integration to sell like a Pro
2. Recap on how to authenticate users into your Flask Apps
3. Using Flask as a simple CMS for Astro Themes
4. Configure subdomains for Cloudflare as per Flask

Stripe

Because you wont to bill people. Probably.

Others are doing stripe stuff already: https://sabandijers.club/cvv/

• You can login https://dashboard.stripe.com/login
• Set your accepted payment methods: https://dashboard.stripe.com/test/settings/payment_methods/
• And create a product / subscription

You can create payment links with stripe, like this: https://buy.stripe.com/6oEg2n1pu15j9UcbII or this on test mode https://buy.stripe.com/test_00g3d29cj0IM9l68ww

I liked the stripe integrations with cal.com or zapier.

But you can use those to put the links into your app And embedd them into your flask app

Go to stripe developer section: https://dashboard.stripe.com/workbench/overview

You can add a custom domain to stripe via these instructions and paying the monthly subscriptionfor 10$/month

The stripe docs are great and have a lot of resources for dev, like the workbench:

• https://dashboard.stripe.com/test/apikeys
• https://docs.stripe.com/testing

You might want to get started with payment links. Like this one https://buy.stripe.com/test_14A3cvfV98LE2X6dLA4ko01

You can add coupons/promo codes to certain products/subs, as per https://docs.stripe.com/billing/subscriptions/coupons

We have the Stripe Python SDK: https://pypi.org/project/stripe/ that allow to embed payment into our Flask app, provided the

STRIPE_SECRET_KEY=
STRIPE_PUBLISHABLE_KEY=
STRIPE_PRODUCT_ID=

You can even pass few parameters to the buy button (like the email) so that its prefilled as per the logged in / auth customer

Which can also be embedded into Flask (option below). Just hit the Buy button next to the link to get the code and vibe-code it.

With the payment link embedded,the user will be redirected to a new tab for payment with a buy.stripe.com domain

To enable WebHooks with Stripe

• https://docs.stripe.com/cli/login
• https://docs.stripe.com/stripe-cli?install-method=linux

#https://github.com/stripe/stripe-cli/releases/tag/v1.27.0
wget https://github.com/stripe/stripe-cli/releases/download/v1.27.0/stripe_1.27.0_linux_amd64.deb
sudo dpkg -i stripe_1.27.0_linux_amd64.deb

stripe login
stripe listen --forward-to localhost:5006/webhook

#python3 app-v4.1.py

Once that its done, you can vibe code again to have real time updates for the logged in user:

Stripe x Logto

I have been recently playing with LogTo and Flask on this repo folder

Where I could get proper sing up/in and user email information via LogTo as per:

python3 ./Logto/logto-sample-v2.py

So now just do:

uv venv
source .venv/bin/activate

uv pip install -r requirements.txt

uv run ./LogTo-Stripe/logto-stripe-app-v5.py
#stripe listen --forward-to localhost:5088/webhook #The Stripe CLI (used for local development) is not needed in production. In production, Stripe will POST directly to your server’s public /webhook endpoint.

Dont forget to add the after payment behaviour into your stripe payment link, so that it gets redirected to http://192.168.1.6:5088

Thanks to the cookies, that new tab will be already logged into and authenticated per LogTo to the flask admin panel, showing that you have got the service

If you have done everything properly, you can get this kind of user journey in production, with https and no paid tiers as of the time of writting

If you want the google signin/up, you will need a Logto Subscription as seen here

Which is the result of:

git clone https://github.com/JAlcocerT/WebifAI
docker build -t webifai:latest .

# docker run --env-file .env.prod -p 5088:5088 \
#   -v $(pwd)/payments.db:/app/payments.db \
#   --network cloudflared_tunnel \
#   --name webifai webifai:latest
ping webify.jalcocertech.com

Flask x SSG Themes

How about making the user select the desired theme for its website.

Astro Themes

We can do this potentially for any SSG.

Like for a HUGO theme, like Lynx and your Portfolio:

docker run -d \
  --name hugo \
  -p 1313:1313 \
  -v /home/jalcocert/Desktop/IT/Code2Prompt-Test/WebGenerAItor/Portfolio/:/src \
  --network proxy \
  klakegg/hugo:0.101.0 \
  server --bind 0.0.0.0 --port 1313

Then you can plug NGINX to serve the static files and provide HTTPs via Traefik programatically, via this kind of docker compose

The part of building, serving, adding https…is very clear.

Even updating DNS via Cloudflare API: https://github.com/JAlcocerT/WebGenerAItor/tree/main/Cloudflare_DNS

And calling that CF API via Flask: https://github.com/JAlcocerT/Streamlit_PoC/blob/main/flask_dnsupdater.py

But how about editing the themes?

Or just…adding new content at least?

Astro Theme 101 for Webifyer

For a psycology centered portfolio | Post

Astro Theme x Webifyer Sample

Source Code on Github of a sample first 10 websites to combine with Webifyer

So I put these one inside the repo folder: ./Astro-Themes

git clone https://github.com/JAlcocerT/morita-web #npm create astro@latest -- --template portfolio

cd ./Astro-Themes/morita-web
rm -r .git

Choosing a Domain

In this case it will be a subdomain.

And we will be needing from Cloudflare:

CLOUDFLARE_API = 'https://api.cloudflare.com/client/v4'
CLOUDFLARE_API_TOKEN = os.getenv('CLOUDFLARE_API_TOKEN')
CLOUDFLARE_ZONE_ID = os.getenv('CLOUDFLARE_ZONE_ID')
DOMAIN = os.getenv('CLOUDFLARE_DOMAIN')  # e.g., jalcocertech.com

Automatic DNS Setup

So how about choosing that subdomain, and getting it configured on the backend to point properly?

Conclusions

This was quite a ride.

You have learn how to:

1. Get Flask working with Logto https://authentication.jalcocertech.com/ or https://oxa37q.logto.app/sign-in

The flows assume the you want to login and give the signup as option (like most apps do)

LogTo 101

Using Logto with Flask WebApp | Post

2. Get Stripe API working inside the flask App with a DB and webhooks for updates

OpenAI or Windsurf are also using stripe to charge you

Normally you have a billing section in the web app that redirects to the logged in user to its stripe related info on subscriptions

Example: https://billing.stripe.com/p/session/live_YWNjdF8xTlJsomethingmorehere

3. Concurrency for Flask apps is better via Gunicorn and it can be included in the Dockerfiles like:

#CMD python3 logto-stripe-app-v5prod.py
CMD ["gunicorn", "logto-stripe-app-v5prod:app", "-b", "0.0.0.0:5088"]

It is designed to efficiently serve your app to many users at once, with support for multiple worker processes and better handling of concurrent requests than Flask’s built-in server.

4. Plugging Umami to the full Flask Routes and in-App Formbricks

Adding Umami Web Analytics to Flask

• https://github.com/ImShyMike/Flask-Umami
• https://pypi.org/project/Flask-Umami/

Add your new website to Umami: with domain without http/s like: flask.jalcocertech.com

Ive put that together into the ./Z_Tests/Umami folder of the repo.

uv run python flask-umami-101.py 

Got happily surprised to see it working also on the local network (as well as via https with CF tunnels)

Adding Formbricks to Flask

So if you have created Formbricks links, like this one: https://app.formbricks.com/s/cmc6gnjc1bx06xg01xizn1g1y

You know you can embedd them:

But it will work better if you select the webapp category (embedded into the product):

And then: https://formbricks.com/docs/xm-and-surveys/surveys/website-app-surveys/quickstart

Like this one: https://app.formbricks.com/s/cmcg5qxve55q0ww01wqc2jdo7

The result of that formbricks html embed can look like so (and its also great on phone):

uv run python ./Z_Tests/Formbricks/flask-umami-formbricks-v3.py #working v3 with formbricks embedded via html and also umami

You will need to get the environment_id from Formbricks UI.

Just mind the difference of link vs app: for Flask, the app version + html embedd was my go to

T&C and Privacy

Never forget to add such records into your SaaS

You can use the static routes so that any user registering, will have to accept that agree with these conditions as per LogTo.

OG for Flask

Add Open Graph meta tags to your HTMLon the landing page:

<meta property="og:title" content="WebifAI: The Website you deserve is just 1 min ahead of you">
<meta property="og:description" content="A blueprint Flask WebApp to authenticate via Logto and Sell via Stripe.">
<meta property="og:image" content="https://yourdomain.com/static/Gemini_Generated.jpeg">
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourdomain.com/">

Replace https://yourdomain.com/ with your actual domain!

FAQ

Flask Container

Stripe x InvoiceNinja

• https://hub.docker.com/r/invoiceninja/invoiceninja/
• https://invoiceninja.com/
• https://invoiceninja.github.io/en/getting-started/

Which has stripe and BTCPay integration https://invoiceninja.com/payments/

• https://github.com/btcpayserver/btcpayserver

MIT | Accept Bitcoin payments. Free, open-source & self-hosted, Bitcoin payment processor.

EE id x Ubuntu

If you are into entrepreneuring and sell digital stuff, you might be interested in: https://www.id.ee/en/article/ubuntu-id-software-installation-updating-and-removal/#removing-mozilla-firefox

• https://www.id.ee/en/article/operating-systems-supported-by-id-software/

#wget https://installer.id.ee/media/install-scripts/install-open-eid.sh
nano install-open-eid.sh 
#sh install-open-eid.sh