If you don’t currently have an ecomm store, Stripe is a good option for collecting payments as well as test the market for your products. Now you can build your own Stripe checkout right into your Unbounce landing pages to make it easier to turn more browsers into buyers.
See it in action! 💥 Here’s a landing page (built in Unbounce) using a built-in Stripe checkout.
Below we’ve broken down the instructions into two sections (with video) to make it as easy as possible.
🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.
Step 1. Enable checkout and create SKU in Stripe
Go to “Settings”
Go to “Checkout Settings”
Make sure you toggle “Enabled” on the top right corner of your screen
Enter the domain you want to use for your checkout (your landing page domain)
Go to “Create your first product”
Click “Add a test product”
Select whether it’s a one-time purchase or recurring product
Enter product name, currency, and upload image
Click “Done”
Click “Use with Checkout”
Enter your “Success URL”; this is where you will send users after they purchase and were you can setup your purchase tracking (make sure this URL is also whitelisted on step 4)
Enter your “Cancel URL”
Copy the embed code and click Done
Step 2. Paste embed code in your Unbounce landing page (style as needed)
Drag and drop Custom HTML widget
Paste embed code and click Save
Position your placeholder
Click Save and then Preview to make sure your CTA Button is positioned where you want it
Style CTA Button with CSS
That’s it! You’re done!
Let us know if you have any questions about these instructions in the comments section below 👇
Want to take your Unbounce landing pages + popups to the next level?
I have an active site with Woocommerce integration, but want to try Unbounce. I already have many products in my Stripe account and I’m worried that changing my checkout settings will disrupt my existing product checkouts. Any advice?
Thanks,
Charlie
Hi Charlie!
I’m not speaking from experience, but I don’t think this will impact you. Perhaps you can try with one product to see how this affects the checkout experience on your Woocommerce site, and go from there? Happy to provide assistance along the way, but I think you will be just fine 👍
Hi Stefano, thanks for the info here!
I’ve successfully set up the checkout on my landing page and it works fine on my desktop but when I try to click the link on mobile version it doesn’t click through to the Stripe payment page. Does this Stripe feature not work on mobile?
Thanks
Just bumping this up for @Stefano – have you had mobile/desktop issues in the past like this? 🤔
Hi there! I haven’t had this issue on my end, perhaps there is a conflicting issue with a script or something else on the page.
Could you share your URL with me? I can have a look.
Cheers!
and you can measure the sales from each variant in Unbounce?
Hi there! The sales will not be displayed in the Unbounce builder.
Do you know if this will work with a stripe subscription as well instead of just a one time charge?
That’s a good question! We never tried it with a Stripe subscription but my instincts say that it would work! Unless Stripe’s new checkout doesn’t play well with subscriptions.
Hello. Got everything to work, thank you so much! I need to collect the shipping address for a product. Is there a way to do that? I have looked all over the stripe dashboard & do not see it.
Hi there! I found this documentation which might help:
Jonathan ~ I don’t see a version for HTML code. Of the options given, which would I use? Thanks, Niki
This is something new information i get on unbounce. Loved to see it. Really helpful in my digital marketing career😍 Thanks for sharing
Hi @Stefano - I’m trying to implement Stripe checkout but something doesn’t seem to work. I’ve tried 2 Stripe accounts so far, and one-time purchases and subscriptions.
Could you DM me screenshots of your Stripe account? From my understanding, new accounts require complete account setup before the checkout will work. Also double check that you’ve added your domain in step 4 🙂
Thank you for the quick response!
My issue was user error after all. I had entered the subdomain at stripe, but it seems that the main domain is required as well.
Hi! We’re trying to add a button to make donations through Stripe, will this work the same? I have added the button to our landing page but the button doesn’t seem to be working.
Hi there! This often happens when you don’t add in your domain at the stripe checkout settings screen. Can you verify if your domain was added correctly?
Hi Stefano, thank you, that worked! Is it possible to add multiple prices to the one button?
Has anyone successfully integrated multiple Stripe buy now buttons? I have a long-form sales page and only one button will work for the product. If I want to add additional buy now buttons on the page or a sticky bar they do not function.
<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>
<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
style="background-color:#eb6a12;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em;cursor:pointer"
id="checkout-button-price_1HYJoBGbAB7kOFgGWgf0PzqR"
role="link"
type="button"
>
I'M READY
</button>
<div id="error-message"></div>
<script>
(function() {
var stripe = Stripe('pk_live_2jHS26KnXVzNkQilZnQLyapm00NPy2YkvH');
var checkoutButton = document.getElementById('checkout-button-price_1HYJoBGbAB7kOFgGWgf0PzqR');
checkoutButton.addEventListener('click', function () {
// When the customer clicks on the button, redirect
// them to Checkout.
stripe.redirectToCheckout({
lineItems: :{price: 'price_1HYJoBGbAB7kOFgGWgf0PzqR', quantity: 1}],
mode: 'payment',
// Do not rely on the redirect to the successUrl for fulfilling
// purchases, customers may not always reach the success_url after
// a successful payment.
// Instead use one of the strategies described in
// https://stripe.com/docs/payments/checkout/fulfill-orders
successUrl: window.location.protocol + '//www.clara-ty.com/success',
cancelUrl: window.location.protocol + '//www.clara-ty.com/canceled',
})
.then(function (result) {
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer.
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
});
});
})();
</script>
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks
😍 Thanks for sharing
