#roger_express-csp

1 messages · Page 1 of 1 (latest)

prime sageBOT
#

đź‘‹ Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

đź”— This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1219322447371829388

đź“ť Have more to share? Add more details, code, screenshots, videos, etc. below.

echo elbow
#

hello!

torpid wyvernBOT
echo elbow
#

should i provide you the relevant codes?

ancient latch
#

I don't need the code right now

#

What I need is some more details on what you many by the "checkout form appearing blank" do you have a screenshot?

echo elbow
ancient latch
#

Is this using Checkout Sessions? Something else? Are you getting any errors?

echo elbow
#

this is the only error i am getting
Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

ancient latch
#

You didn't answer my other questions - what specifically are you integrating? You mentioned checkout but does that mean you're using Checkout Sessions? Something else?

echo elbow
#

hello?

ancient latch
#

Sorry I'm helping multiple folks at once

#

Okay so you're using Payment Element - is this in an iframe? Do you have a content security policy on your page?

echo elbow
#

no i am not sure if i have a CSP
how do i check it
i am using MERN stack
and can't find it?

ancient latch
echo elbow
#

i have gone through it but it doesn't help because i don't have any html file to configure CSP
which is why i am in this dicord asking for help

ancient latch
#

Are you sure you don't have a default CSP configured elsewhere in your code? Or are you using some plugin (like Helmet) that configures CSP for you?

echo elbow
#

how do i check it?
i dont have any html file in both client and server side as i am using react and express js with typescript

#

where would be this default CSP?

ancient latch
torpid wyvernBOT
ocean blaze
#

roger_express-csp

echo elbow
#

how do i fix the blank checkout form?

ocean blaze
#

It's going to be hard to say without actionable information, exact code, the logs you see in your JS console, etc.

echo elbow
#

should i provide you the relevant code?

ocean blaze
#

Sure but the first step is for you to add logs and understand what is failing with which exact error

echo elbow
#

the stripe is integrated successfully i feel
because it shows this logs
only thing is checkout form apearing blank

there are no such error expect this error?

Config data:
Object { publishablekey: "pk_test_51Ot9qYSFnkcbQhWSWLgjtoDQWzGTvoE1Sz6u6uu8ulcmmmWdtzvX3rORiyDtP8kbNAlCgiSvMcmeHZ3AiS3bKvtQ00UjrrDXl1" }
CourseDetailsPage.tsx:29:12
Received publishable key: pk_test_51Ot9qYSFnkcbQhWSWLgjtoDQWzGTvoE1Sz6u6uu8ulcmmmWdtzvX3rORiyDtP8kbNAlCgiSvMcmeHZ3AiS3bKvtQ00UjrrDXl1 CourseDetailsPage.tsx:32:14
You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS. v3:1:450078
Partitioned cookie or storage access was provided to “https://js.stripe.com/v3/controller-5c293a300a87a5772aefa8ffe6a3021f.html#apiKey=pk_test_51Ot9qYSFnkcbQhWSWLgjtoDQWzGTvoE1Sz6u6uu8ulcmmmWdtzvX3rORiyDtP8kbNAlCgiSvMcmeHZ3AiS3bKvtQ00UjrrDXl1&stripeJsId=e47541ac-82be-4814-9369-008cae170653&controllerCount=1&stripeJsLoadTime=1710777897476&manualBrowserDeprecationRollout=false&referrer=http%3A%2F%2Flocalhost%3A3000%2Fcourse%2F65f7db2c4ee17999b978b1b6&controllerId=__privateStripeController3081” because it is loaded in the third-party context and dynamic state partitioning is enabled.

Feature Policy: Skipping unsupported feature name “encrypted-media”. main-app.js:2053:22
Feature Policy: Skipping unsupported feature name “encrypted-media”. main-app.js:30025:28
Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

đź“Ž stripe_logs.txt
#

Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

ocean blaze
#

Sure but earlier you talked to my colleague about CSP and CORS and such. Have you made progress there? What's not working exactly? What have you tried, what happens client-side? Are you testing locally on your own machine?
Sorry it's tough to help with just that info

#

The logs you shared are on your server where you create the PaymentIntent. What does your code do next?

