1

I'm trying to use stripe library in my project and upon setting it up I encounter some error and warning in my console

I added this 2 line of code

import { loadStripe } from "@stripe/stripe-js"; const stripePromise = loadStripe(process.env.stripe_public_key);

And the error and warning are like this in console:

v3:1 You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS. POST https://m.stripe.com/6 net::ERR_BLOCKED_BY_CLIENT

Is this normal? I haven't trying anything yet because I'm also new at nextjs and stripe

Leigh
  • 11
  • 2
  • Did you read the error? You either need to deal with it being HTTP in development or use a proxy (ngrok, cloudflared, etc.) to make it HTTPS in development. Once you're in production, it will be in HTTPS if you set it up right (usually will automatically be done, depending on where/how you host it) – Samathingamajig Nov 23 '22 at 05:28

2 Answers2

3

For anyone seeing this in the future:

It might be a conflict with your adblock: user nmaier explanation here

Dev
  • 54
  • 5
0

This might help as it exposes the api key to frontend. Its not secure but will solve the problems. process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY

Thearcane
  • 59
  • 8
  • Can you provide more info for "process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY" and in what way is this not secure please? – Webkraft Studios Apr 10 '23 at 10:17
  • When you use `NEXT_PUBLIC` it exposes your `API KEY` to the frontend so, anybody can go to sources tab in chrome and get your `API KEY`. But, you can protect this by restricting the request from your domain only. – Thearcane Apr 13 '23 at 16:03