title: How to resolve stripe working on localhost but not on aws
body: <p>i have a gatsby website hosted on aws s3, i implemented a checkout page using the loadstripe function from stripe/stripe-js package. the code works fine on my local machine but when i deploy to s3 i get an error opening the stripe checkout session page.</p>
  <p>below is the code:</p>
  <pre><code>import React, { useEffect, useMemo, useState } from 'react';
  import { toast } from 'react-toastify';
  import { useParams } from '@reach/router';
  import ClipLoader from 'react-spinners/ClipLoader';
  import { navigate } from 'gatsby-link';
  import { loadStripe } from '@stripe/stripe-js';
  import { useStaticQuery, graphql } from 'gatsby';
  import { useQueryParam } from 'gatsby-query-params';
  import Modal from 'react-bootstrap-modal';
  import { getChurch, stripeCheckout } from '../../api/churches';
  import Button from '../Shared/Button';
  import Input from '../Shared/Input';
  import { useSizes } from '../../utils/sizes';
  
  import s from './ChurchPage.module.css';
  import 'react-bootstrap-modal/lib/css/rbm-complete.css';
  
  
  const ChurchPage = () =&gt; {
      const [church, setChurch] = useState(null);
      const [isLoading, setLoading] = useState(true);
      const [isCheckoutLoading, setIsCheckoutLoading] = useState(false);
      const [donateModalOpen, setDonateModalOpen] = useState(false);
      const [donateAmount, setDonateAmount] = useState('');
      const [width] = useSizes();
      const { churchId } = useParams();
      const success = useQueryParam('checkout_session_id');
      const data = useStaticQuery(graphql`
      query {
        selectedCandleIcon: file(relativePath: { eq: &quot;tear-icon.svg&quot; }) {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
          extension
          publicURL
        }
      }
    `);
      const [board, setBoard] = useState([
          Array.from({ length: 16 }).map(() =&gt; 'EMPTY'),
          Array.from({ length: 15 }).map(() =&gt; 'EMPTY')
      ]);
  
      const candlesCount = useMemo(() =&gt;
          board.reduce((result, candles) =&gt; result + candles.filter(candle =&gt; candle === 'SELECTED').length, 0),
          [board]);
  
      const totalPrice = candlesCount * (church ? church.price : 0) + (donateAmount ? +donateAmount : 0);
  
      const handleCandleClick = (i, j, candle) =&gt; {
          if (board[i][j] === 'BUSY') return;
          if (candle === 'SELECTED' &amp;&amp; candlesCount &gt;= 5) {
              toast.warning('You can select only 5 candles');
              return;
          }
          setBoard(prevBoard =&gt; ([
              ...prevBoard.filter((_, k) =&gt; k &lt; i),
              [
                  ...prevBoard[i].filter((_, k) =&gt; k &lt; j),
                  candle,
                  ...prevBoard[i].filter((_, k) =&gt; k &gt; j)
              ],
              ...prevBoard.filter((_, k) =&gt; k &gt; i)
          ]));
      };
  
      const formatPrice = amount =&gt; {
          const formatter = new Intl.NumberFormat('en-US', {
              style: 'currency',
              currency: 'USD',
          });
          return formatter.format(amount);
      };
  
      const checkout = async () =&gt; {
          setIsCheckoutLoading(true);
          const candleIds =
              board.reduce((result, row, rowIndex) =&gt;
                  [...result, ...row.map((_, i) =&gt; i)
                      .filter(i =&gt; row[i] === 'SELECTED')
                      .map(i =&gt; i + (rowIndex !== 0 ? board[rowIndex - 1].length : 0) + 1)
                  ], []);
          // pk_test_VdfEvhaDGI3ir9KV8LzUyWZI for test mode
          // pk_live_AuPkYDkZe6nUIQqEqM4Hctf0 for live mode
          //todo enable stripe buttonxz
  
          const stripe = await loadStripe('pk_live_AuPkYDkZe6nUIQqEqM4Hctf0');
          // const stripe = await loadStripe('pk_live_AuPkYDkZe6nUIQqEqM4Hctf0', {
          //     stripeAccount: church.stripeAccountId
          // });
          const { data } = await stripeCheckout(churchId, candleIds, donateAmount);
          const result = await stripe.redirectToCheckout({
              sessionId: data.id
          });
          if (result.error) {
              toast.error('Oops. Something went wrong. Please try again later');
          }
          return result;
      };
  
      useEffect(() =&gt; {
          getChurch(churchId)
              .then(({ data }) =&gt; {
                  if (!data.enableCandles || !data.payoutsEnabled) {
                      setLoading(false);
                      return navigate('/churches');
                  } else {
                      setChurch(data);
                      let newBoard = []
                      if (churchId == 1) {
                          newBoard = [Array.from({ length: 9 }).map(() =&gt; 'EMPTY'),
                          Array.from({ length: 11 }).map(() =&gt; 'EMPTY'),
                          Array.from({ length: 10 }).map(() =&gt; 'EMPTY')];
                      } else {
                          newBoard = [Array.from({ length: 16 }).map(() =&gt; 'EMPTY'),
                          Array.from({ length: 15 }).map(() =&gt; 'EMPTY')];
                      }
                      // const newBoard = [Array.from({ length: 16 }).map(() =&gt; 'EMPTY'),
                      // Array.from({ length: 15 }).map(() =&gt; 'EMPTY')];
  
                      newBoard.forEach((row, i) =&gt; {
                          row.forEach((_, j) =&gt; {
                              const slot = j + 1 + (newBoard[i - 1] ? newBoard[i - 1].length : 0);
                              if (data.busyCandles.includes(slot)) {
                                  row[j - 1] = 'BUSY';
                              }
                          });
                      });
                      setBoard(newBoard);
                      setLoading(false);
                  }
  
              })
              .catch(() =&gt; {
                  setLoading(false);
                  navigate('/churches');
                  toast.error('Failed to load church. Please try again later');
              })
          // .finally(() =&gt; setLoading(false));
      }, [churchId]);
  
      useEffect(() =&gt; {
          if (success) {
              toast.success('Thanks you!!!');
              // navigate(`/churches/${churchId}`);
          }
      }, [success]);
  
      // console.log(&quot;$$$$$$$$&quot;)
      // console.log(candlesCount, donateAmount, !candlesCount &amp;&amp; !donateAmount, church);
  
      return (
          &lt;div&gt;
              {isLoading &amp;&amp; (church === undefined || church === null) &amp;&amp; (
                  &lt;div className='position-relative church-box'&gt;
                      &lt;div className='d-flex justify-content-center mt-2 mb-2'&gt;
                          &lt;ClipLoader loading size={50} /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              )}
              {!isLoading &amp;&amp; (church !== undefined &amp;&amp; church !== null) &amp;&amp; (
                  &lt;div  className='position-relative church-box'&gt;
                      &lt;img style={{ marginTop: 40, width: '100%' }} className=&quot;bg-img&quot; src={width &lt; 600 ? church.horizontalChurchBackgroundUrl : church.verticalChurchBackgroundUrl} /&gt;
                      &lt;div className=&quot;&quot;&gt;
                          &lt;div className='d-flex justify-content-between col2row'&gt;
                              &lt;div&gt;
                                  &lt;div className='secondarySubTitle'&gt;{church.name}&lt;/div&gt;
                                  &lt;div className='text'&gt;{church.address &amp;&amp; `${church.address}, `} {church.phone &amp;&amp; `${church.phone}, `} {church.email}&lt;/div&gt;
                                  {church.description &amp;&amp; &lt;div className='text'&gt;{church.description}&lt;/div&gt;}
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;Button onClick={() =&gt; setDonateModalOpen(true)}&gt;Donate Church&lt;/Button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className={s.label}&gt;
                              &lt;div&gt;Select your candle location&lt;/div&gt;
                              &lt;div className='font-weight-bold ml-auto'&gt;{formatPrice(totalPrice)}&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className={s.candlesPanel}&gt;
                              {board.map((candles, i) =&gt; (
                                  &lt;div className={s.candlesList}&gt;
                                      {candles.map((candle, j) =&gt; (
                                          &lt;div
                                              className={s.candle}
                                              onClick={() =&gt; handleCandleClick(i, j, candle === 'EMPTY' ? 'SELECTED' : 'EMPTY')}
                                          &gt;
                                              {(candle === 'SELECTED') &amp;&amp; &lt;img src={data.selectedCandleIcon.publicURL} /&gt;}
                                              {(candle === 'BUSY') &amp;&amp; ``}
                                          &lt;/div&gt;
                                      ))}
                                  &lt;/div&gt;
                              ))}
                          &lt;/div&gt;
                          &lt;div className={s.buttonsWrapper}&gt;
                              &lt;div className='mt-auto text'&gt;Candle duration: {church.time} h&lt;/div&gt;
                              &lt;Button
                                  className={s.checkoutButton}
                                  onClick={checkout}
                                  isLoading={isCheckoutLoading}
                                  disabled={!totalPrice}
                              &gt;
                                  PROCEED TO CHECKOUT 
                          &lt;/Button&gt;
                          &lt;/div&gt;
                          &lt;div className={s.noticeText}&gt;All payments go directly to the Church.&lt;/div&gt;
                      &lt;/div&gt;
                      {donateModalOpen &amp;&amp; (
                          &lt;DonateModal
                              donateAmount={donateAmount}
                              onHide={() =&gt; setDonateModalOpen(false)}
                              saveDonateAmount={setDonateAmount}
                          /&gt;
                      )}
                  &lt;/div&gt;
              )}
          &lt;/div &gt;
      );
  };
  
  const DonateModal = ({ donateAmount, onHide, saveDonateAmount }) =&gt; {
      const [donateAmountValue, setDonateAmountValue] = useState(donateAmount);
  
      const saveDonate = () =&gt; {
          saveDonateAmount(donateAmountValue);
          onHide();
      };
  
      return (
          &lt;Modal
              show
              onHide={onHide}
              aria-labelledby='ModalHeader'
          &gt;
              &lt;Modal.Header closeButton&gt;
                  &lt;Modal.Title id='ModalHeader'&gt;Select Donate Amount&lt;/Modal.Title&gt;
              &lt;/Modal.Header&gt;
              &lt;Modal.Body&gt;
                  &lt;Input
                      id='donateAmount'
                      type='number'
                      label='Donate Amount'
                      placeholder='Amount'
                      value={donateAmountValue}
                      onChange={event =&gt; setDonateAmountValue(event.target.value)}
                  /&gt;
              &lt;/Modal.Body&gt;
              &lt;Modal.Footer&gt;
                  &lt;Button
                      onClick={saveDonate}
                  &gt;
                      Enter Donate Amount
                  &lt;/Button&gt;
              &lt;/Modal.Footer&gt;
          &lt;/Modal&gt;
      );
  };
  
  export default ChurchPage;
  </code></pre>
  <p>below is the error i get:</p>
  <p>Something went wrong
  You might be having a network connection problem, or the payment provider cannot be reached at the moment.</p>