DEV Community


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

Sukhpal Saini
Originally published at ・4 min read

Time Saved: 3 hrs → 20 mins


Try the live demo at

Need source code?

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.

Let's get started!

Create an HTML landing page

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

  1. Description of our product
  2. Value Props as to what value the product will provide
  3. 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.


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"
    id="order-btn"> Pre-Order for $20</button>
Enter fullscreen mode Exit fullscreen mode

Sign up for Stripe account

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.


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.

Create a product on Stripe

To add a new product, click on Products > Add a New Product. Add a meaningful name, icon, and the price. Make sure to set the price to One time.

Copy the API ID under Pricing.


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
Enter fullscreen mode Exit fullscreen mode

Add Stripe Libraries

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

    <script src=""></script>
  <script src="js/main.js"></script>
Enter fullscreen mode Exit fullscreen mode

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

var PUBLISHABLE_KEY ="pk_test_51H8rt4JZydwyZEHEJVKNfKacIDRxR0i7YuprjgpREhVNUKr8v2a9yz8S9ZAiWdGKN8vM2KFHYukjTU0eAOzrk1Qe00KyY6NxL4";

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",
Enter fullscreen mode Exit fullscreen mode

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.


Enable Email Receipts (Optional)

By default, a successful Stripe payment does not send an acknowledgement 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 the early access of a product. And we saved a ton of time! Now go collect your revenue :)

Try the live demo yourself at

Need source code?

Found this guide useful? Access more guides and build your SaaS faster at

Discussion (0)