Collect Pre-Sales revenue from early adopters using the Stripe API

Featured Image

Languages | Tools Used | Time Saved

HTML, CSS, JS                Stripe                   3 hrs → 20 mins

Source Code

Live Demo

Collecting pre-sales revenue is the best way to validate a product idea. Stripe makes it easy to set up one-time payments on a really simple static HTML site. In this guide, we will implement a pre-order button with Stripe so that our visitors can request to pre-order our awesome product.

Justin from Kettle & Fire very cleverly collected validated his idea and started his 100% Grain-Fed Bone Broth business - read more here.

Let's see how we can something similar ourselves!

Step 1: Create an HTML landing page

First things first, we need a landing page that speaks to our target market. That means having:

  • Description of our product
  • Value Props as to what value the product will provide
  • A shiny payment button so we can securely collect payments

Our lovely team at SaaSBase decided to build a super easy ready-to go project


that you can use. Feel free to use it however you like, for personal or for commercial purposes.

Preview of the free landing page design by SaaSBase It includes a Headline and a Sub-Headline that you can edit to match your offering. And most importantly it contains a Pre-Order button that when clicked should trigger the Stripe payment process.

<button class="btn btn-outline-secondary" type="submit" id="order-btn">
  Pre-Order for $20

Step 2: Sign up for Stripe account

Create a new Stripe account here.

Add a name for your account by clicking the

Add a name

button on the top left.

Creating a new account on Stripe

Step 3: Enable Client-Only Integration

Enable Client-Only Integration under Settings > Checkout Settings.

Step 4: Create a product on Stripe

To add a new product, click on Products > Add a New Product. Add a meaningful name, icon, and price. Make sure to set the price to One time. You could also choose Recurring if you want a subscription-based product.

Copy the API ID under Pricing.

Creating a new Product on Stripe Dashboard Edit the Pre-Order button by pasting in the API ID from before.

  class="btn btn-outline-secondary"
  style="width: 50%;"
  Pre-Order for $20

Step 5: Add Stripe Libraries

Let's add the libraries to the body of our page.

  <script src="<>"></script>
  <script src="<>"></script>
  <script src="js/main.js"></script>

Create a new file called js/main.js. Replace the PUBLISHABLE_KEY with yours from Developers > API Key.

var PUBLISHABLE_KEY = "pk_test_xxx";

var DOMAIN = location.href.replace(/[^/]*$/, "");

var stripe = Stripe(PUBLISHABLE_KEY);

var handleResult = function (result) {
  if (result.error) {

$(document).ready(function () {
  var urlParams = new URLSearchParams(;
  if (urlParams.has("success")) {
    var success = urlParams.get("success") == "true";
    if (success) {
        "Thank you for purchasing Biller! Your order will arrive within the hour."
    } else {
        "There was an error processing your payment. Please try again."

  $("#order-btn").click(function (event) {
    var checkoutMode = $("checkoutMode");
    var priceId = $("priceId");
    var items = [{ price: priceId, quantity: 1 }];

        mode: checkoutMode,
        lineItems: items,
        successUrl: DOMAIN + "main.html?success=true",
        cancelUrl: DOMAIN + "main.html?success=false",

Step 6: Try a test payment

That's it for the integration. We can try out our payment system with a test credit card.

Click on the Pre-Order button. Use the card number 4242 4242 4242 4242. More on that here.

If everything goes well. your payment will go through and show up in the Dashboard.

Making a test payment on Stripe Checkout screen

Step 7: Enable Email Receipts (Optional)

By default, a successful Stripe payment does not send an acknowledgment to the customer. Let's change that by enabling Email Receipts. Turn on Successful Payments and Refunds under Settings > Email > Customer Emails.

There we go! Now we have a responsive landing page where early adopters can go and pay for early access to a product. And we saved a ton of time! Now go collect your revenue :)

Try the live demo yourself at

Need source code?

I'm building a new SaaS to automate content marketing for your SaaS

Check it out →

Tools for SaaS Devs