[How to] Add A Stripe Checkout On Your Landing Pages

  • 2 December 2019
  • 78 replies
  • 959 views

Badge +2

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

  1. Go to “Settings”
  2. Go to “Checkout Settings”
  3. Make sure you toggle “Enabled” on the top right corner of your screen
  4. Enter the domain you want to use for your checkout (your landing page domain)
  5. Go to “Create your first product”
  6. Click “Add a test product”
  7. Select whether it’s a one-time purchase or recurring product
  8. Enter product name, currency, and upload image
  9. Click “Done”
  10. Click “Use with Checkout”
  11. 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)
  12. Enter your “Cancel URL”
  13. Copy the embed code and click Done

Step 2. Paste embed code in your Unbounce landing page (style as needed)

  1. Drag and drop Custom HTML widget
  2. Paste embed code and click Save
  3. Position your placeholder
  4. Click Save and then Preview to make sure your CTA Button is positioned where you want it
  5. 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?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


78 replies

Hi Stefano,

My Checkout button doesn’t work in preview as well. And would like to know how you manage to add the product’s quantity selection and different variants right on the landing page with the checkout page based on what variant and quantity they choose. Any help would highly be appreciated.

Thank you for your help,

Is it right that only one button can work per page? I’ve got the top one working and I copy-pasted the same exact code a bit down the page and that button doesn’t work. Any tips?

https://join.riveterworks.com/thebiggamehunter/

You can make the other buttons work by giving them each a different ID.
You need to change it in the html and javascript, examples below.

Reply