2

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);
    });
}
4
  • I am currently experiencing the same issue, Is it possible you are working on a bonus project from WDS ;) Your code seems pretty similar to mine at the moment :)
    – Tom Vos
    Aug 5, 2021 at 9:50
  • Yes. Please do share if you find any solution. Stucked since hours :( Aug 5, 2021 at 9:57
  • I did just test without parcel, then the script is loaded perfectly fine. It seems to be a parcel thing though. I'll do some more tests
    – Tom Vos
    Aug 5, 2021 at 9:58
  • if the solution works for you please up vote it :)
    – Tom Vos
    Aug 5, 2021 at 10:25

3 Answers 3

10

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.

3
  • it worked. I need15 reputation to upvote you. But i will do as soon as i get it. Aug 5, 2021 at 12:20
  • No I do not get any errors, I did finish the project. Are you still getting errors, maybe I can help.
    – Tom Vos
    Aug 9, 2021 at 19:12
  • 1
    I have no idea how lucky I was, but this is solving my problem to upgrade my project to parcel 2.0.0-rc.0 now. Thanks. Worked out of the box without any additions. Aug 23, 2021 at 10:42
2

this is how i solved my issue:

<img src="<%= image.thumbnail %>" alt="<%= image.caption %>" title="<%= image.caption %>" class="img-fluid" crossorigin>

only add crossorigin to img tag.

0

@Tom Vos solution was not working for me, but they fixed it in a new version. Use npm i -D [email protected] and it should work.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.