river stagBOT Sep 18, 2025, 7:07 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/1418312499018596436

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

#

mortal cedar Sep 18, 2025, 7:09 PM

#

Hello, can you share (in text) the JavaScript function you are calling when this error is raised?

fiery meteor Sep 18, 2025, 7:11 PM

#

const {error, confirmationToken} = await stripe.createConfirmationToken({
elements,
params: {
payment_method_data: {
billing_details: {
name: 'Jenny Rosen',
},
},
return_url: 'https://example.com/order/123/complete',
}
});

mortal cedar Sep 18, 2025, 7:12 PM

#

And this is triggered when?

fiery meteor Sep 18, 2025, 7:13 PM

#

onConfirm of the ExpressCheckoutElement
const handleConfirmAlt = async (e: StripeExpressCheckoutElementConfirmEvent) => {
if(!elements || !stripe){
return
}
elements.submit().then(async (res) => {
if(!res.error){
const {error, confirmationToken} = await stripe.createConfirmationToken({
elements,
params: {
payment_method_data: {
billing_details: {
name: 'Jenny Rosen',
},
},
return_url: 'https://example.com/order/123/complete',
}
});
console.log("confirmationToken", confirmationToken, error);
}
})
};

return (
    <ExpressCheckoutElement onConfirm={handleConfirmAlt} options={expressCheckoutOptions} />
);

mortal cedar Sep 18, 2025, 7:14 PM

#

Mixing .then and async await? Fun 😅

fiery meteor Sep 18, 2025, 7:15 PM

#

tried A-Lot of different approaches, this is just the last iteration 😅

mortal cedar Sep 18, 2025, 7:16 PM

#

Okay and the elements object. That is the one used to instantiate the ExpressCheckoutElement, correct?

fiery meteor Sep 18, 2025, 7:17 PM

#

the elements object comes from the useElements(); hook and the ExpressChekoutElement is wrapped with <Elements>

mortal cedar Sep 18, 2025, 7:18 PM

#

Because the error message you are seeing suggests that elements object is not connected to the ExpressCheckoutElement

fiery meteor Sep 18, 2025, 7:23 PM

#

i have specifically followed the documentation so there is no reasion for this to happen

#

'use client';
import { Elements } from "@stripe/react-stripe-js";
import ExpressPaymentElementTest from "@/components/ExpressPaymentElementTest";
import {loadStripe} from "@stripe/stripe-js";

const stripeKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || "";
const stripePromise = loadStripe(stripeKey);

export const ExpressPaymentWrapper = () => {
const amount = 50000
return (
<Elements stripe={stripePromise} options={{
mode: "payment" as const,
amount: amount,
currency: "usd",
}}>
<ExpressPaymentElementTest />
</Elements>
);
};

#

import { ExpressCheckoutElement, useElements, useStripe } from "@stripe/react-stripe-js";
import { LayoutOption, StripeExpressCheckoutElementConfirmEvent, StripeExpressCheckoutElementOptions } from "@stripe/stripe-js";

const ExpressPaymentElement = (layout?: LayoutOption) => {
const stripe = useStripe();
const elements = useElements();

const expressCheckoutOptions: StripeExpressCheckoutElementOptions = {
    emailRequired: true,
    phoneNumberRequired: true,
    layout:{ maxColumns:0, maxRows:0, overflow:"never"},
    buttonHeight: 55,
};

const handleConfirmAlt = async (e: StripeExpressCheckoutElementConfirmEvent) => {
   if(!elements || !stripe){
       return
   }
    elements.submit().then(async (res) => {
        if(!res.error){
            const {error, confirmationToken} = await stripe.createConfirmationToken({
                elements,
                params: {
                    payment_method_data: {
                        billing_details: {
                            name: 'Jenny Rosen',
                        },
                    },
                    return_url: 'https://example.com/order/123/complete',
                }
            });
            console.log("confirmationToken", confirmationToken, error);
        }
    })
};

return (
    <ExpressCheckoutElement onConfirm={handleConfirmAlt} options={expressCheckoutOptions} />
);

};

export default ExpressPaymentElement;

river stagBOT Sep 18, 2025, 7:24 PM

#

🧑‍💻 How to format code on Discord

river stag · 2025-09-18T19:07:31.384Z

kiril-reznik_error | Stripe Developers | Page 1

Inline code: wrap in single backticks (`)

This:

The variable `foo` contains the value `bar`.

Will turn into this:

The variable foo contains the value bar.

Code blocks: wrap in three backticks (```)

Also, you can specify the language after the first three backticks to get syntax highlighting.

This:

```javascript
function foo() {
return 'bar';
}
```

Will turn into this:

function foo() {
  return 'bar';
}```

Notes about **code blocks**:
- Specifying the language is optional (e.g., you can omit `javascript` in the example above)
  - If you don't specify the language you won't get syntax highlighting
- When you're inside a code block (after you type \`\`\`) the `Return`/`Enter` key will add a new line instead of sending your message
  - Once you end the code block `Return`/`Enter` works normally again

You can [read more about message formatting on Discord's website.](https://support.discord.com/hc/en-us/articles/210298617)

mortal cedar Sep 18, 2025, 7:27 PM

#

I realize that you are using the ECE instead of Payment Element, but I'm reviewing this doc: https://docs.stripe.com/payments/build-a-two-step-confirmation?client=react#create-ct to double check how you are attempting to create the Confirmation Token

fiery meteor Sep 18, 2025, 7:32 PM

#

this specific isuue is with ECE and the provided example has only the ECE component but in our actual integration i have both the ECE and The PaymentElement in the same rendering tree and the same issue persists,

#

and we are trying to create the confirmationToken exactly as stated in the attached doc

#

*payment element in the same rendering tree works fine

mortal cedar Sep 18, 2025, 7:36 PM

#

I think this will take more time to debug than we can easily support directly in Discord. Do you mind if I convert this to a support case that will be escalated directly to our engineering staff?

fiery meteor Sep 18, 2025, 7:38 PM

#

That will be very hellpull, thank you, i have already reached out to our stripe rep with the same details but i wll be glad if you could also escalate this issue from your side

mortal cedar Sep 18, 2025, 7:39 PM

#

Yeah, specifically that will give us enough time to spin up your example repo, try to reproduce the error you are seeing, and figure out a fix.

river stagBOT Sep 18, 2025, 7:39 PM

#

Hello @fiery meteor, we have sent you a direct message, please check it at https://discord.com/channels/@me/1418320529764388946

🔗The message has instructions on how to open a direct support case with our Developer Support team, in order to help you more effectively.

mortal cedar Sep 18, 2025, 7:42 PM

#

Let me know when you've created the case and I can confirm if we've received it in the right queue

fiery meteor Sep 18, 2025, 7:43 PM

#

case created

mortal cedar Sep 18, 2025, 7:44 PM

#

I see it. Okay we will be working on this

fiery meteor Sep 18, 2025, 7:44 PM

#

Thank you ! Looking forward to hearing back from yoyu

mortal cedar Sep 18, 2025, 7:45 PM

#

Thanks for being flexible. Some problems require a bit more focus than we can dedicate when moderating real-time chat servers 😅

river stagBOT Sep 18, 2025, 7:45 PM

#

#kiril-reznik_error

🧑‍💻 How to format code on Discord

Inline code: wrap in single backticks (`)

Code blocks: wrap in three backticks (```)

Hello @fiery meteor, we have sent you a direct message, please check it at https://discord.com/channels/@me/1418320529764388946