Grow your SaaS organically with Content Marketing.
Try for free →HTML, CSS, JS Stripe 3 hrs → 20 mins
https://github.com/bdcorps/one-time-payments-html-landing-page
https://lucid-ramanujan-f21cd3.netlify.app/
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 guide, we will implement a pre-order button with Stripe so that our visitors can request to pre-order our awesome product.
Justin from Kettle & Fire very cleverly collected validated his idea and started his 100% Grain-Fed Bone Broth business - read more here.
Let's see how we can something similar ourselves!
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
that you can use. Feel free to use it however you like, for personal or for commercial purposes.
Preview of the free landing page design 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.
<button class="btn btn-outline-secondary" type="submit" id="order-btn">
Pre-Order for $20
</button>
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
Need an easier way to add Pricing to your page? Try Pricewell
Enable Client-Only Integration
under Settings > Checkout Settings.
Remember to add your hosting URL to Domains once you're live in Production to secure your payment gateway.
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.
Copy the API ID under Pricing.
Creating a new Product on Stripe Dashboard 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>
Let's add the libraries to the body of our page.
<body>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js>"></script>
<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_xxx";
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);
});
});
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.
Making a test payment on Stripe Checkout screen
By default, a successful Stripe payment does not send an acknowledgment 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
There we go! Now we have a responsive landing page where early adopters can go and pay for early access to a product. And we saved a ton of time! Now go collect your revenue :)
Try the live demo yourself at https://lucid-ramanujan-f21cd3.netlify.app/
Need source code? https://github.com/bdcorps/one-time-payments-html-landing-page
I'm building a new SaaS to automate content marketing for your SaaS
Tools for SaaS Devs