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

  • 2 December 2019
  • 78 replies
  • 939 views
Jonathan
Badge +2

community
community800×218 7.36 KB

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.

stripe
stripe1920×1080 5.79 MB

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

Ecommerce_Support

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.

html and js

Adriel_Lubarsky

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/

Chai_Bade

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,

Adriel_Lubarsky

Is there a best practice for measuring a conversion every time someone clicks ‘buy’ and gets taken to the stripe checkout page?

Ecommerce_Support

Thanks, this worked great!

Elbert

Thanks, @Stefano.

@Jess Any ideas what’s going on here? Missing conversions issue continues to persist (55 missed). Kinda messing with my numbers. Want to start running some paid traffic, but worried tracking will be thrown off by this bug. Thank you!

Stefano
Userlevel 7
Badge +4

Hi Ron, you’re absolutely right. When we recorded these instructions the product was still in Beta. We’ll make a point to update these in the next few days.

To address your question regarding subscription / promo codes, it appears that Stripe Checkout may not be able to support promo codes at this time - but I am unsure if subscription products would work. If they don’t, you may need to set up stripe using the more traditional method. It would require some development work to have this set up on your landing pages, including hosting some files on your server.

If you can give my team a few days, we’ll re-record these steps, and and the same time we’ll see if we can get this working on subscription-type products.

Stefano
Userlevel 7
Badge +4

Hi Elbert! This might be a great question to run through support - i’m not entirely sure what may be causing your discrepancy here.

Ron_Tremblay1

@Stefano

I’ve created a subscription product in my stripe account, unfortunately, the reference video seems to be outdated.

I can’t use the “standard client account” as this doesn’t allow for subscriptions or coupons, I’m completely stuck.

I’ve talked to another developer I’ve worked with in the past, he was talking about creating an API but is not familiar with unbounce (this doesn’t make me feel confident in utilizing him).

Is there any guidance you can give or suggestions with whom to utilize to accomplish what I need done?

Elbert

Hi @Stefano , thanks again to you and your team for this script. It’s great!

It just went live a few days ago and appears to be running smoothly except one thing. Unbounce seems to be missing some of the conversions.

We’ve had 70+ conversions, but Unbounce has only registered 49 for some reason. Am I missing something with my implementation? (https://backers.reduxwatch.com/thank-you).

Thanks again!

reserve-unbounce-missing
reserve-stripe

Elbert

Thanks Jess!

Jess
Rank
Userlevel 7
Badge +1

… and I’m back! This is a known issue and our developers are currently working on a fix. They’ve removed the chrome extension from our documentation until it’s back up and running (at which point they’ll add it back).

Thanks for flagging that! I’ll keep y’all posted once everything is back to normal! Hopefully it’s resolved quickly.

Elbert

Thanks, Stefano! I installed it!

Jess
Rank
Userlevel 7
Badge +1

Looking into this now! 🏃‍♀️ I’ll update when I hear something

Stefano
Userlevel 7
Badge +4

Hi there!

As long as the success page is on the same domain, you will be good to go.

The Unbounce Page Lookup is my favourite plugin, so make sure to install that for quick edit access to your landing pages.

I do have the Unbounce External Conversion assistant, but you’re right, it is throwing an error for me on the Google Chrome Extension page. Perhaps @Jess can investigate 🔍

Elbert

Hi @Stefano, thank you for checking into this!

Yeah, I don’t know why that redirect is happening, or where it’s coming from! 😲 I gave up for now and disconnected the Kickoff Labs bit for now.

I’m trying to add a conversion tracking goal to the Stripe transaction but I don’t see how I can add the Facebook pixel to the transaction.

Best I could figure out is using the external conversion goal and I just pasted the code snippet into my Shopify success page — same root domain.

Will that work?

In the documentation there’s a link to a Chrome extension Unbounce External Conversion Assistant to ensure that the script is firing properly, but now the extension is dead? @Jess or anyone have a lead on that extension, please?

The only alternative I see is this one: Unbounce Page Lookup — and I see Stefano’s smile on the preview! Is this the same one or replacing the Unbounce one?

Thanks so much!

Stefano
Userlevel 7
Badge +4

Hi Elbert!

Can you confirm there are no redirects on your success page? It appears there is a redirect set up on https://launch.reduxwatch.com/epic.

Elbert

Thanks so much for this tutorial, @Stefano and @Jonathan! Just what I was looking for 👍

I installed it and got it working, but for some reason after completing the test transaction, it kicks me back to the initial landing page after a few second delay on where I want people to land.

I setup a test here: https://backers.reduxwatch.com/restest

After the test Stripe transaction it directs me to the correct success page at: https://launch.reduxwatch.com/epic

But then the browser suddenly redirects to this link?! 😲
http://backers.reduxwatch.com/?redirect=true

Anyone have any ideas why this is happening?

Elbert

Stripe documentation super helpful with updated interface instructions: https://stripe.com/docs/payments/checkout/client

Stefano
Userlevel 7
Badge +4

Hi there!

Feel free to reach me directly through DM. I’ll need your landing page URL 🙂

Usually this happens because you may have not whitelisted your domain.

Cheers!

M

Hello @Stefano @Jonathan, I have the same problem.

After entering the code from Stripe, when I click on the Checkout button, nothing happens.

I sent an email at jonathan@webistry.com

Thanks,

MarieBerwald

It seems that stripe has changed things as the screens that I now see don’t match up with the video that you posted.

I could follow these first 2 steps…
Step 1. Enable checkout and create SKU in Stripe

  1. Go to “Settings”
  2. Go to “Checkout Settings”

But from there on… everything looks different.

Can you confirm if there has been an update on stripe’s end that is making this really hard to follow? I’m just hoping it’s not just me.

Stefano
Userlevel 7
Badge +4

Hi there!

Yes this is possible, you’d need to copy + paste the button and change the button ID on line 6 and line 15. You can add a “2” for example “checkout-button-sku_FrL62erJBYMSXu2”.

Let me know if that helps

Screen Shot 2020-10-26 at 11.13.28 AM
Screen Shot 2020-10-26 at 11.13.28 AM1680×934 162 KB

H

Also, anyone having issues with the button working on mobile?

H

I’m having issues adding multiple buttons to one page, any idea if that’s possible?

Reply


Terms & ConditionsCookie settings