#Slush-GettingItem.Net
mild mural
Hi, can you provide more details here? What is the specific quickstart you're referencing?
mild mural
Can you share the reference document you're using?
mild mural
I'm trying to replicate what you're seeing on my end, this might take some time - thank you for your patience
glass light
Thanks
lapis prism
Hello! I'm taking over and catching up...
Looks like you linked to the .NET guide, but your screenshot is of Node.js code. Can you confirm you're using Node.js and not .NET?
Or is that your frontend code? You're saying your .NET code isn't getting the items array as expected?
lapis prism
If you expand the other disclosure triangle in your screenshot from the dev tools what does it show?
glass light
lapis prism
I mean, what you're seeing is expected given the code you shared. The code you're using is defining an object with two properties, but both of those properties have the same name (id), so the last value assigned is getting used.
If you want the object to have two different properties you need to give them different names.
Or you can put more than one object in the array.
For example: const items = [{ id: "1", another: "2"}]; or const items = [{ id: "1"}, {id: "2"}];
Are you expecting two objects or a single object with two properties in your backend code?
lapis prism
Happy to help! 🙂
glass light
I also have 1 more question
Value: null
console.log("Value:", document.getElementById("stripe-payment"))```Why is that null?
lapis prism
That usually means there's no element on the page with an id attribute set to stripe-payment. What HTML element are you... oh, you just shared a screenshot... yeah, there's no element on that page with id="stripe-payment". Which element are you trying to reference?
glass light
Sorry
I meant payment-form
Im trying to do document.getElementById("payment-form").display.style = "none"
to hide the payment element
But its still not hiding
lapis prism
Yeah, that won't work, because there's no element on that page with an id of payment-form.
Try document.getElementById("payment-element").display.style = "none"
Although document.getElementById("payment-element").hidden = true might be better, but it depends on what you're doing.
Oh, wait, sorry, there is an element with payment-form.
But yeah, try the .hidden = true variant instead.
So document.getElementById("payment-form").hidden = true
glass light
Yes!
That worked
Thank you!!!
Youre the man!
The support team at stripe is honestly unbelievable
How long have yall had a support team on discord for?
lapis prism
We've been on Discord since June of 2021, but we were on IRC (Internet Relay Chat) for years prior to that.
lapis prism
The Payment Element doesn't display the price, that's something you would do on your own page.
lapis prism
Typically you set the amount when you create the Payment Intent. Can you tell me more about what you're trying to do?
lapis prism
What are you trying to build?
glass light
In my CalculateOrderAmount function
I am connecting to my DB which returns the tournament cost.
But if there is some sort of error it also returns "Error" in which case I have it set the value of the return to a negative number so that the payment intent doesnt go through.
What would be the better way of doing this?
lapis prism
There are several approaches; it really depends on how the rest of your integration works. What do you want the customer to see if you hit an error here?
glass light
"There was an error"
lapis prism
And this code is being called when your frontend hits your create-payment-intent URL, right?
glass light
Yes
Its being called here:
{
//StripeConfiguration.ApiKey = "sk_test_XXX";
var paymentIntentService = new PaymentIntentService();
var paymentIntent = paymentIntentService.Create(new PaymentIntentCreateOptions
{
Amount = CalculateOrderAmount(request.Items),
Currency = "usd",
Metadata = new Dictionary<string, string>
{
{ "TournyID", "6735" },
{ "PlayerID", "6735" },
{ "PartnerID", "6735" },
},
AutomaticPaymentMethods = new PaymentIntentAutomaticPaymentMethodsOptions
{
Enabled = true,
},
});
return Json(new { clientSecret = paymentIntent.ClientSecret });
}```Amount = CalculateOrderAmount(request.Items),
lapis prism
Most people in this situation would refactor this function to throw an exception if something goes wrong calculating the price. Then, when you call the function, you can wrap it in a try/catch and handle the error gracefully, then respond to the frontend request with a response with an error, then display an error to the customer.
glass light
So should I wrap the entire inside of the create function with a try/catch?
Here ill show you what I was thinking about doing:
lapis prism
Okay.
glass light
{
//StripeConfiguration.ApiKey = "sk_test_XXX";
var paymentIntentService = new PaymentIntentService();
try
{
var paymentIntent = paymentIntentService.Create(new PaymentIntentCreateOptions
{
Amount = CalculateOrderAmount(request.Items),
Currency = "usd",
Metadata = new Dictionary<string, string>
{
{ "TournyID", "6735" },
{ "PlayerID", "6735" },
{ "PartnerID", "6735" },
},
AutomaticPaymentMethods = new PaymentIntentAutomaticPaymentMethodsOptions
{
Enabled = true,
},
});
return Json(new { clientSecret = paymentIntent.ClientSecret });
}
catch(Exception ex)
{
return ????;
}
}```But I am not sure what to return if there is an error.
lapis prism
Yeah, that should work. You can return JSON that includes an error property that contains an error message to display to the customer if you want.
glass light
If you can tell me what I need to return on the catch statement to have stripe just throw a generic error message then Ill be good to go
lapis prism
Then on your frontend check to see if there's an error and, if there is, display it.
glass light
if (error.type === "card_error" || error.type === "validation_error") {
showMessage(error.message);
}
Like I see that on the frontend.
How can i create an error type and error message for this specifc return?
lapis prism
Yeah, you can expand on that logic and add your own error type if you want.
glass light
Can you give me an example of a return statement?
lapis prism
You could have your catch block return JSON like { "error": { "type": "server_error", "message": "There was an error" } } then look for that error type in your frontend code's logic.
glass light
So my catch return would be this:
return "{ "error": { "type": "server_error", "message": "There was an error" } }"
just alter it to my liking?
lapis prism
I'm not sure that will work in .NET as-is. You would likely need to do the Json() thing like you're doing with the Payment Intent's client secret.
But that's the JSON the code should produce.
glass light
Awesome I think Igot it.
Rubeus, thank you so much for your help
I appreciate it a ton!
lapis prism
No problem! 🙂
glass light
Hey
I got this error:
Uncaught (in promise) IntegrationError: In order to create a payment element, you must pass a valid PaymentIntent or SetupIntent client secret when creating the Elements group.
e.g. stripe.elements({clientSecret: "{{CLIENT_SECRET}}"})
at $n ((index):1:226825)
at lr ((index):1:233948)
at new n ((index):1:238597)
at e.<anonymous> ((index):1:242379)
at e.create ((index):1:130338)
at initialize (TournamentPayment:123:45)
lapis prism
You need to take the client secret you get from your server and use it in place of {{CLIENT_SECRET}} (that's just a placeholder).
glass light
Backend or frontend?
This all the sudden started happening after i included that try catch
glass light
I think no error
Let me debug 1 sec
When an error is happening
return Json("{ "error": { "type": "server_error", "message": "Enter in your partners email not your own." } }");
Im returning that
lapis prism
In your frontend code, when you get an error back and no client secret, you should not attempt to initialize Stripe Elements or create a Payment Element.
glass light
Isnt it doing that by default?
e.preventDefault();
setLoading(true);
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
return_url: "https://localhost:44310/TournamentPayment",
},
});
// This point will only be reached if there is an immediate error when
// confirming the payment. Otherwise, your customer will be redirected to
// your `return_url`. For some payment methods like iDEAL, your customer will
// be redirected to an intermediate site first to authorize the payment, then
// redirected to the `return_url`.
if (error.type === "card_error" || error.type === "validation_error") {
showMessage(error.message);
} else {
showMessage("An unexpected error occurred.");
}
setLoading(false);
}```or do I have to make a case here:
const response = await fetch("api/Stripe/create-payment-intent", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ items }),
});
console.log("repsone", response)
const { clientSecret } = await response.json();
const appearance = {
theme: 'stripe',
};
elements = stripe.elements({ appearance, clientSecret });
const paymentElement = elements.create("payment");
paymentElement.mount("#payment-element");
}```Ah, okay, so the if statement you currently have is only checking for an error from stripe.confirmPayment. You need to check for an error coming back from create-payment-intent, yeah.
glass light
So what variable should I be checking for the error?
Inside of initalize the clientSecret constant?
lapis prism
You should probably change const { clientSecret } = await response.json(); to const data = await response.json(); and then data will have either clientSecret or an error and you can write logic based on that.
You can log out data to get an idea of what it contains under different scenarios.
glass light
Yeah but then what do I use below in replace of clientSecret?
elements = stripe.elements({ appearance, clientSecret });
I cant just put "data" in there can I?
lapis prism
You would use data.clientSecret instead.
lapis prism
What's the error?
glass light
',' expected
See the red squiggly
at data2.clientSecret
Uncaught SyntaxError: Unexpected token '.'
lapis prism
Oh! It needs to be clientSecret: data2.clientSecret since it's no longer named the same as the property it wants.
I think.
Try that and let me know what it says.
Err, not =.
glass light
Hmm?
glass light
is this right?
if (data2.error.type == "server_error") {
showMessage("ERROR");
}
I did console.log("data2", data2)
and this is what its outputting
data2 { "error": { "type": "server_error", "message": "Enter in your partners email not your own." } }
Seems like its not in Json?
lapis prism
Yeah, that's correct.
I mean, your code looks correct to me.
And it is JSON coming from your server, but by the time it's inside data2 it's a JavaScript object.
glass light
unkempt sonnet
Hi @glass light I'm taking over this thread
glass light
seems like its just a string
unkempt sonnet
It's a long thread, give me some time to catch up!
glass light
Jack no need!
The only thing you need to know
is my backend .NET
is returning this:
my frontend is this:
and I am getting this error in console:
seems like its not coming in as Json
unkempt sonnet
Can you share with me the relevant .NET code?
glass light
The try catch works fine.
The only thing is returning my custom error message and reading it as json on the frontend.
When there is no thrown exception in the try catch everything works fine.
Just trying to output that custom error message.
unkempt sonnet
It seems like the data2 isn't a JSON object yet. Maybe you want to call JSON.parse() to parse it to a json object?
glass light
Hi Jack are you still here?
unkempt sonnet
Yes, are you able to get the json after calling JSON.parse()?
glass light
Yes! I figured all that out.
Moving on to something a bit different
Im following this guide, and just looking at the javascript side of things.
I am trying to do a check on the frontend right before it confirms the payment
if ("k" == "k") {
console.log("I was here")
document.getElementById("errorLabel2").innerHTML = "Failed"
} else {
e.preventDefault();
setLoading(true);
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
return_url: "https://localhost:44310/TournamentPayment",
},
});
// This point will only be reached if there is an immediate error when
// confirming the payment. Otherwise, your customer will be redirected to
// your `return_url`. For some payment methods like iDEAL, your customer will
// be redirected to an intermediate site first to authorize the payment, then
// redirected to the `return_url`.
if (error.type === "card_error" || error.type === "validation_error") {
showMessage(error.message);
} else {
showMessage("An unexpected error occurred.");
}
setLoading(false);
}
}```Looking inside of handleSubmit
notice I have the if("k"=="k") or it wont do anything inside of handleSubmit
that is going to be my verification right before they hit the pay button.
Or sorry, not before - when they hit the pay button, I want it to do a quick check on my backend.
So I am just doing testing before I write my verification for the backend test.
So as a placeholder I wrote a if(k==k) and setup an error label on the page.
But for some reason, everytime I hit the pay button, the entire page refreshes and I'm not sure why that is happening.
unkempt sonnet
What code is executed when the pay button is pressed?
glass light
Its default whatever is in here: https://stripe.com/docs/payments/quickstart?lang=dotnet
I think its handleSubmit
unkempt sonnet
OK, the refresh is expected because you are submitting a form.
glass light
AHHHHHHHHHHHHHH
Is there anyway to stop that?
Or is there a better way for me to do a verification check when they hit the paybutton?
Or a better way for me to show that an error as occured?
unkempt sonnet
If you don't want the refresh, you should add e.preventDefault(); in the first line of handleSubmit() function
glass light
I only want it to not refresh if there is an error
unkempt sonnet
Then you just programmatically refresh the page when there's no error, if this is what you want.