Ian-Payment-Elements | Stripe Developers | Page 1

frigid willow Aug 19, 2022, 5:51 PM

#

Hi there

#

That's very strange

#

Do you have this live anywhere that I could test it?

#

Or are you testing locally?

unique moat Aug 19, 2022, 6:00 PM

#

im testing locally

#

but also exists on hybridstrengthcoach.com

#

i tried it there first

#

and discovered the issue

frigid willow Aug 19, 2022, 6:09 PM

#

Can you walk me through how to reproduce it on hybridstrengthcoach.com?

unique moat Aug 19, 2022, 6:21 PM

#

i had a colleuge walk through it and he couldnt reproduce it

#

but you can

#

go to https://hybridstrengthcoach.com/program/body

HYBRID Strength Coach | The strongest app on the web

Subscribe to the one or more HYBRID training programs to get them delivered straight to your mobile device. Download the HYBRID Strength Coach app today.

#

select an option and click the free trial checkbox. add to cart.

#

click the checkout button

#

on the cart/confirm page enter payment info and agree to the terms

#

the issue occurs when i submit the checkout form

#

does that help?

#

ive had a couple of people do it successfully so it might be an issue specific to me

frigid willow Aug 19, 2022, 6:27 PM

#

You've had a couple people reproduce it? Or you were the only one to reproduce?

#

Do you have preventDefault in your code?

#

Can you show me your submit handler?

unique moat Aug 19, 2022, 6:32 PM

#

im the only one who can produce it

#

yes i preventDefault

#

async handleSubmit(e, intentType) {

        e.preventDefault();

        this.trigger('payment-element-submitting', true);

        const { elements } = this.state;

        if (!this.props || !elements) {

            throw Error('submit error');
        }

        let returnUrl: string | undefined;
        let error: StripeError | { message: string;} | undefined;

        switch (intentType) {

            case 'paymentIntent':

                returnUrl =  `${window.location.origin}/cart/success/${this.props.stripeCustomerId}/${this.props.invoiceId}`;
                ({ error } = await this.handlePayment(elements, this.props, returnUrl));

                break;

            case 'setupIntent':

                returnUrl = `${window.location.origin}/trial/success/${this.props.stripeCustomerId}`;
                ({ error } = await this.handleSetup(elements, this.props, returnUrl));
                break;

            default:
                // sets custom error message if something unexpected goes wrong
                error = { message: 'Unable to process client secret' };
        }

#

not sure how helpful it is but i call the stripe client methods inside the case statement

frigid willow Aug 19, 2022, 6:36 PM

#

Can you share your handleSetup code?

unique moat Aug 19, 2022, 6:36 PM

#

    handleSetup(elements: StripeElements, props: PaymentElementProps, url: string) {

        if (this.state.selectedPaymentMethod) {

            // confirmCardSetup will not redirect by default so it will return a result with no error
            return this.state.stripeClient.confirmCardSetup(props.clientSecret, {
                payment_method: this.state.selectedPaymentMethod,
                return_url: url,
            });
        }

        return this.state.stripeClient.confirmSetup({
            elements,
            confirmParams: {
                return_url: url,
            },
        });
    },

#

the most common code path is outside of the if statement. that is what is causing issues for me

#

i dont know much about firefoxes partitioned storage api but i get those warnings in the console with the stripe libarary

#

thats a difference i notice between firefox and other browsers

frigid willow Aug 19, 2022, 6:39 PM

#

Do you have a test email/pw I can use on your site?

unique moat Aug 19, 2022, 6:41 PM

#

dev@test.com

#

Control1!

frigid willow Aug 19, 2022, 6:43 PM

#

Hmm okay I was able to reproduce what you stated

#

Interesting.

#

Alright give me a few mins to take a look at this with a teammate

unique moat Aug 19, 2022, 6:46 PM

#

its interesting that no errors are returned

frigid willow Aug 19, 2022, 6:51 PM

#

What version of Firefox are you on?

unique moat Aug 19, 2022, 6:54 PM

#

103.0.2

unique moat Aug 19, 2022, 7:17 PM

#

my collegue is using an old version. 87

frigid willow Aug 19, 2022, 7:19 PM

#

And they couldn't repro it, correct?

#

We are still looking btw

#

This is quite odd

unique moat Aug 19, 2022, 7:32 PM

#

they could not reproduce on 87

frigid willow Aug 19, 2022, 7:56 PM

#

@unique moat so far we are stumped here. Clearly for some reason Firefox is performing navigation upon confirmSetup but we can't quite figure out why. This is going to take some further debugging on our end... can you shoot an email to our Support team via https://support.stripe.com/contact/login and mention my handle (bismarck) in the email and let me know when you have sent it? Then I can grab the ticket and follow up with you over email later today.

#Ian-Payment-Elements