Here’s a rewritten version of the article that maintains the original meaning and structure while improving clarity and flow:

—

How to Integrate Stripe Payments with Hostinger Horizons

📅 April 15, 2025
✍️ By Ariffud M.

Stripe is a powerful platform that enables secure online payments and subscription management. If you’ve created a web app using Hostinger Horizons and want to monetize it—whether through memberships, premium content, or recurring billing—Stripe offers a seamless solution.

This guide will walk you through the process of integrating Stripe into your Horizons project. By the end, you’ll be able to connect your Stripe account, create subscription products, and start accepting payments from users.

—

Why Use Stripe with Hostinger Horizons?

Integrating Stripe with Hostinger Horizons allows you to accept payments securely without writing backend code. You can:

– Offer subscription plans
– Handle recurring billing
– Provide a smooth checkout experience

With Horizons managing the front end and Stripe processing payments, you’ll have a complete, scalable setup for monetizing your web app.

—

Step-by-Step: Setting Up Stripe Payments

Before you begin, make sure your web app is connected to a custom domain. This improves accessibility and builds user trust.

We’ll demonstrate a recurring subscription model similar to Netflix, where users pay monthly to access premium content. You can also adapt this guide for one-time purchases or donations.

—

1. Create a Stripe Account

1. Visit the Stripe registration page and sign up.
2. Fill in your email, password, and business details.
3. Confirm your email to activate your account.

—

2. Enable Client-Only Integration

Client-only integration is ideal for no-code platforms like Horizons.

1. In your Stripe dashboard, go to Settings → Payments.
2. Under Checkout and Payment Links, scroll down and activate Client-only integration.
3. Confirm by clicking Allow.

—

3. Set Up a Subscription Product

1. Navigate to Product Catalog and click Create Product.
2. Fill in:
– Name: e.g., “Premium Content Access”
– Pricing Model: Recurring
– Amount: e.g., $9.99
– Billing Period: Monthly
3. Save the product and copy the Price ID from the pricing options.

—

4. Get Your Publishable Key

1. In the Stripe dashboard, go to Developers → API Keys.
2. Find your Publishable key under Standard keys (starts with pk_test_ in test mode).
3. Copy this key for use in Horizons.

—

5. Add Stripe to Your Web App

1. Log in to your Hostinger hPanel.
2. Go to Websites → Website List → Edit Web App.
3. Paste your Price ID and Publishable Key into the AI prompt box with a message like:

I want to integrate Stripe into my web app for premium content access. Here are my Stripe credentials:

– Price ID: [your_price_id]
– Publishable Key: [your_publishable_key]

4. Let Horizons process and apply the integration.

—

6. Add Access Control Logic

To protect premium content:

– Require sign-in before access.
– Show a “Subscribe to Access” button that redirects to Stripe Checkout.
– After payment, redirect users to the content.
– If they cancel, return them to the previous page without access.

Prompt example:

Please add logic so that when users click on premium content, they must sign in. After signing in, show a "Subscribe to Access" button that opens Stripe Checkout. Once payment is successful, redirect them back to the content page.

—

7. Test the Integration

You must publish your app to test Stripe payments (preview mode won’t work due to iframe restrictions).

1. Click Publish in your project dashboard.
2. Visit your custom domain and try subscribing.
3. Use Stripe’s test card: 4242 4242 4242 4242 with any valid future date and CVC.

After a successful test payment:

– The button changes to “Read Now”
– A “Premium Access Active” badge appears

—

8. Go Live with Stripe

Once testing is complete:

1. In Stripe, click Get your live account and complete the onboarding process.
2. Under Settings → Payments → Client-only integration, whitelist your domain.
3. Create a live product and copy the live Price ID and Publishable Key.
4. Use this prompt in Horizons: