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

Languages | Tools Used | Time Saved

HTML, CSS, JS Stripe 3 hrs → 20 mins

Source Code

https://github.com/bdcorps/one-time-payments-html-landing-page

Live Demo

https://lucid-ramanujan-f21cd3.netlify.app/

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

here

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
</button>

Create a new Stripe account here.

A newly created Stripe account is put into Test Mode by default. This makes it easier to test the payment system without actually getting charged. Switch your account to Live Mode once you are ready to move to Production. For more information on Stripe's Test vs. Live Mode, click here.

Add a name for your account by clicking the

Add a name

button on the top left.

Creating a new account on Stripe

Need an easier way to add Pricing to your page? Try Pricewell

Step 3: Enable Client-Only Integration

Enable Client-Only Integration under Settings > Checkout Settings.

Remember to add your hosting URL to Domains once you're live in Production to secure your payment gateway.

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.

<button
  class="btn btn-outline-secondary"
  style="width: 50%;"
  type="submit"
  id="order-btn"
  data-checkout-mode="payment"
  data-price-id="price_1H8sRrJZydwyZEHEvdH1j1r1"
>
  Pre-Order for $20
</button>

Step 5: Add Stripe Libraries

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

<body>
  <script src="<https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js>"></script>
  <script src="<https://js.stripe.com/v3/>"></script>
  <script src="js/main.js"></script>
</body>

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) {
    console.log(result.error.message);
  }
};

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

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

    stripe
      .redirectToCheckout({
        mode: checkoutMode,
        lineItems: items,
        successUrl: DOMAIN + "main.html?success=true",
        cancelUrl: DOMAIN + "main.html?success=false",
      })
      .then(handleResult);
  });
});

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.

The Email Receipts feature only works in Live Mode

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 https://lucid-ramanujan-f21cd3.netlify.app/

Need source code? https://github.com/bdcorps/one-time-payments-html-landing-page

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

Check it out →

Tools for SaaS Devs

Regex Generator