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) Commented Nov 23, 2022 at 5:28

4 Answers 4

Reset to default
15

For anyone seeing this in the future:

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

excellent. I use Brave and it was blocking my stripe test request
In my case it was Privacy Badger. But anyway in most cases its probably a browser addon.
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?
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

Comments

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 Comments

Can you provide more info for "process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY" and in what way is this not secure please?
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.
0

Few main things could cause this issue.

  1. Disable your AD-BLOCKER for your local domain(http://localhost:8080/). Advance Adblockers are blocking tracking events.such as GTM tags and etc. ADBLOCKER identify stripe as a tracker and blocks it because stripe tracks the user for security purposes. List item
  2. Make sure in your FE(Frontend) side local config you have setup the stripe keys.
  3. Make sure your BE(Backend) is listening to correct testing environment. if you are using dot net make sure your user secrets are same as listener.
Improve this answer

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.