jaysantana_react-multiple-intents | Stripe Developers | Page 1

mellow prawnBOT May 17, 2024, 1:35 PM

#

hearty perchBOT May 17, 2024, 1:35 PM

#

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

jaysantana_unexpected, 1 hour ago, 17 messages
jaysantana_unexpected, 1 day ago, 52 messages

mellow prawnBOT May 17, 2024, 1:35 PM

#

👋 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/1241021270854996039

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

wind yacht May 17, 2024, 1:35 PM

#

Are you integrating the Payment Element for this?

plush sphinx May 17, 2024, 1:36 PM

#

yes

wind yacht May 17, 2024, 1:37 PM

#

Are you creating a payment intent before the payment element is rendered? Or are you using the deferred intent flow?

plush sphinx May 17, 2024, 1:37 PM

#

let me check

#

we are creating the intent then showing element

wind yacht May 17, 2024, 1:41 PM

#

I see and are you using React?

plush sphinx May 17, 2024, 1:41 PM

#

yes

wind yacht May 17, 2024, 1:42 PM

#

Gotcha. Is there a hook you're using for creating the payment intent? Can you share your code? Likely it's some bug based on that, and you'll need to add some logging to trace the problem

plush sphinx May 17, 2024, 1:44 PM

#

i can provide the code

#

give me a moment

mellow prawnBOT May 17, 2024, 2:16 PM

#

plush sphinx May 17, 2024, 2:18 PM

#

$stripe_data=StripeConnect::where('user_id',$request->user_id)->first();
$stripe = new \Stripe\StripeClient($payment_details->STRIPE_SECRET);
$intent = $stripe->paymentIntents->create([
'amount' => $amount100,
'currency' => 'gbp',
'metadata' => array(
'order_status' => 'web',
'name' => isset($request->name) ? $request->name : null,
'email' => isset($request->email) ? $request->email : null,
'phone' => isset($request->phone) ? $request->phone : null,
'connected_key' => $stripe_data->stripe_id,
'created_at'=> date('Y-m-d H:i:s'),
),
'application_fee_amount' => $service_fee100,
'automatic_payment_methods' => [
'enabled' => true,]],['stripe_account' => $stripe_data->stripe_id]);
return response()->json(['success' => true,'secret_key'=>
$intent,], $this->successStatus);

#

$stripe = new \Stripe\StripeClient($payment_details->STRIPE_SECRET);
$intentData=$stripe->paymentIntents->update(
$paymentIntentId, ['application_fee_amount' => $applicationFee100,'amount'=>$price100],['stripe_account' => $stripeId]
);
return response()->json(['success' => true,'intent_data' => $intentData], $this->successStatus);

plush sphinx May 17, 2024, 2:19 PM

#

plush sphinx $stripe_data=StripeConnect::where('user_id',$request->user_id)->first(); ...

this is for creating intent

plush sphinx May 17, 2024, 2:20 PM

#

plush sphinx $stripe = new \Stripe\StripeClient($payment_details->STRIPE_SECRET); ...

this is for updating intetn

wind yacht May 17, 2024, 2:20 PM

#

Right but that is likely being called by your front-end multiple times, right?

#

Can you share the client-side code?

#

Also recommend adding logs client-side to help track down why that end point is being called multiple times

wraith vault May 17, 2024, 2:31 PM

#

Hi there 👋 jumping in as my teammate needs to step away soon. Usually when I hear of problems about flows triggering too many times in React, it's a prop causing a component to re-render and rerun its functions. I'm going to double-down on @wind yacht's recommendation that you add some log lines into your functions, so it'll be easy for you to spot if they're being triggered multiple times unexpectedly.

mellow prawnBOT May 17, 2024, 2:37 PM

#

jaysantana_react-multiple-intents

plush sphinx May 17, 2024, 2:37 PM

#

thank you checking this now

#

<PaymentElement
id="payment-element"
options={paymentElementOptions}
onReady={(e) => props.setPaymentMethod(Payment.CARD)}
onFocus={(e) => {
setCardError('');
props.setPaymentMethod(Payment.CARD);
}}
onChange={(e) => {
setIsCardCompleted(e.complete);
setIsAppleBtn(e.value.type === 'apple_pay' ? true : false);
}}
className='paymentField'
/>

#

this is the client side code

#

@wraith vault

wraith vault May 17, 2024, 2:48 PM

#

Yes? Did you add that logging and run through your flow again?

#

I'm not a react expert, so I likely won't be able to spot the problem just from looking at your code. That being said, the code you shared is for rendering your Payment Element, which you do after creating an intent? So if the concern is with the intent creation, the code that calls what you shared may be more relevant.

plush sphinx May 17, 2024, 2:59 PM

#

await axios.post(
${process.env.baseApiUrl}/api/update/payment/intent,
{
paymentIntents: sessionStorage.getItem('clientIntentId'),
application_fee_amount: application_Fee,
price: amount,
stripe_id: JSON.parse(localStorage.getItem("storeData"))?.stripe_connect
?.stripe_id,
},
{
headers: {
"Content-Type": "application/json; charset=utf-8",
Accept: "application/json",
Authorization: Bearer ${localStorage.getItem("token")},
},
}
);

#

this is the api we are calling

wraith vault May 17, 2024, 3:02 PM

#

Hm, that API endpoint looks like it may be for updating an intent rather than creating one, but I believe that's pointing to your endpoint so I may not be understanding the naming convention you're using. Are you seeing that code called multiple times?

plush sphinx May 17, 2024, 3:04 PM

#

nope its calling only once

wraith vault May 17, 2024, 3:05 PM

#

Is that your code that creates an intent?

plush sphinx May 17, 2024, 3:05 PM

#

no this is the update api

#

$stripe_data=StripeConnect::where('user_id',$request->user_id)->first();
$stripe = new \Stripe\StripeClient($payment_details->STRIPE_SECRET);
$intent = $stripe->paymentIntents->create([
'amount' => $amount100,
'currency' => 'gbp',
'metadata' => array(
'order_status' => 'web',
'name' => isset($request->name) ? $request->name : null,
'email' => isset($request->email) ? $request->email : null,
'phone' => isset($request->phone) ? $request->phone : null,
'connected_key' => $stripe_data->stripe_id,
'created_at'=> date('Y-m-d H:i:s'),
),
'application_fee_amount' => $service_fee100,
'automatic_payment_methods' => [
'enabled' => true,]],['stripe_account' => $stripe_data->stripe_id]);
return response()->json(['success' => true,'secret_key'=>
$intent,], $this->successStatus);

#

this one is the one that genertates the intent

#jaysantana_react-multiple-intents