Stripe React In Next is "Refused to load the script 'https://js.stripe.com/v3'"

Answered

Atlantic cod posted this in #help-forum

Atlantic codOP

2024-05-30T15:00:21.193Z

Hello everyone, I am experiencing this problem only in production, locally I manage to make my payment tests but as soon as I want to make them in production on my application, the loadStripe(publiStripeKey) is blocked.
How can I fix this please ?

Answered by Atlantic cod

Hello my friend, I finally found the solution, instead of next it was in my reverse proxy where I had to add stripe to the exceptions...
Thank you so much for taking the time to help me!

View full answer

42 Replies

Netherland Dwarf

2024-05-30T15:06:42.534Z

@Atlantic cod is there any more additional error like is that the full error?

@Netherland Dwarf <@569880170740318210> is there any more additional error like is that the full error?

Atlantic codOP

2024-05-30T15:07:51.770Z

yes

Netherland Dwarf

2024-05-30T15:13:18.371Z

How are you loading stripe

In next

Atlantic codOP

2024-05-30T15:14:08.769Z

I tested lots of ways, which work locally but not in production

import Spinner from "@/app/library/components/spinner/Spinner";
import { createStripeCustomer } from "@/app/library/middlewares/middlewareUser";
import { Elements } from "@stripe/react-stripe-js";
import { useEffect, useState } from "react";
import CheckoutForm from "./CheckoutForm";
import getStripe from "./get-stripejs";
import { createSubscription } from "./stripe";

export default function Payment({ dataPlan, dataUser }: { dataPlan: any; dataUser: any }) {
    // const [stripePromise, setStripePromise] = useState<Promise<Stripe | null> | Stripe | null>(null);
    const [clientSecret, setClientSecret] = useState<string>("");
    const [loading, setLoading] = useState<boolean>(true);

    console.log("Payment.tsx");

    useEffect(() => {
        console.log("Payment.tsx useeffect");

        const createPayment = async () => {
            const userStr = await createStripeCustomer(dataUser.email, `${dataUser.name} ${dataUser.surname}`);
            const user = JSON.parse(userStr);
            console.log(user);
            const res = await createSubscription(user.id, "price_1PLvsTG2vVjK01VJW5lQd2Qw", dataPlan.cycle);
            const subscription = JSON.parse(res);
            console.log(subscription);

            // Récupérer le client_secret du payment_intent
            const paymentIntent = subscription.latest_invoice.payment_intent;
            if (!paymentIntent || !paymentIntent.client_secret) return;

            setClientSecret(paymentIntent.client_secret);
            setLoading(false);
        };
        createPayment();
    }, []);

    return (
        <div className="payment">
            {loading && <Spinner text="Loading Stripe Form" />}
            {clientSecret && (
                <>
                    <h2>Paiement</h2>
                    <Elements stripe={getStripe()} options={{ clientSecret, locale: "fr" }}>
                        <CheckoutForm />
                    </Elements>
                </>
            )}
        </div>
    );
}

import { Stripe, loadStripe } from "@stripe/stripe-js";
import { config } from "./stripe";

let stripePromise: Promise<Stripe | null>;
const getStripe = async () => {
    const key = await config();
    if (!stripePromise) {
        stripePromise = loadStripe(key);
    }
    return stripePromise;
};

export default getStripe;

I also try with this :

let stripePromise: Promise<Stripe | null>;
const getStripe =() => {
    if (!stripePromise) {
        stripePromise = loadStripe("pk_test_51.................................");
    }
    return stripePromise;
};

Netherland Dwarf

2024-05-30T15:17:52.080Z

Your using stripe checkout right?

@Netherland Dwarf Your using stripe checkout right?

Atlantic codOP

2024-05-30T15:18:08.175Z

No Stripe Element

Netherland Dwarf

2024-05-30T15:18:44.309Z

Oh ok

Atlantic codOP

2024-05-30T15:22:32.633Z

I don't know if this helps but here is my header

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        remotePatterns: [{ hostname: "lh3.googleusercontent.com" }],
    },
    async headers() {
        return [
            {
                source: "/api/:path*",
                headers: [
                    {
                        key: "Access-Control-Allow-Origin",
                        value: "*", // Set your origin
                    },
                    {
                        key: "Access-Control-Allow-Methods",
                        value: "GET, POST, PUT, DELETE, OPTIONS",
                    },
                    {
                        key: "Access-Control-Allow-Headers",
                        value: "Content-Type, Authorization",
                    },
                ],
            },
            {
                source: "/:path*",
                headers: [
                    {
                        key: "Content-Security-Policy",
                        value: "script-src 'self' 'unsafe-inline' https://js.stripe.com; object-src 'none';",
                    },
                ],
            },
        ];
    },
};

export default nextConfig;

@Atlantic cod Hello everyone, I am experiencing this problem only in production, locally I manage to make my payment tests but as soon as I want to make them in production on my application, the loadStripe(publiStripeKey) is blocked. How can I fix this please ?

B33fb0n3

2024-05-30T15:25:06.577Z

head over to stripe: https://discord.gg/stripe

@B33fb0n3 head over to stripe: https://discord.gg/stripe

Atlantic codOP

2024-05-30T15:25:59.745Z

I went to them first, they told me to ask Next for help...

B33fb0n3

2024-05-30T15:28:11.798Z

lol

@Atlantic cod I went to them first, they told me to ask Next for help...

B33fb0n3

2024-05-30T15:28:44.101Z

