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:
- Description of our product
- Value Props as to what value the product will provide
- 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.
Step 2: Sign up for Stripe account
Create a new Stripe account here.
A newly created Stripe account is put into
Test Modeby default. This makes it easier to test the payment system without actually getting charged. Switch your account to
Live Modeonce 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.
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.
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
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.
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!