We will implement a pre-order button with Stripe so that our visitors can request to pre-order our awesome product.
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.
First things first, we need a landing page that speaks to our target market. That means having:
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. 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.
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.
Creating a new account 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.
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.
Creating a Payment Link on Stripe Dashboard
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
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!