jogui_code

[strange stream]

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

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

[tranquil gate]

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.

• jogui_best-practices, 1 day ago, 8 messages

[opaque topaz]

Refering the code, ive trimmed multiple parts of the code to make it fit the string length limitation of the form

Specifically

async function _previewPaymentMethod(vueInstance, stripe, elements) {
        vueInstance.stripeFormError = null;
        const nameInput = document.getElementById("premium-pay__name__input");

        // Trigger form validation and wallet collection
        const { error: submitError } = await elements.submit();
        if (submitError) {
            console.error(submitError);
            vueInstance.stripeFormError = submitError;
            return;
        }

        stripe
            .createConfirmationToken({
                elements,
                params: {
                    payment_method_data: {
                        billing_details: {
                            name: nameInput,
                        },
                    },
                },
            })
            .then(({ error, confirmationToken }) => { .... more code sending the token to the backend ... }

[opaque topaz]

This is a directl follow up from my last post here, where @broken bough helped me: https://discord.com/channels/841573134531821608/1227249947108446390

I've searched both across the internet and discord search about this console.error with no results

Error creating confirmation token IntegrationError: Could not find a mounted element to create the Confirmation Token from.

and im passing a working mounted element as the implementation is currently online and serving hundreds of transactions every week, very happy with Stripe

[violet plinth]

Hello! If you add a console.log(elements); line immediately before you call stripe.createConfirmationToken what is the output?

[opaque topaz]

doing it!

It's an class, a object with methods, I've JSON.stringify:

console.log(elements)

Is it possible that is because I use let cardElement = elements.create("card", { style: style }); a card element and not the elements.create('payment'); of the example https://docs.stripe.com/payments/build-a-two-step-confirmation#additional-options ?

[violet plinth]

Oh! Yes.

I completely missed that.

Card Element is legacy and not compatible with Confirmation Tokens.

You'll need to use a Payment Element to make this work.

[opaque topaz]

Can i do the same functionality as card element with payment element?

Is like a recommended migration? All card use cases should be compatible with payment element? Is there any migration docs?

Tomorrow I will migrate it to keep up to date if possible

[violet plinth]

Yeah, Payment Element works with cards. There's a migration guide here: https://docs.stripe.com/payments/payment-element/migration

[opaque topaz]

Thank you! New developments are always a good moment to update modules

[violet plinth]

Happy to help!