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

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!

Oh no!

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 :slight_smile:

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!

Fantastic :slight_smile:

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.

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


Looks like you fixed the issue, what were you doing?

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

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

Hey @heymr,

Your Thank You pages seem to be on a different domain and the console is throwing up some errors.

Try adding that domain to the list in Stripe and that should fix it.

Best,
Hristian

2 Likes

Thank you , did not realize that URL needs to be added as well.

1 Like

Thanks for addressing this - we’ll add it to our documentation above so it does not get missed!

I added a small note to step 1.11 :slight_smile:

1 Like

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

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

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