#rachel_unexpected

1 messages · Page 1 of 1 (latest)

wide pondBOT
#

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

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

robust raven
#

Hello

#

Hmm do you have somewhere I can visit to reproduce this?

#

And can you show me what sort of Appearance you are setting?

rocky hound
robust raven
#

Looks like I need an email login

rocky hound
#

appearance: {
variables: {
borderRadius: "50px",
},
},

robust raven
#

Can you share an email login or a direct link to be able to repro?

rocky hound
#

Are you able to create an account yourself? Otherwise I can create an account for you using my email

robust raven
#

No I can't do that, sorry.

rocky hound
#

Yes you can use fake information

robust raven
#

I don't see anywhere to sign up without using an OAuth

#

Please provide an email/pw that I can use. And can you provide your full code snippet here as well?

#

Thanks

#

Went ahead and deleted so no one else uses that email

rocky hound
#

Thanks!

robust raven
#

Looking!

#

Err need a 2FA

rocky hound
#

410361

robust raven
#

I triggered once more to see it in Safari

#

And can you share your full relevant code snippet here?

rocky hound
#

198163

#

Yes one moment

# 
const options: StripeElementsOptions = {
    mode: "payment",
    appearance: {
      variables: {
        borderRadius: "50px",
      },
    },
    ...orderOptions,
  }

  return (
    <>
      <Elements stripe={stripePromise} options={options}>
        <ExpressCheckoutUI order={orderData} />
      </Elements>
    </>
  )
robust raven
#

Can you show me the ExpressCheckoutUI component? What actually wraps ExpressCheckoutElement here?

#

Beat me to it

#

Okay thanks. Give me a few mins to look!

rocky hound
#

Opps this is not the current code hold on

#

I was testing something

robust raven
#

Okay

rocky hound
# 

return (
    <UncollapsingBox visible={visible}>
      <Text variant="lg-display">Express checkout</Text>
      <Spacer y={1} />
      <Box maxWidth={["100%", "50%"]} paddingLeft="1px">
        <ExpressCheckoutElement
          options={expressCheckoutOptions}
          onClick={handleOpenExpressCheckout}
          onCancel={handleCancel}
          onReady={e => {
            if (!!e.availablePaymentMethods) {
              setVisible(true)

              orderTracking.expressCheckoutViewed({
                order: orderData,
                walletType: getAvailablePaymentMethods(
                  e.availablePaymentMethods,
                ),
              })
            }
          }}
          onShippingAddressChange={handleShippingAddressChange}
          onShippingRateChange={handleShippingRateChange}
          onLoadError={e => {
            logger.error("Express checkout element error", e)
          }}
          onConfirm={onConfirm}
        />
      </Box>
      <Text variant="xs" color="mono60" mt={1} ml={0.5}>
        <>By clicking Pay, I agree to Artsy’s </>
        <RouterLink
          inline
          to="https://www.artsy.net/terms"
          target="_blank"
          rel="noopener noreferrer"
        >
          General Terms and Conditions of Sale
        </RouterLink>
        .
      </Text>
      <Spacer y={4} />
    </UncollapsingBox>
  )
}

const expressCheckoutOptions: StripeExpressCheckoutElementOptions = {
  buttonTheme: {
    applePay: "white-outline",
  },
  buttonHeight: 50,
  paymentMethods: {
    applePay: "always",
    googlePay: "always",
  },
}
#

Looks like this might be relevant as well


const UncollapsingBox = styled(Box)<{ visible: boolean }>`
  display: flex;
  flex-direction: column;
  max-height: ${({ visible }) => (visible ? "1000px" : "0")};
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
`
wide pondBOT
robust raven
#

Alright @rocky hound I was able to reproduce on my end as well

#

With a very basic implementation, so don't think your wrapping component is the issue

#

Does seem like a bug

#

So I'll report that internally so we can get it fixed up

rocky hound
#

Thank you!

wide pondBOT
#

Hello @rocky hound, we have sent you a direct message, please check it at https://discord.com/channels/@me/1367531880458748064

  • 🔗The message has instructions on how to open a direct support case with our Developer Support team, in order to help you more effectively.
robust raven
#

@rocky hound I just had a DM sent to you so that a case is created in order for us to update you async over email based on our Eng team investigating this.

#

Can you let me know when you submit that ticket?

rocky hound
#

Submitted!