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

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 👍

Just bumping this up for @Stefano – have you had mobile/desktop issues in the past like this? 🤔

and you can measure the sales from each variant in Unbounce?

Do you know if this will work with a stripe subscription as well instead of just a one time charge?

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.

Jonathan ~ I don’t see a version for HTML code. Of the options given, which would I use? Thanks, Niki

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.
https://join.vertellis.nl/testing/
https://join.vertellis.nl/test-for-stripe-checkout/

Would appreciate your insights!

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.
Thanks again, @Stefano!

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 Stefano, thank you, that worked! Is it possible to add multiple prices to the one button?

Hi,

The checkout button is not working on my page.
Can anyone help me to solve the issue?

Page link: http://www.botvo.io/

Thank you

image1823×849 57.4 KB

image1817×847 51.5 KB

image1439×863 57.1 KB

Having a similar issue where button is not working on the live page, can someone advise?

Screen Shot 2020-10-19 at 1.08.38 PM2318×1166 284 KB

Screen Shot 2020-10-19 at 1.07.47 PM1534×669 177 KB

    <!-- 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>