mikesmith7748

[shrewd dagger]

Can you share more detail about this? WHere are you seeing this? Is it blocking your payments?

[timid kiln]

Yes, here's the code I have:

    const clientSecret = props.clientSecret;
    const stripePromise = props.stripePromise;
    const appearance = {
        variables: {
            fontFamily: "montserrat, system-ui, sans-serif",
            spacingGridRow: "20px"
        }
    };

    const options = {
        appearance,
        clientSecret
    };
    return (
        (<Elements stripe={stripePromise} options={options}>
            <ElementsConsumer>
                {({ stripe, elements }) => (
                    <ConnectedPaymentInfoStep
                        withAchProps={props.withAchProps}
                        stripe={stripe}
                        elements={elements}
                        {...props}
                    />
                )}
            </ElementsConsumer>
        </Elements>)
    );
};```

This throws the cross origin error

I found out if I add clientSecret && stripePromise && before Elements, it will render but I don't want to have to do that

export const InjectedCheckoutForm = (props) => {
    const clientSecret = props.clientSecret;
    const stripePromise = props.stripePromise;
    const appearance = {
        variables: {
            fontFamily: "montserrat, system-ui, sans-serif",
            spacingGridRow: "20px"
        }
    };

    const options = {
        appearance,
        clientSecret
    };
    return (
        clientSecret && stripePromise && (<Elements stripe={stripePromise} options={options}>
            <ElementsConsumer>
                {({ stripe, elements }) => (
                    <ConnectedPaymentInfoStep
                        withAchProps={props.withAchProps}
                        stripe={stripe}
                        elements={elements}
                        {...props}
                    />
                )}
            </ElementsConsumer>
        </Elements>)
    );
};```

This code works but I don't want to add clientSecret && stripePromise

[shrewd dagger]

Why not?

With the intent first flow you need that clientSecret

If you want an alternative, yo be able to render elements without a client secret, you should take a look at our deferred intent flow:

[timid kiln]

Because if the backend throws an error for Instant ACH, for example, all of the other payment methods will not render

[shrewd dagger]

https://stripe.com/docs/payments/accept-a-payment-deferred?platform=web&type=payment

[timid kiln]

I want it to where if one payment method fails, it just doesn't render but allk other payment methods still render

I have a combination of CardElement and PaymentElement because we haven't upgraded the deprecated CardElement yet, so they use different code

[shrewd dagger]

You might want to separate those, then. I think using the deferred flow and dynamic payment methods is likely to be a better flow for you overall.

But for this error, its not clear where that's actually coming from

[timid kiln]

Yeah it's super weird. I initially had clientSecret && (<Elements stripe={stripePromise} options={options}> and that still threw the cross origin error. Only after adding clientSecret && stripePromise && ... did it work

I'll try the deferred method and see if that works