Easily collect Pre-Sales revenue from early adopters using the Stripe Payment Links

In this guide, we will implement a pre-order button with Stripe so that our visitors can request to pre-order our awesome product.

Easily collect Pre-Sales revenue from early adopters using the Stripe Payment Links

Collecting pre-sales revenue is the best way to validate a product idea. Stripe has now made it insanely easy with their new product - Payment Links. In this guide, 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.

image
Preview of the landing page built 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.

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.

image
Creating a new account on Stripe

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. You could also choose Recurring if you want a subscription based product.

image
Adding a One-Time product on Stripe

A Payment Link is a special URL that Stripe generates uniquely for you to collect payment for a product.

  • Go to Products > Payment Links > Create Payment Link
  • Choose your product
  • Click Create
  • Copy the generated Payment Link
Creating a Payment Link on Stripe Dashboard

Hook up the payments

To allow our users to pay for our product, all we have to do is redirect them to this URL when they click the pre-order button. We can do this by adding an onclick event on the button.

<button	class="btn btn-outline-secondary"
    onclick="location.href='https://buy.stripe.com/test_7sIfZ0ek95nycVi000';"
    id="order-btn"> Pre-Order for $20</button>

There we have it! Try clicking on the button and you should be redirected to a Stripe secure payment page that will send you email notifications when a payment is made.  

Simulating a test payment using Stripe Checkout page

Next Steps

There we go! We just built a landing page where early adopters can go and pay to pre-order our potential product. Now time for the most important bit - getting visitors on the landing page in the first place. Find what FB groups, Twitter circles, Subreddits your users might hang out at and share with them the link to the landing page. Godspeed!

Didn't find this guide useful? Let me know