PaymentsSaas

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

We will implement a pre-order button with Stripe so that our visitors can request to pre-order our awesome product.

Featured Image

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.

Step 1: 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. imagePreview 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.

Step 2: Sign up for Stripe account

Create a new Stripe account here.

Add a name for your account by clicking the Add a name button on the top left. imageCreating a new account on Stripe

Step 3: 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. imageAdding a One-Time product on Stripe

Step 4: Set up a Payment Link

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

Step 5: 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!