#

My advice is to try a simple integration outside of your app first without any CSP or iframes to get familiariazed with the product first

echo elbow
#

i am testing it locally on my machine, no the CSP error still exists

ocean blaze
#

sure but that comes from your own website/app. That's something only you can debug as the developer owning the app I would say

#

As far as I can tell Stripe.js loaded fine though

echo elbow
#

my issue did not got fixed
is there anyone in stripe ?
who knows anything about MERN?

ocean blaze
#

@echo elbow I['m sorry but you are giving no information at all to help you right now. Please share actionable information about what you are seeing and trying. Right now it boils down to "my code fails, help"

echo elbow
#

these are the relevant codes
this is the error in my console
Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). utils.js:42:10
Content-Security-Policy: The page’s settings observed the loading of a resource at inline (“script-src”). A CSP report is being sent.
and in my network tab
it have this domain https://r.stripe.com/b have the request body without any response body
please tell me what went wrong
i have everything
why the checkout form is empty?

đź“Ž order.controller.txt đź“Ž order.route.txt đź“Ž orderApi.txt đź“Ž checkoutform.txt đź“Ž Course-Access_page.txt đź“Ž CourseContent.txt đź“Ž CourseDetails.tsx.txt đź“Ž CourseDetailsPage.txt
ocean blaze
#

I'm sorry you are dumping hundreds of lines of code on me. I need you to ask for clear help. You are the developer writing all the code here. Stripe's code is likely a few dozens lines at most spread between server and client.

The first step is for you to explain exactly what you are doing. There are dozens of ways to integrate Stripe.
You are the developer, you should be able to write an extremely simple app that has a back end to create a PaymentIntent and then client-side render PaymentElement, without anything else from your own application/website for now/

This really is the best next sterp as you seem thoroughly lost and I can't just read hundreds of lines of code across multiple files to help you

#

I see you include <PaymentElement..> but without much more details. Where is the client_secret being passed for initialization for example? Really try to simplify your code to solely have Stripe and nothing else

echo elbow
#

In the CheckOutForm component, the <PaymentElement> component is used from @stripe/react-stripe-js to handle the payment element rendering. However, the client_secret is not explicitly passed as a prop to the <PaymentElement> component. Instead, the stripe.confirmPayment method is used to confirm the payment, which internally handles the passing of the client_secret to Stripe for payment processing.

ocean blaze
#

Okay so are you using the defer intent flow where you initialize PaymentElement without any PaymentIntent or client_secret?
Like which exact end to end doc are you following?

echo elbow
#

No, the defer intent flow, where you initialize PaymentElement without specifying a PaymentIntent or client_secret, is not being used in the provided code.

In the CheckOutForm component, the PaymentElement component is rendered within the form. However, the PaymentElement is used in conjunction with the stripe.confirmPayment method, which requires a PaymentIntent object containing the client_secret to confirm the payment.

https://docs.stripe.com/payments/payment-element

#

i am using the github code for checkout from this docs?

ocean blaze
#

Okay we're making some progress. How exactly are you initializing PaymentElement? Where exactly do you pass the right options like amount and currency?

torpid wyvernBOT
echo elbow
#

the PaymentElement is initialized indirectly through the useElements hook, and the amount and currency options are set during the creation of the payment intent, which is handled separately, in the backend
the correct options like amount and currency are passed when creating a new payment using the Stripe API. Specifically, in the newPayment controller function, the payment intent is created using stripe.paymentIntents.create() method. Here's how it's done:
The amount is taken from the request body, which is presumably sent from the client-side with the desired payment amount.
The currency is hardcoded as "USD".
Other metadata or options like metadata and automatic_payment_methods are also included.

Once the payment intent is created successfully, the client_secret of the payment intent is returned in the response. This client_secret is then used on the client-side to confirm the payment and complete the checkout process

ocean blaze
#

my colelague @pure sierra will take over. What we need is you to provide your exact code please for that specific part

echo elbow
#

{stripePromise && clientSecret && (
<Elements stripe={stripePromise} options={{ clientSecret }}>
<CheckOutForm setOpen={setOpen} data={data} user={user} />
</Elements>
)}

