Stripe: ERR_BLOCKED_BY_RESPONSE

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.

ERROR

GET https://js.stripe.com/v3/ net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep Cant seem to pass through this.

Index.html

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Store</title>
  <script src="https://js.stripe.com/v3/"></script>
  <script src="script.js" type="module" defer></script>
</head>

Server.js

require("dotenv").config();
const express = require("express");
const app = express();
const items = require("./items.json");
const cors = require("cors");
app.use(express.json());
const stripe = require("stripe")(process.env.STRIPE_PRIVATE_KEY);



app.use(
  cors({
    credentials: true,
    origin: process.env.CLIENT_URL,
  })
);

app.get("/items", (req, res) => {
  res.json(
    items.map((item) => {
      return {
        id: item.id,
        name: item.name,
        price: item.priceInCents / 100,
        purchased: false,

        };
    })

    );
});

app.post("/create-checkout-session", async (req, res) => {
  const item = items.find((i) => i.id === parseInt(req.body.itemId));
  if (item == null) {
    return res.status(400).json({ message: "Invalid Item" });
  }
    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: ["card"],
      line_items: [
        {
          price_data: {
            currency: "usd",
            product_data: {
              name: item.name,
            },
            unit_amount: item.priceInCents / 100,
          },
          quantity: 1,
        },
      ],
      mode: "payment",
      success_url: "https://example.com/success",
      cancel_url: "https://example.com/cancel",
    });

}

app.listen(3000)

Api.js

import axios from "axios";

const apiInstance = axios.create({
  baseURL: process.env.SERVER_URL,
  withCredentials: true,
});
const stripe = require("stripe")(process.env.STRIPE_PUBLIC_KEY);

// export async function downloadAll(email) {
//   return apiInstance
//     .post("/download-all", { email })
//     .then((res) => alert(res.data.message))
//     .catch((res) => alert(res.data.message));
// }

export async function getItems() {
  const res = await apiInstance.get("/items");
  return res.data;
}


export function purchaseItem(itemId) {
  return apiInstance
    .post("/create-checkout-session", {
      itemId,
    })
    .then((res) => {
      return stripe.redirectToCheckout({ sessionId: res.data.id });
    })
    .then(function (result) {
      if (result.error) {
        alert(result.error.message);
      }
    })
    .catch(function (error) {
      console.error("Error:", error);
      alert(error);
    });
}

Answer

On the parcel GitHub repo there is an issue describing the same issue we have. However the issue is closed on 21 Jun 2021, I currently do not see the solution being merged in a PR. Issue #6499

The solution:

In your project folder (in this particular case for the WDS project the client folder) create a .proxyrc.js and put the following code in:

module.exports = function (app) {
  app.use((req, res, next) => {
    res.removeHeader("Cross-Origin-Resource-Policy")
    res.removeHeader("Cross-Origin-Embedder-Policy")
    next()
  })
}

This is working for me. My index.html is now able and allowed in load sources from other domains. There might be another solution in the near future if this is still a parcel bug.

Advertisement

Answer