3

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

Improve this question
1
  • 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
    Commented Nov 23, 2022 at 5:28

3 Answers 3

Reset to default
10

For anyone seeing this in the future:

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

Improve this answer
3
  • excellent. I use Brave and it was blocking my stripe test request
    – Will
    Commented Mar 14, 2023 at 2:04
  • In my case it was Privacy Badger. But anyway in most cases its probably a browser addon.
    – ninjaxelite
    Commented Mar 28 at 12:40
  • In my case. I have uBlock Origin, Privacy Badger, AdBlock. I tested all three and it was happening for uBlock Origin. But when AdBlock and Privacy Badger is on there is no error. Is there any specific reason for that?
    – Thakur Saad
    Commented Jun 5 at 13:52
1

v3:1 You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.

This is just a warning for using the Stripe functions over a non HTTPS connection and lets you know that HTTPS is required for Stripe actions that use real data. You can run tests over HTTP just fine, creating subscriptions, creating customers, attaching payment methods, etc.

To the other comment about process.env.stripe_api_key exposing your secrets in the browser I have to disagree. I'm pretty sure environment variables used like const mykey = process.env.MY_API_KEY; are not loaded into the browser.

However, you need to make sure you configure your .env file and not uploaded anywhere, as it has all the string values of your keys/variables that you put there, by updating your .gitignore file.

Example .gitignore:

#local env files
.env

#secrets
/secrets
Improve this answer
New contributor
Ben is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
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

Improve this answer
2
  • Can you provide more info for "process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY" and in what way is this not secure please?
    – Webkraft Studios
    Commented Apr 10, 2023 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
    Commented Apr 13, 2023 at 16:03

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