{"id":5600,"date":"2025-09-03T12:24:24","date_gmt":"2025-09-03T12:24:24","guid":{"rendered":"https:\/\/www.hostinger.com\/support\/?p=5600"},"modified":"2026-03-24T05:01:10","modified_gmt":"2026-03-24T05:01:10","slug":"hostinger-horizons-how-to-sell-subscriptions-with-stripe","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/hostinger-horizons-how-to-sell-subscriptions-with-stripe\/","title":{"rendered":"Hostinger Horizons: How to sell subscriptions with Stripe"},"content":{"rendered":"<p>We recommend using Stripe if you want to sell subscriptions. You can also connect other third-party tools, but this guide focuses on Stripe.<\/p><p>If you want to sell physical or digital products, we recommend using our built-in <a href=\"https:\/\/www.hostinger.com\/support\/12038921-hostinger-horizons-integration-with-online-store\/\">online store integration<\/a>.<\/p><p>&nbsp;<\/p><h2 id=\"h-step-1-connect-your-domain\">Step 1: Connect your domain<\/h2><p>You&rsquo;ll need to have a custom domain connected to your project when creating a Stripe account, so connect it before continuing.<\/p><ol>\n<li>Click <strong>Publish<\/strong> in the top-right corner.<\/li>\n<li>When you see the &ldquo;Project published&rdquo; message, click <strong>Get domain<\/strong>.<\/li>\n<li>Choose an existing domain or buy a new one.<\/li>\n<\/ol><h2 id=\"h-step-2-set-up-the-database-for-your-project\"><b>Step 2: Set up the database for your project<\/b><\/h2><p><span style=\"font-weight: 400\">Hostinger Horizons includes an integrated database that you can access directly from the editor using the <\/span><b>Data<\/b><span style=\"font-weight: 400\"> button. Your data dashboard will appear once you ask Horizons to add features that require data collection (e.g., user accounts or contact forms).<\/span><\/p><p><span style=\"font-weight: 400\">You don&rsquo;t need to connect any external services &ndash; simply describe what you need, and Horizons AI will set up the necessary database collections for you.<\/span><\/p><blockquote><p><em><b>Message examples:<\/b><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Add user accounts to my project.<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Add a page with a contact form that has name, email, and message fields.<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Add a booking page with name, email, date, and time picker.<\/span><\/em><\/p><\/blockquote><p><span style=\"font-weight: 400\">You can also manage your data manually through the <\/span><b>Data<\/b><span style=\"font-weight: 400\"> button in the editor. To view and manage live user data, you&rsquo;ll need to publish your website first.<\/span><\/p><h2 id=\"h-step-3-add-sign-up-log-in-functionality-to-your-project\">Step 3: Add sign up \/ log in functionality to your project<\/h2><p><span style=\"font-weight: 400\">With subscriptions, you&rsquo;ll most likely also need to add user account creation functionality so the subscriptions you sell are connected to user accounts. We recommend adding sign-up \/ log-in functionality before connecting to Stripe.<\/span><\/p><blockquote><p><em><b>Message example:<\/b><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Add sign-up and login flows to my project with secure authentication.<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">If you have already added it, you can ask AI to verify it&rsquo;s properly set up.<\/span><\/em><\/p>\n<p><em><b>Message example:<\/b><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Check if sign-up and login flows are fully and securely integrated with the database. I plan to use Stripe for subscriptions, so ensure user accounts are properly managed.<\/span><\/em><\/p><\/blockquote><h2 id=\"h-step-4-set-up-your-stripe-account-subscription\">Step 4: Set up your Stripe account &amp; subscription<\/h2><p>First, you&rsquo;ll need to create your Stripe account (or log in if you already have one) and set up the subscription product that you want to sell.<\/p><ol>\n<li><strong>Create a Stripe account:<\/strong> If you haven&rsquo;t already, <a href=\"https:\/\/dashboard.stripe.com\/register\" target=\"_blank\" rel=\"noopener\">sign up for a Stripe account<\/a>.\n<ul>\n<li>Once you create an account, you&rsquo;ll be redirected to Stripe Sandbox mode. This mode allows you to test Stripe integration before fully connecting it.<\/li>\n<li>If you don&rsquo;t have much experience with tools like Stripe, we recommend fully setting up your Stripe account from the start. To do that, press the &ldquo;Switch to live account&rdquo; button in the top-right corner and continue creating your live Stripe account.<\/li>\n<\/ul>\n<\/li>\n<li><strong data-renderer-mark=\"true\">Create subscription:<\/strong>\n<ul>\n<li>Go to the <a href=\"https:\/\/dashboard.stripe.com\/products\" target=\"_blank\" rel=\"noopener\">Product catalog<\/a> in your Stripe dashboard.<\/li>\n<li>Click <strong>+ Add a product<\/strong>.<\/li>\n<li>Give it a name (e.g., &ldquo;Pro Plan&rdquo;) and set a recurring price. For testing purposes, we recommend setting the price to 0 for now. This allows you to test the purchase flow without paying the subscription price. You can adjust the price later.<\/li>\n<li>After creating it, <strong>copy the Price ID<\/strong>. You can find it by opening your created product &rarr; click the 3-dots icon &rarr; click <strong>Copy price ID<\/strong> (it will look like <span style=\"color: #808080\"><code>price_...<\/code><\/span>). Copy and save it somewhere safe, you&rsquo;ll need this later.<\/li>\n<li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-5602\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2025\/09\/img1-300x210.png\" alt=\"\" width=\"300\" height=\"210\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2025\/09\/img1-300x210.png 300w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2025\/09\/img1-768x537.png 768w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2025\/09\/img1.png 1010w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/li>\n<\/ul>\n<\/li>\n<li><strong data-renderer-mark=\"true\">Copy Stripe API keys:<\/strong>\n<ol>\n<li>Go to the <a href=\"https:\/\/dashboard.stripe.com\/apikeys\" target=\"_blank\" rel=\"noopener\">API Keys page<\/a>.<\/li>\n<li>You will need two keys:\n<ol>\n<li><strong>Publishable key<\/strong>, which looks like <span style=\"color: #808080\"><code>pk_live_...<\/code><\/span><\/li>\n<li><strong>Secret key<\/strong>, which looks like <span style=\"color: #808080\"><code>sk_live_...<\/code><\/span>. This key is highly sensitive and shouldn&rsquo;t be shared with anyone. Save it somewhere safe once you copy it.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol><p>&nbsp;<\/p><h2 id=\"h-step-5-set-up-stripe-webhooks\">Step 5: Set up Stripe webhooks<\/h2><ul>\n<li style=\"list-style-type: none\">\n<\/ul><p>Webhooks are how Stripe communicates with your project using Supabase. They keep subscription statuses in sync (e.g., when a payment succeeds or fails).<\/p><ol>\n<li><b>Ask AI to create a webhook endpoint:<\/b><span style=\"font-weight: 400\"> Horizons uses an Express API server to handle server-side logic. You&rsquo;ll need to ask AI to create an API route that receives Stripe webhook events and updates user data in the database accordingly.<br>\n<\/span><b>Message example:<\/b> <i><span style=\"font-weight: 400\">Create an API route on the server that exposes an endpoint URL for handling Stripe webhooks. You can name it <\/span><\/i><i><span style=\"font-weight: 400\">stripe-webhook<\/span><\/i><i><span style=\"font-weight: 400\">.<\/span><\/i> <i><span style=\"font-weight: 400\">Don&rsquo;t make any other changes to the project!<\/span><\/i><\/li>\n<li><strong>Create a Webhook endpoint in Stripe:<\/strong>\n<ul>\n<li>Go to the Webhooks section in Stripe<\/li>\n<li>Click + Add destination.<\/li>\n<li>In the first step, select Your account, and in the events section, select these events (you can search for them using the search field):\n<ul>\n<li><span style=\"color: #808080\"><code>checkout.session.completed<\/code><\/span><\/li>\n<li><span style=\"color: #808080\"><code>customer.subscription.updated<\/code><\/span><\/li>\n<li><span style=\"color: #808080\"><code>customer.subscription.deleted<\/code><\/span><\/li>\n<li>Once selected, press <strong>Continue<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li>In the next step, select <strong>Webhook endpoint<\/strong> and press <strong>Continue<\/strong>.<\/li>\n<li>In the next step, fill in these fields:\n<ul>\n<li><strong>Destination name<\/strong>: enter a name like &ldquo;Supabase webhook for subscriptions&rdquo;<\/li>\n<li><strong>Endpoint URL<\/strong>: enter the URL that AI generated in Supabase. You can find it in the <a href=\"https:\/\/supabase.com\/dashboard\" target=\"_blank\" rel=\"noopener\">Supabase dashboard<\/a> &rarr; select organization and project &rarr; Edge Functions &rarr; copy the URL next to <span style=\"color: #808080\"><code>stripe-webhooks<\/code><\/span> and paste it in Stripe&rsquo;s <strong>Endpoint URL<\/strong> field.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong data-renderer-mark=\"true\">Copy webhook signing secret:<\/strong>\n<ul>\n<li>After completing the steps above, Stripe will provide a <strong>signing secret<\/strong> (it looks like <span style=\"color: #808080\"><code>whsec_...<\/code><\/span>).<\/li>\n<li>Copy and save it somewhere safe, you&rsquo;ll need this later.<\/li>\n<li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-5604\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2025\/09\/img2-300x206.png\" alt=\"\" width=\"300\" height=\"206\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2025\/09\/img2-300x206.png 300w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2025\/09\/img2.png 687w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/li>\n<\/ul>\n<\/li>\n<\/ol><p>&nbsp;<\/p><h2 id=\"h-step-6-save-stripe-keys-securely\">Step 6: <b>Save Stripe keys securely<\/b><\/h2><p><span style=\"font-weight: 400\">You&rsquo;ll need to save your Stripe secret key and webhook signing secret as environment variables so they aren&rsquo;t exposed in your project&rsquo;s frontend code. Horizons stores server-side environment variables in the API server configuration, and AI can set them up for you.<\/span><\/p><blockquote><p><em><b>Message example:<\/b><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Add the following environment variables to the API server:<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">STRIPE_SECRET_KEY<\/span><span style=\"font-weight: 400\"> = sk_live_&hellip;<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">STRIPE_WEBHOOK_SECRET<\/span><span style=\"font-weight: 400\"> = whsec_&hellip;<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Don&rsquo;t make any other changes to the project!<\/span><\/em><\/p><\/blockquote><p><span style=\"font-weight: 400\">Replace <\/span><span style=\"font-weight: 400\">sk_live_&hellip;<\/span><span style=\"font-weight: 400\"> and <\/span><span style=\"font-weight: 400\">whsec_&hellip;<\/span><span style=\"font-weight: 400\"> with your actual keys from Steps 4 and 5.<\/span><\/p><p>&nbsp;<\/p><h2 id=\"h-step-7-connect-stripe-with-your-horizons-project\">Step 7: <b>Connect Stripe with your Horizons project<\/b><\/h2><p><span style=\"font-weight: 400\">This is the final connection step. You&rsquo;ll need to ask the AI to fully and securely connect your Stripe account to the subscription you created for your Horizons project.<\/span><\/p><p><span style=\"font-weight: 400\">Use the message below as a template &mdash; make sure to replace the placeholder values before sending:<\/span><\/p><ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Stripe product price ID, which looks like <\/span><b>price_&hellip;<\/b><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Stripe publishable key, which looks like <\/span><b>pk_live_&hellip;<\/b><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Replace <\/span><b>your_domain<\/b><span style=\"font-weight: 400\"> with your Horizons project domain.<\/span><\/li>\n<\/ul><blockquote><p><em><b>Message example:<\/b><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">I want to securely integrate Stripe to sell subscriptions in my Hostinger Horizons project.<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">I have already stored my Stripe keys as environment variables on the API server:<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Secret key: <\/span><span style=\"font-weight: 400\">STRIPE_SECRET_KEY<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Webhook signing secret: <\/span><span style=\"font-weight: 400\">STRIPE_WEBHOOK_SECRET<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Step 1: Checkout session &amp; webhooks<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Create an API route on the server that handles Stripe checkout sessions. When a user starts the subscription purchase flow, securely create a Stripe Checkout session using my stored secret key and return the session URL for redirecting the user.<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">When creating the Stripe Checkout session, pass both <\/span><span style=\"font-weight: 400\">success_url<\/span><span style=\"font-weight: 400\"> and <\/span><span style=\"font-weight: 400\">cancel_url<\/span><span style=\"font-weight: 400\">. Make sure these URLs use my site&rsquo;s domain: <\/span><b>your_domain<\/b><span style=\"font-weight: 400\">.<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Create a Stripe customer and save the generated <\/span><span style=\"font-weight: 400\">stripe_customer_id<\/span><span style=\"font-weight: 400\"> to the database.<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">For any updates received from the Stripe webhook, use the <\/span><span style=\"font-weight: 400\">stripe_customer_id<\/span><span style=\"font-weight: 400\"> to find and update the correct user record in database..<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Step 2: Subscription product<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Add my Stripe subscription product to the Horizons project.<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Stripe product price ID: <\/span><b>price_&hellip;<\/b><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Stripe publishable key: <\/span><b>pk_live_&hellip;<\/b><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Add an &ldquo;Upgrade&rdquo; button in the project that triggers the subscription purchase flow.<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Ensure the subscription is fully linked to the user database.<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Only users with an active subscription can access premium features.<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Step 3: Access control<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Instantly grant users premium access after purchase.<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Ensure subscription status is checked in real-time when users log in, create an account, or try to access premium features.<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Step 4: Security &amp; correctness<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Ensure the integration is secure and does not expose secret keys to the frontend.<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400\">Handle all Stripe communication server-side via the API server.<\/span><\/em><\/p><\/blockquote><p>&nbsp;<\/p><h2 id=\"h-step-8-allow-users-to-manage-their-subscriptions\">Step 8: Allow users to manage their subscriptions<\/h2><p>Once you have a fully working subscription purchase flow, you can add Stripe&rsquo;s customer portal, allowing users to manage their subscriptions (update payment methods, view invoices, cancel, etc.).<\/p><ol>\n<li>Go to <a href=\"https:\/\/dashboard.stripe.com\/settings\/billing\/portal\" target=\"_blank\" rel=\"noopener\">Stripe Customer Portal settings<\/a>.<\/li>\n<li>Find the <strong>Launch customer portal with a link<\/strong> section.<\/li>\n<li>Click <strong>Activate link<\/strong> to enable the customer portal.<\/li>\n<li>Go back to Horizons and ask Horizons to integrate the Stripe Customer Portal into your project.<\/li>\n<\/ol><p style=\"padding-left: 40px\"><strong><span style=\"color: #003366\"><em>Message example:<\/em><\/span><\/strong><\/p><blockquote><p><i><span style=\"font-weight: 400\">Create a new API route on the server that securely generates a link to the Stripe Customer Portal for the logged-in user.<\/span><\/i><\/p>\n<p><i><span style=\"font-weight: 400\">Then, add a &ldquo;Manage subscription&rdquo; button to my project. This button should be visible only to paid users. Clicking it should redirect users to the Stripe Customer Portal, where they can manage their subscriptions.<\/span><\/i><\/p><\/blockquote><p>&nbsp;<\/p><h2 id=\"h-other-tips\">Other tips<\/h2><ul>\n<li>Publish your project after making changes and test the subscription purchase flow by creating a new account on your project.<\/li>\n<li>You can find and manage all subscriptions on the <a href=\"https:\/\/dashboard.stripe.com\/customers\" target=\"_blank\" rel=\"noopener\">Stripe Customers page<\/a>. If you want to cancel subscription, select the user &rarr; in the <strong>Subscriptions<\/strong> section, click the 3-dots icon &rarr; click <strong>Cancel subscription<\/strong>.<\/li>\n<li>You can ask AI to hide the subscription purchase flow if the user already has one and add an indication showing that the user has a subscription.<\/li>\n<li>You can also ask AI to enable certain features of your project only for users with a subscription. For example, in a to-do list app, you could set a maximum number of tasks free users can create, and once they reach that limit, they&rsquo;d need to subscribe.<\/li>\n<\/ul><p>&nbsp;<\/p><h2 id=\"h-errors-or-bugs-fixing\">Errors or bugs fixing<\/h2><p>If you encounter issues or notice bugs during or after the Stripe connection process, try asking AI to fix them by providing as much context as possible.<\/p><p><strong>Example 1:<\/strong> If you get an error after trying to enter the subscription purchase flow, take a screenshot of the error, attach it to your message, and describe when it occurred and what the correct flow should be.<\/p><p style=\"padding-left: 40px\"><span style=\"color: #003366\"><strong><em>Message example<\/em><\/strong><\/span><\/p><p style=\"padding-left: 40px\"><span style=\"color: #003366\"><em>Clicking the &ldquo;Upgrade&rdquo; button throws an error (see attached screenshot). Clicking that button should redirect the user to Stripe for subscription purchase and then return them to my project with the account upgraded. Identify and fix the issue.<\/em><\/span><\/p><p><strong>Example 2:<\/strong> If, after purchase, the user doesn&rsquo;t have a subscription, provide context about when the issue occurs and what the expected flow should be.<\/p><p style=\"padding-left: 40px\"><strong><span style=\"color: #003366\"><em>Message example<\/em><\/span><\/strong><\/p><p style=\"padding-left: 40px\"><span style=\"color: #003366\"><em>After completing the subscription purchase flow, users are redirected back to the project, but their subscription status is not updated, and premium features are not unlocked. Ensure the subscription is verified on return and the user is granted access to premium features immediately. Identify and fix the issue.<\/em><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We recommend using Stripe if you want to sell subscriptions. You can also connect other third-party tools, but this guide focuses on Stripe.If you want&#8230;<\/p>\n","protected":false},"author":598,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[293],"tags":[],"class_list":["post-5600","post","type-post","status-publish","format-standard","hentry","category-hostinger-horizons"],"hreflangs":[],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/5600","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/598"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=5600"}],"version-history":[{"count":10,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/5600\/revisions"}],"predecessor-version":[{"id":8961,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/5600\/revisions\/8961"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=5600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=5600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=5600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}