would you mind sharing your code via https://paste.gg/ ?
It's very complicated to see all the details here on discord

@B33fb0n3 would you mind sharing your code via https://paste.gg/ ? It's very complicated to see all the details here on discord

Atlantic codOP

2024-05-30T15:29:24.658Z

yes of course

@B33fb0n3 would you mind sharing your code via https://paste.gg/ ? It's very complicated to see all the details here on discord

Atlantic codOP

2024-05-30T15:32:57.656Z

https://paste.gg/p/anonymous/6dfbc861350e450188ad0967abfaa9ef

@B33fb0n3 would you mind sharing your code via https://paste.gg/ ? It's very complicated to see all the details here on discord

Atlantic codOP

2024-05-30T15:34:16.813Z

Thank you very much for taking the time to help me, I just had a sleepless night and I don't understand how to solve this problem

@Atlantic cod Thank you very much for taking the time to help me, I just had a sleepless night and I don't understand how to solve this problem

B33fb0n3

2024-05-30T16:50:55.879Z

Are you able to share this?:

import { stripe } from "@/app/library/stripe";

I couldn't find it

@B33fb0n3 Are you able to share this?: tsx import { stripe } from "@/app/library/stripe";

Atlantic codOP

2024-05-30T18:06:31.590Z

Oh yes sorry this is that :

import Stripe from "stripe";
import { stripeSecretKey } from "./uri";

export const stripe = new Stripe(stripeSecretKey, {
    apiVersion: "2024-04-10",
    typescript: true,
});

https://paste.gg/p/anonymous/a6f7f2b4b8ea4ed39e0a337a085ae7a0

is that ok ?

B33fb0n3

2024-05-30T18:09:26.857Z

yes, thanks! If you need to update your last paste, you can login and update it directly (just if you need it in the future).

Or you can directly share it with 3 `
and then it's a codeblock.

The results are incredible.
2 `:

import Stripe from "stripe";
import { stripeSecretKey } from "./uri";

export const stripe = new Stripe(stripeSecretKey, {
    apiVersion: "2024-04-10",
    typescript: true,
});

3 `:

import Stripe from "stripe";
import { stripeSecretKey } from "./uri";

export const stripe = new Stripe(stripeSecretKey, {
    apiVersion: "2024-04-10",
    typescript: true,
});

----
ok, and the paymentelement does not load. You get this error, right?: https://nextjs-forum.com/post/1245753675373346878#message-1245755565230129172

Atlantic codOP

2024-05-30T18:12:55.054Z

I forgot it was 3 instead of two, excuse me

@B33fb0n3 ---- ok, and the paymentelement does not load. You get this error, right?: https://discord.com/channels/752553802359505017/1245753675373346878/1245755565230129172

Atlantic codOP

2024-05-30T18:13:15.765Z

Yes absolutly

B33fb0n3

2024-05-30T18:13:43.968Z

can we test a little bit?

Atlantic codOP

2024-05-30T18:13:50.272Z

yes ?

B33fb0n3

2024-05-30T18:15:41.013Z

alright. What's the result of this:

const paymentIntent = subscription.latest_invoice.payment_intent;

Atlantic codOP

2024-05-30T18:22:07.991Z

{
"id": "pi_3PMDbeG2vVjK01VJ07H308mD",
"object": "payment_intent",
"amount": 4900,
"amount_capturable": 0,
"amount_details": {
"tip": {}
},
"amount_received": 0,
"application": null,
"application_fee_amount": null,
"automatic_payment_methods": null,
"canceled_at": null,
"cancellation_reason": null,
"capture_method": "automatic",
"client_secret": "pi_3PMDbeG2vVjK01VJ07H308mD_secret_cNbdkK7AU8Pu7Gf1tzb7YKfHo",
"confirmation_method": "automatic",
"created": 1717093302,
"currency": "eur",
"customer": "cus_QCcryoWacWy4NB",
"description": "Subscription creation",
"invoice": "in_1PMDbeG2vVjK01VJ0Yyl0cgo",
"last_payment_error": null,
"latest_charge": null,
"livemode": false,
"metadata": {},
"next_action": null,
"on_behalf_of": null,
"payment_method": null,
"payment_method_configuration_details": null,
"payment_method_options": {
"card": {
"installments": null,
"mandate_options": null,
"network": null,
"request_three_d_secure": "any"
}
},
"payment_method_types": [
"card"
],
"processing": null,
"receipt_email": null,
"review": null,
"setup_future_usage": "off_session",
"shipping": null,
"source": null,
"statement_descriptor": null,
"statement_descriptor_suffix": null,
"status": "requires_payment_method",
"transfer_data": null,
"transfer_group": null
}

B33fb0n3

2024-05-30T18:24:27.012Z

when you generate this paymentintent, what the url of the page? If it's private, send it via dm

Atlantic codOP

2024-05-30T18:25:00.277Z

Yes it is

B33fb0n3

2024-05-30T18:32:30.095Z

thanks! Looks good for me. Let's go further...

hm I am sorry, I have no idea.

B33fb0n3

2024-05-30T18:42:39.670Z

@Atlantic codyou tried this: https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy
?

Like adding the nonce via middleware and then access it inside your page?

Atlantic codOP

2024-05-30T18:43:36.578Z

Oh !!! Not at all, I'll try now thank you

Atlantic codOP

2024-05-30T22:13:50.122Z

Hello my friend, I finally found the solution, instead of next it was in my reverse proxy where I had to add stripe to the exceptions...
Thank you so much for taking the time to help me!

Answer