{"id":127008,"date":"2025-04-14T16:02:06","date_gmt":"2025-04-14T16:02:06","guid":{"rendered":"\/tutorials\/?p=127008"},"modified":"2026-03-10T09:26:37","modified_gmt":"2026-03-10T09:26:37","slug":"hostinger-horizons-stripe-integration","status":"publish","type":"post","link":"\/ca\/tutorials\/hostinger-horizons-stripe-integration","title":{"rendered":"How to integrate Stripe payments with Hostinger Horizons"},"content":{"rendered":"<p>Stripe is a payment platform that lets you accept online payments and manage subscriptions securely.<\/p><p>If you&rsquo;ve built a web app with Hostinger Horizons and want to monetize it &ndash; whether through premium content, memberships, or recurring plans &ndash; Stripe offers a simple yet powerful solution.<\/p><p>This guide will walk you through integrating Stripe with your Hostinger Horizons project. By the end, you&rsquo;ll know how to connect your Stripe account, create a subscription product, and start accepting payments directly from users.<\/p><p>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-why-integrate-stripe-with-hostinger-horizons\"><strong>Why integrate Stripe with Hostinger Horizons?<\/strong><\/h2><p>Connecting Stripe with<a href=\"\/ca\/horizons\/web-application-development\"> Hostinger Horizons web app builder<\/a> gives you a fast, secure way to accept payments without writing backend code.<\/p><p>You can offer subscriptions, manage recurring billing, and deliver a seamless checkout experience directly in your web app.<\/p><p>With Hostinger Horizons handling the front end and Stripe managing payments, you get a complete setup that&rsquo;s easy to launch and scales as your project grows.<\/p><p>Whether you&rsquo;re running a paid membership platform or selling digital products, this integration helps you<a href=\"\/ca\/tutorials\/how-to-monetize-a-web-app\"> monetize your web app<\/a> safely and efficiently.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-horizons\" href=\"\/ca\/horizons\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/Horizons-in-text-banner-no-code-website-builder-1024x300.png\" alt=\"\" class=\"wp-image-129223\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-how-to-set-up-stripe-payments-on-your-web-app\"><strong>How to set up Stripe payments on your web app<\/strong><\/h2><p>Before adding Stripe to your web app,<a href=\"\/ca\/tutorials\/connect-custom-domain-to-web-app\"> you should connect it to a custom domain<\/a>. This will make your app easier to access and help build user trust.<\/p><p>For this tutorial, we&rsquo;ll implement a recurring subscription model similar to Netflix. Users will pay a fixed monthly fee to access premium content.<\/p><p>If you need other models like one-time purchases or pay-what-you-want donations, don&rsquo;t worry &ndash; we&rsquo;ll cover those later in this guide.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-sign-up-for-a-stripe-account\"><strong>1. Sign up for a Stripe account<\/strong><\/h3><p>To start accepting payments, you&rsquo;ll need a Stripe account:<\/p><ol class=\"wp-block-list\">\n<li>Go to the<a href=\"https:\/\/dashboard.stripe.com\/register\" target=\"_blank\" rel=\"noopener\"> Stripe registration page<\/a> and create your free account.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e232febb419\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"734\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/04\/stripe-registration-1024x734.png\" alt=\"The Stripe registration page\" class=\"wp-image-127013\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Enter your email, password, and business or personal details. Stripe uses this information to set up your profile and payment preferences.<\/li>\n\n\n\n<li>Once you complete the form, check your inbox and verify your email address to activate the account.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e232febd427\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"704\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/04\/stripe-verification-email-1024x704.png\" alt=\"A verification email from Stripe\" class=\"wp-image-127014\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-2-enable-the-client-only-integration\"><strong>2. Enable the client-only integration<\/strong><\/h3><p>With your account ready, enable client-only integration in Stripe to power your app&rsquo;s checkout page. This setup lets you accept payments without a backend server &ndash; ideal for no-code platforms like Hostinger Horizons.<\/p><ol class=\"wp-block-list\">\n<li>Open your Stripe dashboard and navigate to <strong>Settings &rarr; Payments<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e232febed52\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"365\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/04\/stripe-settings-payments-highlighted-1024x365.png\" alt=\"The Payments menu in Stripe's Settings page\" class=\"wp-image-127015\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Under the <strong>Checkout and Payment Links<\/strong> tab, scroll to the bottom and hit <strong>Enable client-only integration<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e232fec0cf6\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"357\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/04\/stripe-settings-payments-enable-client-only-integration-highlighted-1024x357.png\" alt=\"The Enable client-only integration button in the Payments menu of Stripe's Settings page\" class=\"wp-image-127016\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Click <strong>Allow<\/strong> in the confirmation dialog to activate this setting.<\/li>\n<\/ol><h3 class=\"wp-block-heading\" id=\"h-3-create-a-product-for-premium-content\"><strong>3. Create a product for premium content<\/strong><\/h3><p>Next, set up a subscription-based product that users will pay for on a recurring basis.<\/p><ol class=\"wp-block-list\">\n<li>Go to <strong>Product catalog<\/strong> from the left-hand menu.<\/li>\n\n\n\n<li>Click <strong>Create product<\/strong>, then fill in the details:\n<ul class=\"wp-block-list\">\n<li><strong>Name<\/strong> &ndash; enter a clear name, such as <strong>Premium Content Access<\/strong>.<\/li>\n\n\n\n<li><strong>Pricing model<\/strong> &ndash; select <strong>Recurring<\/strong>.<\/li>\n\n\n\n<li><strong>Amount<\/strong> &ndash; set your monthly rate. For example, <strong>$9.99<\/strong>.<\/li>\n\n\n\n<li><strong>Billing period<\/strong> &ndash; choose <strong>Monthly<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ol><p>Feel free to adjust the name, price, and billing period to fit your app&rsquo;s needs.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e232fec2c61\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"491\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/04\/stripe-add-a-product-1024x491.png\" alt=\"The Add a product dialog in Stripe\" class=\"wp-image-127018\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>When you&rsquo;re ready, hit <strong>Add product<\/strong>.<\/li>\n\n\n\n<li>Once saved, open the product, click the <strong>three horizontal dots<\/strong> next to the price, and select <strong>Copy price ID<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e232fec469f\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"605\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/04\/stripe-products-copy-price-id-1024x605.png\" alt=\"The Copy price ID option in a Stripe product\" class=\"wp-image-127019\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Store this ID &ndash; you&rsquo;ll need it to complete the Stripe integration in Hostinger Horizons.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-get-the-stripe-publishable-key\"><strong>4. Get the Stripe publishable key<\/strong><\/h3><p>Now that you&rsquo;ve added a product, grab your Stripe publishable key to connect the payment flow.<\/p><ol class=\"wp-block-list\">\n<li>From the bottom left corner of your Stripe dashboard, select <strong>Developers &rarr; API keys<\/strong>.<\/li>\n\n\n\n<li>Under the <strong>Standard keys<\/strong> section, find your publishable key. It typically starts with <strong>pk_test_<\/strong> in test mode.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e232fec6a32\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/04\/stripe-developers-api-keys-publishable-key-highlighted-1024x469.png\" alt=\"The generated publishable key in Stripe's developers page\" class=\"wp-image-127020\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Click the key to copy it. You&rsquo;ll use this and the price ID to link your web app with Stripe.<\/p><h3 class=\"wp-block-heading\" id=\"h-5-share-the-price-id-and-publishable-key\"><strong>5. Share the price ID and publishable key<\/strong><\/h3><p>After collecting your Stripe details, open your Hostinger Horizons-built web app so the AI tool can implement the payment setup.<\/p><ol class=\"wp-block-list\">\n<li>Log in to hPanel with your Hostinger account and navigate to <strong>Websites &rarr; Website list<\/strong>. Then, hit <strong>Edit web app<\/strong> next to your project.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e232fec857c\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"383\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/04\/hpanel-websites-edit-web-app-highlighted-1024x383.png\" alt=\"The Edit web app button in hPanel's Websites page\" class=\"wp-image-127021\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Paste both the price ID and publishable key into the prompt box, along with a clear instruction like:<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\" data-enlighter-theme=\"atomic\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">I want to integrate Stripe into my web app so that users can access my premium content. Here are my Stripe credentials:\n\n&ndash; price ID: [your_price_id]\n\n&ndash; publishable key: [your_publishable_key]<\/pre><ol start=\"3\" class=\"wp-block-list\">\n<li>Give Hostinger Horizons a moment to process the request and apply the changes.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e232feca04b\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"573\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/04\/hostinger-horizons-project-dashboard-1024x573.png\" alt=\"The Hostinger Horizons project dashboard\" class=\"wp-image-127022\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>You can add access control logic if you haven&rsquo;t done so already. For instance:\n<ul class=\"wp-block-list\">\n<li>When users click on premium content, ask them to sign in if they haven&rsquo;t done so.<\/li>\n\n\n\n<li>After signing in, show a <strong>Subscribe to Access<\/strong> button that redirects them to Stripe&rsquo;s checkout page.<\/li>\n\n\n\n<li>Users enter their payment details securely on Stripe&rsquo;s page.<\/li>\n\n\n\n<li>After a successful payment, redirect them back to the content library.<\/li>\n\n\n\n<li>If they cancel, return them to the content page without granting access.<\/li>\n<\/ul>\n<\/li>\n<\/ol><p>Here&rsquo;s a sample prompt you can use:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\" data-enlighter-theme=\"atomic\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Please add logic so that when users click on premium content, they're asked to sign in. After signing in, show a \"Subscribe to Access\" button that opens the Stripe checkout using the price ID above. After payment, redirect them back to the content page.<\/pre><h3 class=\"wp-block-heading\" id=\"h-6-test-the-payment-integration\"><strong>6. Test the payment integration<\/strong><\/h3><p>Your web app should now be ready to accept test payments. To verify everything, start by publishing your project.<\/p><p>You can&rsquo;t test the Stripe integration using the preview pane in Hostinger Horizons, because the live preview runs within a sandboxed iframe that restricts redirections for security.<\/p><ol class=\"wp-block-list\">\n<li>Launch your app by clicking <strong>Publish<\/strong> in the top right corner of the project dashboard.<\/li>\n\n\n\n<li>Open your web app through your custom domain and try subscribing to premium content.<\/li>\n\n\n\n<li>You&rsquo;ll be redirected to the Stripe checkout page, where you can test the payment process:<\/li>\n<\/ol><ul class=\"wp-block-list\">\n<li>Use Stripe&rsquo;s test card: <strong>4242 4242 4242 4242<\/strong>.<\/li>\n\n\n\n<li>Enter any future expiration date.<\/li>\n\n\n\n<li>Use any 3-digit CVC.<\/li>\n\n\n\n<li>Provide any name, email, and country.<\/li>\n<\/ul><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e232fecbda1\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"841\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/04\/stripe-checkout-1024x841.png\" alt=\"The Stripe checkout page\" class=\"wp-image-127023\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>If the payment succeeds, you&rsquo;ll be redirected to the content library.<\/p><p>The <strong>Subscribe to Access<\/strong> button will change to <strong>Read Now<\/strong>, confirming that access has been granted. You&rsquo;ll also see the <strong>Premium Access Active<\/strong> badge, meaning the subscription is active.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e232fecd82b\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"611\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/04\/hostinger-horizons-content-library-min-1024x611.png\" alt=\"The Content Library page of the Hostinger Horizons-built web app\" class=\"wp-image-127024\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-7-make-the-stripe-integration-go-live\"><strong>7. Make the Stripe integration go live<\/strong><\/h3><p>Once you&rsquo;ve<a href=\"\/ca\/tutorials\/web-app-testing\"> tested your web app<\/a>, switch to live mode in Stripe to start accepting real payments.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Important notes before going live with Stripe<\/h4>\n                    <p>Once your Stripe payment is active, the test card number will no longer work. Using real credit cards for testing will result in actual charges, so proceed carefully.<\/p>\n                <\/div>\n\n\n\n<\/p><ol class=\"wp-block-list\">\n<li>In your Stripe dashboard, hit <strong>Get your live account<\/strong> at the top of the page and follow the instructions. This will include entering your business details and bank account information.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e232fecf12a\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"736\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/04\/stripe-live-account-onboarding-1024x736.png\" alt=\"The Stripe live account onboarding process\" class=\"wp-image-127025\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Go to <strong>Settings &rarr; Payments &rarr; Checkout and Payment<\/strong>, then enter your domain under the <strong>CLIENT-ONLY INTEGRATION<\/strong> section to whitelist it.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e232fed2120\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"906\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/04\/stripe-client-only-integration-domains-1024x906.png\" alt=\"The Domains field in the CLIENT-ONLY INTEGRATION section of Stripe\" class=\"wp-image-127026\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Create a new product, get your live publishable key, and share it with Hostinger Horizons again. Use this prompt to let the tool update your web app&rsquo;s code:<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\" data-enlighter-theme=\"atomic\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">I've switched Stripe to live mode. Can you update my web app with the live price ID and publishable key? Here are the details:\n\n&ndash; price ID: [your_live_price_id]\n\n&ndash; publishable key: [your_live_publishable_key]<\/pre><ol start=\"4\" class=\"wp-block-list\">\n<li>Once it processes the update, re-publish your app.<\/li>\n<\/ol><p>That&rsquo;s it! You&rsquo;ve successfully configured Stripe on Hostinger Horizons and are now ready to receive payments for your premium content.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-handle-stripe-webhooks-with-hostinger-horizons-optional\"><strong>How to handle Stripe webhooks with Supabase<\/strong><\/h2><p>While the current payment system is enough to process basic transactions, you can enhance it further using Stripe webhooks.<\/p><p>Think of webhooks as a notification system: When something happens in Stripe, such as a successful payment, Stripe sends a message to your server. This is more efficient than the basic payment process you have now.<\/p><p>To set up webhooks, you&rsquo;ll need to add some backend code. You should also connect your web app to a Supabase database.<\/p><p>Supabase will handle user data storage, provide server endpoints to receive Stripe webhook notifications, and offer a built-in authentication system.<\/p><p>Here&rsquo;s a comparison of the flows:<\/p><ul class=\"wp-block-list\">\n<li>Current flow:<\/li>\n<\/ul><pre class=\"wp-block-preformatted\">User pays &rarr; returns to the success page &rarr; the frontend checks the page and updates the stored data<\/pre><ul class=\"wp-block-list\">\n<li>Webhook and Supabase flow:<\/li>\n<\/ul><pre class=\"wp-block-preformatted\">User pays &rarr; Stripe confirms the payment &rarr; Stripe notifies Supabase &rarr; Supabase updates the database<\/pre><p>The latter is more reliable and scalable because it ensures proper data storage, verifies payments, and automates updates.<\/p><p>If you&rsquo;re interested in implementing webhooks, follow the official Supabase documentation on<a href=\"https:\/\/supabase.com\/docs\/guides\/functions\/examples\/stripe-webhooks\" target=\"_blank\" rel=\"noopener\"> handling Stripe webhooks<\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-stripe-integration-use-cases\"><strong>Stripe integration use cases<\/strong><\/h2><p>We&rsquo;ve demonstrated how to integrate Stripe to charge users regularly, either monthly or yearly, to access premium content.<\/p><p>But you can also set up different payment models. Below are two examples:<\/p><p><strong>Per-item purchases<\/strong><\/p><p>If you sell individual items or digital products, such as ebooks or courses, you can create a product for each item in Stripe and set a one-time payment pricing model to process single transactions.<\/p><p>After that, note down each product&rsquo;s price ID and share it with Hostinger Horizons so it can update the payment process for each item. Here&rsquo;s an example prompt:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\" data-enlighter-theme=\"atomic\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">I want to set up Stripe payments for the following products. Here are their price IDs:\n\n&ndash; price_abc123... for \"Product 1\"\n\n&ndash; price_xyz789... for \"Product 2\"<\/pre><p><strong>Donations\/pay-what-you-want<\/strong><\/p><p>If you&rsquo;re a creator, run a nonprofit platform, or manage a donation-based web app, you can let users choose how much they want to donate to support your cause.<\/p><p>In Stripe, go to <strong>Payment Links &rarr; New<\/strong>. Select <strong>Customers choose what to pay<\/strong> as the payment type. After configuring the other settings, click <strong>Create Link<\/strong>.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69e232fed44d8\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"522\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/04\/stripe-create-a-payment-link-1024x522.png\" alt=\"The Create a payment link dialog in Stripe\" class=\"wp-image-127027\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Once done, copy the generated link and share it with Hostinger Horizons. If you haven&rsquo;t created a donation button yet, use a prompt like this:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\" data-enlighter-theme=\"atomic\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">I want to add a Support Us button that lets users contribute any amount. Please link it to [the Stripe donation link].<\/pre><h2 class=\"wp-block-heading\" id=\"h-security-best-practices-when-using-stripe-on-your-web-app\"><strong>Security best practices when using Stripe on your web app<\/strong><\/h2><p>When integrating Stripe into your web app, follow these security tips to minimize vulnerabilities and prevent unauthorized access:<\/p><ul class=\"wp-block-list\">\n<li><strong>Never expose secret keys in frontend code<\/strong> &ndash; secret keys provide full access to your Stripe account. If exposed, malicious users could perform unauthorized actions like refunding payments or accessing customer data. Always use only the publishable key on the front end, as shown in this guide.<\/li>\n\n\n\n<li><strong>Validate webhook signatures server-side<\/strong> &ndash; Stripe includes a signature with each webhook event to prove it&rsquo;s genuine. Use your webhook secret &ndash; a unique key provided by Stripe &ndash; to verify this signature. If you use Supabase Edge Functions, validate events with Stripe&rsquo;s <strong>constructEvent<\/strong> method before processing them.<\/li>\n\n\n\n<li><strong>Use HTTPS<\/strong> &ndash; this protocol encrypts all data transmitted between users and your app, protecting sensitive payment information from interception. Hostinger&rsquo;s free SSL secures your entire web app, while Stripe&rsquo;s checkout page is also served over HTTPS by default.<\/li>\n\n\n\n<li><strong>Configure CORS properly<\/strong> &ndash; Cross-Origin Resource Sharing (CORS) controls which domains can access your app. Since Stripe Checkout uses redirects, your current setup avoids CORS issues. If you implement webhooks, configure CORS in your Supabase Edge Functions to accept requests only from Stripe.<\/li>\n\n\n\n<li><strong>Keep test and live environments separate<\/strong> &ndash; when moving to production, switch to live mode keys, update webhook endpoints to production URLs, and keep test data separate from production. This prevents accidental mixing of real and test transactions.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-troubleshooting-stripe-integration-issues\"><strong>Troubleshooting Stripe integration issues<\/strong><\/h2><p>Even with proper setup, you may encounter issues when setting up Stripe on your web app. Here are some common problems and how to fix them:<\/p><ul class=\"wp-block-list\">\n<li><strong>Invalid price ID or publishable key<\/strong> &ndash; this issue occurs when the keys in your code don&rsquo;t match those in your Stripe dashboard. To troubleshoot:\n<ul class=\"wp-block-list\">\n<li>Navigate to <strong>Developers &rarr; API keys &rarr; Standard keys<\/strong> to find the correct publishable key.<\/li>\n\n\n\n<li>For price IDs, go to <strong>Product catalog<\/strong>, select your product, and click the <strong>three dots<\/strong> next to the price.<\/li>\n\n\n\n<li>Ask Hostinger Horizons to update the credentials with the correct keys.<\/li>\n\n\n\n<li>Use the appropriate test or live keys based on your current environment.<\/li>\n\n\n\n<li>Double-check for typos or extra spaces in the keys.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Webhook not firing<\/strong> &ndash; this happens when Stripe can&rsquo;t reach your webhook endpoint, or the endpoint isn&rsquo;t processing events correctly. To fix it:\n<ul class=\"wp-block-list\">\n<li>Verify your Supabase Edge Function URL is correct in <strong>Developers &rarr; Webhooks<\/strong>.<\/li>\n\n\n\n<li>View webhook attempts in <strong>Developers &rarr; Events<\/strong>.<\/li>\n\n\n\n<li>Confirm your Edge Function is deployed correctly in Supabase.<\/li>\n\n\n\n<li>Test the webhook using Stripe&rsquo;s webhook tester in the <strong>Webhooks<\/strong> tab.<\/li>\n\n\n\n<li>Make sure your webhook secret is correctly set in your Supabase environment variables.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Checkout sessions failing to redirect<\/strong> &ndash; this occurs when the success and cancel URLs aren&rsquo;t configured correctly or are inaccessible. Try the following:\n<ul class=\"wp-block-list\">\n<li>Verify that the successful and canceled URLs match your actual domain.<\/li>\n\n\n\n<li>Ensure the URLs are whitelisted in Stripe.<\/li>\n\n\n\n<li>Test them by manually navigating to the URLs.<\/li>\n\n\n\n<li>Check the browser console for any errors during the redirect.<\/li>\n<\/ul>\n<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h2><p>Using Stripe gives you a secure, scalable, and no-code-friendly way to accept payments and manage subscriptions.<\/p><p>In this article, we&rsquo;ve explored how to integrate Stripe into your Hostinger Horizons-built web app. Here&rsquo;s a quick recap of the steps:<\/p><ol class=\"wp-block-list\">\n<li>Create a new Stripe account.<\/li>\n\n\n\n<li>Enable the client-only integration.<\/li>\n\n\n\n<li>Set up a premium product.<\/li>\n\n\n\n<li>Obtain your Stripe publishable key.<\/li>\n\n\n\n<li>Share the Stripe details with Hostinger Horizons.<\/li>\n\n\n\n<li>Test the payment flow by purchasing premium content.<\/li>\n\n\n\n<li>Switch the payment system to live mode.<\/li>\n<\/ol><p>As your app grows, you can add different pricing models, explore other Stripe features like coupons, and customize the checkout page&rsquo;s appearance. Doing so will help you deliver more value to your users and manage payments more efficiently.<\/p><p>Join our <a href=\"https:\/\/discord.com\/invite\/8p8nBUHrZk\" target=\"_blank\" rel=\"noopener\">Discord channel<\/a> for more tips and inspiration on making the most of Hostinger Horizons. Connect with the community, get expert advice, and stay updated on the latest features!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Stripe is a payment platform that lets you accept online payments and manage subscriptions securely. If you&rsquo;ve built a web app with Hostinger Horizons and want to monetize it &ndash; whether through premium content, memberships, or recurring plans &ndash; Stripe offers a simple yet powerful solution. This guide will walk you through integrating Stripe with [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ca\/tutorials\/hostinger-horizons-stripe-integration\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":411,"featured_media":142550,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Connect Stripe to your web app built with Hostinger Horizons","rank_math_description":"Learn how to connect Stripe payments with Hostinger Horizons-built web apps: 1. Create a Stripe account 2. Enable the client-only integration + more.","rank_math_focus_keyword":"integrate Stripe to your web app on Hostinger Horizons","footnotes":""},"categories":[22706],"tags":[],"class_list":["post-127008","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-app"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/hostinger-horizons-stripe-integration","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/hostinger-horizons-stripe-integration","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/hostinger-horizons-stripe-integration","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/hostinger-horizons-stripe-integration","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/hostinger-horizons-stripe-integration","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/hostinger-horizons-stripe-integration","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/hostinger-horizons-stripe-integration","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/hostinger-horizons-stripe-integration","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/127008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/comments?post=127008"}],"version-history":[{"count":9,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/127008\/revisions"}],"predecessor-version":[{"id":142549,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/127008\/revisions\/142549"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/media\/142550"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/media?parent=127008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/categories?post=127008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/tags?post=127008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}