Custom Stripe Code Snippet Not Working

Site URL: http://www.kilohanaconsulting.com/test

Hello,

Squarespace does not allow tax exemption on particular products so I'm trying to use a workaround where I just direct people through Stripe checkout.

Using Stripe, I have created the code snippet below. I created a simple test page with a code injection block and that code: http://www.kilohanaconsulting.com/test. However, the checkout button doesn't redirect upon click. Any ideas?

Thanks!

<!-- 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:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
  id="checkout-button-price_1I3TbCGnshx2TCYrnAcW1HCT"
  role="link"
  type="button"
>
  Checkout
</button>

<div id="error-message"></div>

<script>
(function() {
  var stripe = Stripe('pk_live_NglqNclDqUqmbRGTpR8cUrmz00U4WqUg7y');

  var checkoutButton = document.getElementById('checkout-button-price_1I3TbCGnshx2TCYrnAcW1HCT');
  checkoutButton.addEventListener('click', function () {
    /*
     * When the customer clicks on the button, redirect
     * them to Checkout.
     */
    stripe.redirectToCheckout({
      lineItems: [{price: 'price_1I3TbCGnshx2TCYrnAcW1HCT', 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 + '//kilohanaconsulting.com/success',
      cancelUrl: window.location.protocol + '//kilohanaconsulting.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>

The error from your code is directing you to read Stripe's Integration Security Guide. I would recommend reading that and see if any of it makes sense to you. It's possibly something you need to handle on their end.

Thanks for the reply @tazmeah. So the error I was getting with the code was:

Uncaught IntegrationError: successUrl must start with either http:// or https://

After talking with Stripe, we found out that it was the "window.location.protocol" from the successUrl and the cancelUrl that was causing the button not to work. After removing that and adding "https:" to the urls , the button worked like a charm.

Couple of other things to keep in mind. Make sure you are using the live public key, the domain you are working with is added in Stripe. That's it!

The Stripe rep said he will follow up on why the generated snippet from Stripe excludes the https: and includes "window.location.protocol". Will report back if there is anything important there.

Here is the answer from Stripe regarding the windows location portocal

"Thanks for contacting Stripe support. I understand that you had an issue where an error occurred for the checkout due to the code being generated not containing the HTTPS protocol. I have looked into this and can advise that the code generated is directly affected by the 'business website' input in your account settings. So if HTTPS is not included in your business address, it will not be included in the generated URL snippet.

I see that to fix the issue, you included the HTTPS directly into the code and removed the 'window.location.protocol' section of the code. As the window.location.protocol object would return either HTTPS or HTTP from your business address, it is not required if you are directly inputting the protocol into the code, the outcome is as expected. "