Collect Pre-Sales revenue from early adopters using the Stripe API
Tags: startup, payments, stripe, development
Published: 2020-11-13 21:48:00

Time Saved: 3 hrs → 20 mins
---

## Goodies

Try the live demo at [https://lucid-ramanujan-f21cd3.netlify.app/](https://lucid-ramanujan-f21cd3.netlify.app/?utm_source=saasbase_dev)

Need source code? [https://github.com/bdcorps/one-time-payments-html-landing-page](https://github.com/bdcorps/one-time-payments-html-landing-page?utm_source=saasbase_dev)

---

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.

https://www.loom.com/share/62c5eda8089e42fc8de9577de0158df9

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](https://github.com/bdcorps/stripe-pre-order) that you can use. Feel free to use it however you like, for personal or for commercial purposes.

![web-1-1](https://dev-to-uploads.s3.amazonaws.com/i/951lzq1hsdgwbzyl5syg.png)
 
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.

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

### **Sign up for Stripe account**

Create a new Stripe account [here](https://dashboard.stripe.com/register?utm_source=saasbase_dev).

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](https://stripe.com/docs/keys?utm_source=saasbase_dev#test-live-modes).

Add a name for your account by clicking the `Add a name` button on the top left.

![2](https://dev-to-uploads.s3.amazonaws.com/i/v8cgcfsqr3ejayhuf5oz.png) 

### **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.

![4](https://dev-to-uploads.s3.amazonaws.com/i/hjn3tqqspbs0md1zq59h.png) 

Edit the Pre-Order button by pasting in the API ID from before.

```html
<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>
```

### **Add Stripe Libraries**

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

```html
<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.

```jsx
var PUBLISHABLE_KEY ="pk_test_51H8rt4JZydwyZEHEJVKNfKacIDRxR0i7YuprjgpREhVNUKr8v2a9yz8S9ZAiWdGKN8vM2KFHYukjTU0eAOzrk1Qe00KyY6NxL4";

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);
  });
});
```

### **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](https://stripe.com/docs/testing?utm_source=saasbase_dev).

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

![7](https://dev-to-uploads.s3.amazonaws.com/i/wnph6nrq4pa3ag2p5cyg.png) 

### **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 [https://lucid-ramanujan-f21cd3.netlify.app/](https://lucid-ramanujan-f21cd3.netlify.app/?utm_source=saasbase_dev)

Need source code? [https://github.com/bdcorps/one-time-payments-html-landing-page](https://github.com/bdcorps/one-time-payments-html-landing-page?utm_source=saasbase_dev)

---

Found this guide useful? Access more guides and build your SaaS faster at [saasbase.dev](saasbase.dev)