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 tutorial, we will implement a pre-order button with Stripe so that our visitors can request to pre-order our awesome product.


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 include 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>

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.

Note: 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.

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

<body>
	<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_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.

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

Enable Email Receipts

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.

bdcorps/stripe-pre-order
Contribute to bdcorps/stripe-pre-order development by creating an account on GitHub.