title: Stripe: ERR_BLOCKED_BY_RESPONSE
body: <p>I'm  getting error function redirectToCheckout doesn't exist. But when I try adding stripe in script tag. It displays this error. This error is happening on stripe script tag in index.html. But even after adding this script tag redrirectToCheckoutout is not a function error still exists.</p>
  <p><strong>ERROR</strong></p>
  <pre><code>GET https://js.stripe.com/v3/ net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep Cant seem to pass through this. 
  </code></pre>
  <p><strong>Index.html</strong></p>
  <pre><code>&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
    &lt;title&gt;Store&lt;/title&gt;
    &lt;script src=&quot;https://js.stripe.com/v3/&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;script.js&quot; type=&quot;module&quot; defer&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  <p><strong>Server.js</strong></p>
  <pre><code>require(&quot;dotenv&quot;).config();
  const express = require(&quot;express&quot;);
  const app = express();
  const items = require(&quot;./items.json&quot;);
  const cors = require(&quot;cors&quot;);
  app.use(express.json());
  const stripe = require(&quot;stripe&quot;)(process.env.STRIPE_PRIVATE_KEY);
  
  
  
  app.use(
    cors({
      credentials: true,
      origin: process.env.CLIENT_URL,
    })
  );
  
  app.get(&quot;/items&quot;, (req, res) =&gt; {
    res.json(
      items.map((item) =&gt; {
        return {
          id: item.id,
          name: item.name,
          price: item.priceInCents / 100,
          purchased: false,
  
          };
      })
  
      );
  });
  
  app.post(&quot;/create-checkout-session&quot;, async (req, res) =&gt; {
    const item = items.find((i) =&gt; i.id === parseInt(req.body.itemId));
    if (item == null) {
      return res.status(400).json({ message: &quot;Invalid Item&quot; });
    }
      const session = await createCheckoutSession(item);
      console.log(session.id);
    res.json({ id: session.id });
  });
  
  function createCheckoutSession(item) {
     return stripe.checkout.sessions.create({
        payment_method_types: [&quot;card&quot;],
        line_items: [
          {
            price_data: {
              currency: &quot;usd&quot;,
              product_data: {
                name: item.name,
              },
              unit_amount: item.priceInCents / 100,
            },
            quantity: 1,
          },
        ],
        mode: &quot;payment&quot;,
        success_url: &quot;https://example.com/success&quot;,
        cancel_url: &quot;https://example.com/cancel&quot;,
      });
  
  }
  
  app.listen(3000)
  </code></pre>
  <p><strong>Api.js</strong></p>
  <pre><code>import axios from &quot;axios&quot;;
  
  const apiInstance = axios.create({
    baseURL: process.env.SERVER_URL,
    withCredentials: true,
  });
  const stripe = require(&quot;stripe&quot;)(process.env.STRIPE_PUBLIC_KEY);
  
  // export async function downloadAll(email) {
  //   return apiInstance
  //     .post(&quot;/download-all&quot;, { email })
  //     .then((res) =&gt; alert(res.data.message))
  //     .catch((res) =&gt; alert(res.data.message));
  // }
  
  export async function getItems() {
    const res = await apiInstance.get(&quot;/items&quot;);
    return res.data;
  }
  
  
  export function purchaseItem(itemId) {
    return apiInstance
      .post(&quot;/create-checkout-session&quot;, {
        itemId,
      })
      .then((res) =&gt; {
        return stripe.redirectToCheckout({ sessionId: res.data.id });
      })
      .then(function (result) {
        if (result.error) {
          alert(result.error.message);
        }
      })
      .catch(function (error) {
        console.error(&quot;Error:&quot;, error);
        alert(error);
      });
  }
  </code></pre>