bachir_unexpected

[stark kestrel]

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

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

[kindred vale]

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.

• bachir_error, 1 day ago, 15 messages

[cyan lily]

related code:

    <Grid container>
      <DisplayGrid when={Boolean(paymentError)} item xs={12} marginBottom={2}>
        <PaymentErrorAlert paymentError={paymentError} />
      </DisplayGrid>
      {!expressCheckoutDisabled && (
        <DisplayGrid when={displayExpressCheckout} item container xs={12} marginBottom={3}>
          <Grid item xs={12} marginBottom={3}>
            <StripeExpressCheckoutElement
              // To avoid any issues with express checkout not loading we use the key prop
              // to force the express checkout component to re-initialize when it's shown/hidden
              key={displayExpressCheckout ? "show" : "hide"}
              id="express-checkout-element"
              // We remove the onReady callback to avoid triggering this callback when hiding the component
              onReady={!prioritizeBankPayment ? handleExpressCheckoutReady : undefined}
              onLoadError={handleExpressCheckoutLoadError}
              onConfirm={handleExpressCheckoutConfirm}
              onClick={handleExpressCheckoutClick}
            />
          </Grid>

          <Grid container item xs={12} alignItems="center" justifyContent="space-between">
            <Grid item xs>
              <Divider />
            </Grid>
            <Grid item marginRight={2} marginLeft={2}>
              <Typography variant="subtitle2" className={styles.expressSeparator}>
                {t("common:payment.express.payAnotherWay")}
              </Typography>
            </Grid>
            <Grid item xs>
              <Divider />
            </Grid>
          </Grid>
        </DisplayGrid>
      )}

[violet bane]

hi! cna you put a minimal example of this up on a site somewhere where can replicate?

it's probably a React state bug in your overall code leading to destroying the DOM that contains the Element.

and before I get into this, you are a developer at Zeffy right?

[cyan lily]

hi, yes!

[cyan lily]

I'm not sure I can easily as this is a proprietary code, I thought it could be enough if you try on the form https://www.zeffy.com/en-US/ticketing/a6f2d814-9a13-4832-8bbf-35d816d56db9 and reproduce the steps in the loom ?

Otherwise I can look into replicating in a minimal example

[violet bane]

I can reproduce it yes but it's a bit hard to say much without being able to play with the overall React code myself with all your business logic

it seems like this only happens when the amount goes over a certain amount? So maybe you have some logic involved there?

we also have a feature to tune payment methods by amount

I suspect that's what you're using

https://docs.stripe.com/payments/payment-method-targeting#set-targeting-conditions I'm relatively certain you're using that and when the amount is over $10k you turn off card payments(which includes the ECE) and only allow ACH

[cyan lily]

We indeed havd the dynamic payment methods activated, but we also set the paymentMethodTypes when instantiating the Payment Element, and update it when the amount changes:

elements?.update({ paymentMethodTypes: ["us_bank_account"] });

Do you think doing both (dynamic pm from dashboard + setting paymentMethodTypes) can lead to issues ?

[violet bane]

well I mean the problem is what you said

[cyan lily]

I'm taking a look and see if we can integrate this instead of doing it manually in our code

[violet bane]

you change paymentMethodTypes to just ACH , so that means ECE won't render

put aside the dynamic dashboard feature actually, I see you're not using it

as you say , you do your own logic for it. But then that's the issue really.

no card means no ECE

AFAIK you can listen to https://docs.stripe.com/js/element/events/on_ready#element_on_ready-handler-availablePaymentMethods and based on that clean up the UI on your page(remove that "or pay another way" seperator or show a note that only ACH is allowed for amounts over X)

[cyan lily]

How can we activate it ? I'm seeing a default config but I thought that meant it is

[violet bane]

though you don't really need that event if you're explicitly passing paymentMethodTypes: ["us_bank_account"]

[violet bane]

I'm not sure it's fully GA yet, I think they're doing a partial rollout

anyway you can ignore it, you're not using it, I was mistaken and I didn't have all the context you have about your actual business logic that sets paymentMethodTypes , so I was just making an educated guess

[cyan lily]

no worries it's helpful to have your pov, especially with how little I'm giving you

I'll try to make a minimal example for this