Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom Stripe Code Snippet Not Working


jianliu86

Question

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>

 

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 handl

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

3 answers to this question

Recommended Posts

  • 0

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.

 

 

Link to post
  • 0

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. "

Edited by jianliu86
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...