export const sendStripePublishableKey = catchAsyncError(
async (req: Request, res: Response) => {
res.status(200).json({
publishablekey: process.env.STRIPE_PUBLISHABLE_KEY,
});
}
);

// new payment
export const newPayment = catchAsyncError(
async (req: Request, res: Response, next: NextFunction) => {
try {
const myPayment = await stripe.paymentIntents.create({
amount: req.body.amount,
currency: "USD",
metadata: {
company: "E-Learning",
},
automatic_payment_methods: {
enabled: true,
},
});
res.status(201).json({
success: true,
client_secret: myPayment.client_secret,
});
} catch (error: any) {
return next(new ErrorHandler(error.message, 500));
}
}
);

<form id="payment-form" onSubmit={handleSubmit}>
  <LinkAuthenticationElement id="link-authentication-element" />
  <PaymentElement id="payment-element" />
  <button disabled={isLoading || !stripe || !elements} id="submit">
    <span id="button-text" className={`${styles.button} mt-2 !h-[35px]`}>
      {isLoading ? "Paying..." : "Pay now"}
    </span>
  </button>
  {/* Show any error or success messages */}
  {message && (
    <div id="payment-message" className="text-[red] font-Poppins pt-2">
      {message}
    </div>
  )}
</form>

);
};

pure sierra
#

Gotcha, and what is that form within on your page? Like does that modal use an iframe which points to your payment element page?

echo elbow
#

a custom checkout form for processing payments using Stripe. It is not using an iframe that points to a separate payment element page. Instead, the form likely integrates directly with Stripe's API to handle payment processing.

#

Modal Trigger: The modal is triggered when the "Buy Now" button is clicked on the course details page.

Custom Checkout Form: The modal contains a custom checkout form (CheckOutForm) that is responsible for collecting payment details from the user.

Integration with Stripe API: The custom checkout form likely integrates with the Stripe API using the @stripe/react-stripe-js library. This integration allows the form to securely collect payment information, such as credit card details, and interact with Stripe's backend services.

Dynamic Payment Intent: Before displaying the form, a payment intent is created on the server-side using the Stripe API. The client-side form receives the client_secret for this payment intent, which is used to securely confirm the payment.

Stripe Elements: The PaymentElement component from @stripe/react-stripe-js is used within the custom checkout form to securely collect payment information, such as credit card details, using Stripe Elements. This component ensures that sensitive payment data is handled securely without the need for iframes.
pure sierra
#

If you make a page that is just your component that has the payment element, does it still get the same error?
If so, I did find a doc about what CSP headers Stripe.js needs to be able to be used properly. Unfortunately I am not sure how specifically to set them with your specific setup, but there should be guides for whatever system or framework that you are using on the web in general. https://docs.stripe.com/security/guide?csp=csp-js

#

If it gets a different error or the CSP change doesn't help, I am happy to look in to that error as well

echo elbow
#

where do i put this line in my code?
script-src, htt://js.stripe.com, htt://maps.googleapis.com

pure sierra
echo elbow
#

i am using next.js

pure sierra
#

Unfortunately we don't know much about next.js on this server but if you look up how to set a CSP header with next.js there will likely be helpful tutorials here.

echo elbow
#

should i manually make one index.html file and add those lines?

pure sierra
#

I only know that these headers need to be set, unfortunately I do not know how to set them for your system. That could be worth trying but unfortunately I do not know for sure how any of these header things should work in your specific system

echo elbow
#

now what should i do?

pure sierra
#

Not sure, did you change the CSP header? Or are you still figuring out how to do that?

#

And if you did change it, did that change the error that you are seeing?

echo elbow
#

don't know how to change it

pure sierra
#

Unfortunately as mentioned earlier, I cannot help with that. We know what headers need to be set, but that can mean a lot of things across a lot of different systems, so it is on you to understand your system and how to set this.
It is like when we list out our IPs to make sure your firewall doesn't block them. We know which IPs need to not be blocked, but we don't know how to set that on all firewalls, so it is on the network admin to look in to how to whitelist IPs and go from there.

echo elbow
#

oww