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

44 messages · Page 1 of 1 (latest)

swift scroll
#

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 ?

keen mulchBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

reef folio
#

@swift scroll is there any more additional error like is that the full error?

swift scroll
reef folio
#

How are you loading stripe

#

In next

swift scroll
#

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; };

reef folio
#

Your using stripe checkout right?

swift scroll
reef folio
#

Oh ok

swift scroll
#

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;
``

astral verge
swift scroll
astral verge
#

lol

astral verge
swift scroll
swift scroll
swift scroll
astral verge
#

I couldn't find it

swift scroll
#

is that ok ?

astral verge
#

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,
});
swift scroll
#

I forgot it was 3 instead of two, excuse me

swift scroll
astral verge
#

can we test a little bit?

swift scroll
#

yes ?

astral verge
#

alright. What's the result of this:

const paymentIntent = subscription.latest_invoice.payment_intent;
swift scroll
#

{
"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
}

astral verge
#

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

swift scroll
#

Yes it is

astral verge
#

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

#

hm I am sorry, I have no idea.

#

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

swift scroll
#

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

swift scroll
#

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!