<!DOCTYPE html>
<html class="en-GB">
<head>
<title>Payments, with Stripe, in your Rails app</title>
<meta name="description" content="Accept recurring and one-time payments from the moment you deploy. Sjabloon comes with Stripe integrated, including full setup, webhooks and UI for many different components." />
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="98QzS5ziETKP3wB+Z9EWd3OiFQxxbggTLofGi96wk68w/pWY6awLFzMkEDv5N2r+C02rqgk4vnLNTTybMMrSDw==" />
<script src="https://js.stripe.com/v3/"></script>
<meta property="og:site_name" content="Sjabloon">
<meta property="og:title" content="Payments, with Stripe, in your Rails app" />
<meta property="og:description" content="Accept recurring and one-time payments from the moment you deploy. Sjabloon comes with Stripe integrated, including full setup, webhooks and UI for many different components.">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.getsjabloon.com/features/payments" />
<meta property="og:image" content="https://www.getsjabloon.com/packs/media/images/social-483fb4efa20beb2655befb29d65850d1.jpg"></meta>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ntscHQ">
<meta name="twitter:domain" value="getsjabloon.com" />
<meta name="twitter:title" value="Payments, with Stripe, in your Rails app" />
<meta name="twitter:description" value="Accept recurring and one-time payments from the moment you deploy. Sjabloon comes with Stripe integrated, including full setup, webhooks and UI for many different components." />
<meta property="twitter:image" content="https://www.getsjabloon.com/packs/media/images/social-483fb4efa20beb2655befb29d65850d1.jpg"></meta>
<meta name="twitter:url" value="https://www.getsjabloon.com/features/payments" />
<meta property="og:logo" content="https://www.getsjabloon.com/logo.jpg" />
<script src="/packs/js/application-52108bb48a94ea445faf.js" data-turbolinks-track="reload"></script>
<link rel="stylesheet" media="screen" href="/packs/css/application-49f7a508.css" data-turbolinks-track="reload" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="6ZvJ4u5D3MhqQhHVjdjAzRUq66Za_Xez7zSLX7tJ-E0" />
</head>
<body class="">
<div class="site-announcement" data-controller="site-announcements" data-target="site-announcements.banner" data-site-announcements-id="37" data-site-announcements-site-name="sjabloon">
<span class="site-announcement__badge site-announcement__badge--#{last_announcement.announcement_type}">
news
</span>
<a class="site-announcement__title" href="https://railsdesigner.com/">Professionally designed UI components to build your next Ruby on Rails app even faster</a>
<a class="site-announcement__action" href="https://railsdesigner.com/">Check it out</a>
<button class="site-announcement__close" data-action="click->site-announcements#dismiss">
<svg viewbox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="site-announcement__close-icon"> <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd"> <g id="icon-shape"> <polygon id="Combined-Shape" points="10 8.58578644 2.92893219 1.51471863 1.51471863 2.92893219 8.58578644 10 1.51471863 17.0710678 2.92893219 18.4852814 10 11.4142136 17.0710678 18.4852814 18.4852814 17.0710678 11.4142136 10 18.4852814 2.92893219 17.0710678 1.51471863 10 8.58578644"></polygon> </g> </g> </svg>
</button>
</div>
<nav class="justify-between text-sm leading-tight nav" data-controller="navigation" data-target="navigation.component" data-action="scroll@window->navigation#onScroll">
<a class="inline-flex" href="/">
<svg width="30" height="30" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><title>logo</title><defs><linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="a"><stop stop-color="#00CAFF" offset="0%"/><stop stop-color="#009AFF" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><circle fill="url(#a)" cx="100" cy="100" r="100"/><path d="M126.412 145.011v16.379H72.565v-16.379H46L83.558 39h35.136l37.356 106.011h-29.638zm-7.464-24.006L102.54 64.847l-16.267 56.158h32.676z" fill="#FFF"/></g></svg>
</a>
<div class="nav__items" data-target="navigation.items">
<a class="nav__item nav__link" href="/login">log in</a>
</div>
<span role="link" class="navigation__item navigation__toggle" data-target="navigation.toggle" data-action="click->navigation#toggle">menu</span>
</nav>
<div class="overflow-hidden hero">
<div class="container hero__content">
<span class="feature-hero__tag">Feature</span>
<h1 class="feature-hero__heading">
Payments and billing
</h1>
<p class="feature-hero__intro">
“It's not a business if people don't pay for it”. Sjabloon takes care of everything related to adding payments and billing with Stripe in your new SaaS Rails app. From your pricing page all the way to email receipts—ready to go with minimal setup from you.
</p>
</div>
<div class="bg-no-repeat bg-cover shadow-lg chrome-wrapper" style="background-image: url(https://www.getsjabloon.com/packs/media/images/features/pricing-bb3eab2377fecf5a68e1e982264b1089.jpg); width: 100%; max-width: 120rem; height: 30rem"></div>
</div>
<div class="max-w-xl mx-auto mt-16">
<h2 class="mt-6 mb-1 text-xl font-bold">Subscriptions with Stripe</h2>
<p class="mb-8">Sjabloon integrates seamlessy with Stripe. Everything related to billing is done for you. From the moment your user signs up, they can choose their plan, add their credit card and voila: done. Once subscribed, they can change, see their charges, download their receipts or cancel their subscription. All out-of-the-box.</p>
<h2 class="mt-6 mb-1 text-xl font-bold">Your pricing page with one easy command</h2>
<div class="flex flex-col sm:flex-row sm:flex-row-reverse">
<p class="w-full mb-8 sm:w-3/5 sm:pl-8">Your pricing page is fully designed for you. And is, as always, easily customisable because it's built using Tailwind Css. Have monthly ánd annual plans? Your user can swap between those too. No designer's eye needed!</p>
<img class="w-full sm:w-2/5 h-full p-4 border border-gray-200 rounded" src="https://www.getsjabloon.com/packs/media/images/plan-items-019f1280f34f61fb7254e2f719059b1e.jpg" />
</div>
<h2 class="mt-6 mb-1 text-xl font-bold">A nice incentive: coupons out-of-the-box</h2>
<div class="flex flex-col sm:flex-row">
<p class="w-full mb-8 sm:w-3/5 sm:pr-8">Discount codes can be great driver for more sales. Sjabloon comes with coupons from the get-go. Run a temporary holiday sale? Your user can add the coupon code to see instantly if the code is valid and the discount they get. Only little setup needed.</p>
<img class="w-full sm:w-2/5 h-full p-4 border border-gray-200 rounded" src="https://www.getsjabloon.com/packs/media/images/coupons-3c1082aa24da45f27b40010ef0a67a63.gif" />
</div>
<h2 class="mt-6 mb-1 text-xl font-bold">Automatically set up your environments</h2>
<div class="flex flex-col sm:flex-row sm:flex-row-reverse">
<p class="w-full mb-8 sm:w-3/5 sm:pl-8">Both your development environment and production are quickly set up by <b>running the available “rake tasks” coming with Sjabloon to grab your products and plans from Stripe</b>. These are used to create your pricing page. It groups them by monthly and annual plans. Coupons are fetched in the same way too. All set up for you, without any coding needed.</p>
<img class="w-full sm:w-2/5 h-full p-4 border border-gray-200 rounded" src="https://www.getsjabloon.com/packs/media/images/stripe-fetch-a2a014dcc921ee09742034a9989a765b.jpg" />
</div>
<h2 class="mt-6 mb-1 text-xl font-bold">Custom designed emails</h2>
<p class="mb-8">Send your users emails that are on-brand. From the receipt, to a refund and an upcoming subscription renewal. All easily customisable in the <b>same convenient way all the Sjabloon emails are handled</b>.</p>
<p class='font-semibold text-gray-600'>
Sjabloon's billing and payments does not support SCA (yet).
</p>
</div>
<footer class="footer-wrapper">
</footer>
<script async defer data-domain="getsjabloon.com" src="https://plausible.io/js/plausible.js"></script>
</body>
</html>