#uri-easter_best-practices

1 messages · Page 1 of 1 (latest)

vestal roseBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can 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/1257396482584088606

📝 Have more to share? Add details, code, screenshots, videos, etc. below.

quaint hazel
#

I like your crow photo

#

Very elegant

#

Is that crow one of your pets? Or is it because you really like crows?

marsh dome
#

Hi there, apologies for the delay. I meant to circle back to this, but the server is busy.

Cannot find module 'next/dist/compiled/next-server/pag
Require stack
Can you paste the full error message here?

#

P.S. Thanks for the crow mention. I just dig crows

quaint hazel
#

You're very welcome. Hahaha.

#

And you got it!

marsh dome
quaint hazel
#

I am trying to use FPX payments using react. Right now I am using this as a demo, but I am planning to use Stripe in two other projects. I plan to do so on developer mode to show I can get a working model going.

marsh dome
#

What payment surface do you want to use? Checkout? Elements? etc.

vestal roseBOT
quaint hazel
#

Following the tutorial, I am thinking more like a checkout form.

#

That above is what the tutorial looks like

#

This is what I will modify:

image.png
#

basically, I will create my own checkout form, and place it within that modal to conditionally render a success note, or an error message.

hallow cargo
#

Hello, two-shoes had to step out but I can help. Catching up in this thread

quaint hazel
#

Okay. Thank you! I appreciate you.

hallow cargo
#

I am having trouble finding info on this but I am still looking.

#

It is really unfortunate that the error message paths keep getting clipped like that. Trying to think of whether there is a way to get the full path which may be helpful in diagnosing this

quaint hazel
#

yes it is. I would give more, but that is the full error I am getting.

honest garden
#

👋 this looks like a local config problem

#

Can you check in .next/server/pages/ to see if you see anything there?

quaint hazel
#

Will do

#

I see "_app.js","_document.js", "_error.js", and "index.js"

#

any particular one I should choose?

honest garden
#

Yep what is in _document.js?

#

That is what the SO above mentions

#

Honestly I'm not very familiar with Next.JS so I don't really know the intricacies here

#

But hopefully we can piece it together

quaint hazel
#

Me neither @honest garden. This example uses it, so I am trying to follow along, but I am more of a standard react man myself.

honest garden
#

Is there any particular reason you want to follow this example?

#

Like it is from ~4 years ago

#

You would be much better off following something more recent (like our docs) and building a project in a framework that you are familiar with....

#

The likely culprit of your errors are either weird Next.JS minutaie which we likely will have a hard time figuring out, or more likely just environmental incompatibilities since this sample is so old

#

That is a working sample and will be much easier here

quaint hazel
#

I suppose I was following the video because it is the smallest workign example I could think to replicate.

honest garden
#

Gotcha, I'd recommend instead using the sample I provided above

quaint hazel
#

I am testing it

#

Could not find a required file.
Name: index.html

honest garden
#

It is looking for index.html within the public folder

#

Did you download the code from the docs page directly?

#

Or are you dropping into your own project?

quaint hazel
#

I was dropping into a new project.

honest garden
#

Then yeah you need to mirror the expected format dependent on your react and server config

#

Are you using node with Express?

#

If so, then likely you have app.use(express.static("public"));

#

Try putting your index.html folder within a public directory

#

Or change app.use(express.static("public")); to . instead of public

quaint hazel
#

Okay, I downloaded the tutorial and got it to work that way. When thinking about using this logic as a checkout form, how would you go about it?

honest garden
#

I'm not sure what you mean by that?

quaint hazel
#

On the left is the website where I am wanting to place a checkout form in the modal.

#

Practically, I could probably refactor the code to use the same payment fields, and have the "order" button be the "pay now" button.

honest garden
#

Yeah I mean with Elements you render them into your own UI and then you customzie from there

#

And yes, you rig up your own "pay" button to use with that

quaint hazel
#

But is what I am thinking the best way to simulate a payment processing on the front end, and then seeing the the simulated payment info in my stripe account?

honest garden
#

Yep

quaint hazel
#

Okay, let me test that real quick. I have one of my test keys handy.

#

So this is an old account:

#

Way back in 2022, I was able to follow a tutorial and get what appeared to be payment confirmation working on the back end.

#

But not on front end and back end at the same time.

honest garden
#

The docs and sample I provided above have everything you need for both frontend and back end

quaint hazel
#

For this new project, nothing has gone through

honest garden
#

Are there errors?

#

Like you need to do some troubleshooting on your end... I can't walk you through everything here

#

You need to look both in your web console

#

And in your server console

quaint hazel
#

Sorry if my problem is a little difficult. This is why I started with the specific tutorial. I was hoping it would show me how to do the specific request of showing payments processing on the backend, while also taking relevant data from the front end.

honest garden
#

Yep so looks related to an issue with the data you are getting back from your server

#

It isn't that it is difficult, it is that you are the developer here and need to build and debug your own integration

#

We are happy to help with specific questions you have, but we don't build your integration for you.

quaint hazel
#

I appreciate the respect. I do not want it built for me, but I guess I do want to understand concisely what is missing to make this successful. I know how to get the payment to process on the backend so that it shows in Stripe. I also know how to simulate payment on the front end. But I guess I am lacking an example to show how both work together.

#

I have done research, and will continue to do so, but might you know of some resources that more adequately suit the solution I have been researching?

honest garden
#

What do you mean by that though? When you collect a payment method via Elements you do so on the frontend, and you create a PaymentIntent via the backend to be used with that collected payment method.

#

What you are doing right now is the most straightforward (custom) integration. So I'm not really sure what you mean by "lacking an example to show both working together"... you just need to fix your code by troubleshooting the errors that are arising while you are testing here.

quaint hazel
#

Actually Bismarck, I think I am beginning to understand. You are brilliant!

#

Troubleshooting to where my error was two years ago, I think I go the backend info using paymentIntents

#

The tutorial I brought to start this chat uses it, and the example you provided me uses it.

honest garden
#

👍

quaint hazel
#

"When you collect a payment method via Elements you do so on the frontend, and you create a PaymentIntent via the backend to be used with that collected payment method."

honest garden
#

That talks a bit more about the step-by-step here

quaint hazel
#

Thank you so much Bismarck! reading it now!

vestal roseBOT
quaint hazel
#

Yes, I think this is exactly what I needed today. It goes over exactly what was in that tutorial. I know it was very time-consuming to share that information with me. Is there any way I can repay you with a survey or something to that effect?

honest garden
#

Glad that's what you need!