iandk-payment-element

[robust pecan]

Hi 👋 can you help me understand what your is doing with the Element. I'm not familiar with the function that you mentioned so I'm not sure how it would map to the new flow.

[hot meteor]

Hey!
Sure thing, let me send you my old javascript for the single card element first, okay?

That should help you understanding what I'm trying to archive

This was my frontend js code to handle storing a card payment method

const stripe =
        Stripe(
            'pk_test'
        );

    const elements = stripe.elements();
    const cardElement = elements.create('card');

    cardElement.mount('#card-element');



    const cardHolderName = document.getElementById('card-holder-name');
    const cardButton = document.getElementById('card-button');
    const clientSecret = cardButton.dataset.secret;

    cardButton.addEventListener('click', async (e) => {
        const {
            setupIntent,
            error
        } = await stripe.confirmCardSetup(
            clientSecret, {
                payment_method: {
                    card: cardElement,
                    billing_details: {
                        name: cardHolderName.value
                    }
                }
            }
        );
        if (error) {
            // Inform the user if there was an error.
            alert(JSON.stringify(error));
        } else {
            console.log(setupIntent);
            stripeTokenHandler(setupIntent);
        }
    });


    // Submit the form with the token ID.
    function stripeTokenHandler(setupIntent) {
        // Insert the token ID into the form so it gets submitted to the server
        var form = document.getElementById('payment-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'paymentMethod');
        hiddenInput.setAttribute('value', setupIntent.payment_method);
        form.appendChild(hiddenInput);
        // Submit the form
        form.submit();
    }

And now I'm trying to switch to your newer single payment card which supports multiple payment methods.
So I changed the addEventListener function according to your docs.

However I noticed that the setupIntent var no longer exists and therefore the old function to attach the token also doesnt work anymore.
I couldn't find anything on the docs regarding this

https://stripe.com/docs/payments/payment-element/migration?integration-path=future

cardButton.addEventListener('click', async (e) => {
        const {
            error
        } = await stripe.confirmSetup({
            elements,
            confirmParams: {
                return_url: "https://canvay.test/billing",
            },
            // Uncomment below if you only want redirect for redirect-based payments
            redirect: "if_required",
        });
        if (error) {
            // Inform the user if there was an error.
            alert(JSON.stringify(error.message));
        } else {
            console.log(setupIntent);
            stripeTokenHandler(setupIntent);
        }
    });

Is it understandable what my problem is? 🙂

[sudden fern]

Hello 👋
Apologies for the delay here
Let me take a look

confirmCardSetup should return a setupIntent
Are you seeing anything else when logging?
Can you try logging out the whole response?

[jaunty crown]

This thread has been archived. If you need help with anything else please ask in #dev-help or contact Stripe Support: https://support.stripe.com/contact

[hot meteor]

yea, but in your docs you are writing that one should switch to confirmSetup instead of confirmCardSetup

[hot meteor]

thanks! no worries 🙂

[hot meteor]

no, as the setupIntent var doesnt exist anymore I also get no output

[ocean kite]

@hot meteor one sec

you're using PaymentElement , you need to use confirmSetup() for that, sorry for confusion

second

[hot meteor]

yep, that's what I've switched to

[ocean kite]

const {
            error
        } = await stripe.confirmSetup({
            elements,
            confirmParams: {
                return_url: "https://canvay.test/billing",
            },
            // Uncomment below if you only want redirect for redirect-based payments
            redirect: "if_required",
        });

confirmSetup() returns a result object, so change your {error} part there, accept a result object and log it out to see whether it has an error or something else

third

is going to be irrelevant mostly, depending on what your code is doing in that function of yours

but really, the right thing to do is first read through this whole guide: https://stripe.com/docs/payments/save-and-reuse?platform=web
and understand it, it shows end to end what your code should look like by the end of it

additionally, you should handle the result of confirmSetup() after your customer has been redirected to your return_url, on that page you should show any success/error msgs

and

as that guide recommends