bg_code | Stripe Developers | Page 1

wild tangleBOT Apr 5, 2024, 7:26 PM

#

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

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

untold garnetBOT Apr 5, 2024, 7:26 PM

#

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.

bg_error, 1 day ago, 18 messages

#

spiral sky Apr 5, 2024, 7:29 PM

#

Not too familiar with the appearance api, but you should be able to set readOnly on the payment element's options: https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-readOnly

Stripe JS Reference

jolly sonnet Apr 5, 2024, 7:30 PM

#

The link you shared also says that: Enabling the readOnly option doesn't change the Payment Element's visual appearance
I would ideally like for my form to be grayed out or some indication showing that it is disabled

spiral sky Apr 5, 2024, 7:35 PM

#

Yeah not super farmiliar with the appearance api, but looks like you need to set disabled on the actual input class: https://docs.stripe.com/elements/appearance-api?platform=web#form-inputs---labels-above

jolly sonnet Apr 5, 2024, 7:39 PM

#

Ah, that will be hard because those inputs are in the iframe

#

In the Stripe iFrame I mean

spiral sky Apr 5, 2024, 7:41 PM

#

So what you'd do I think is update the appearance config (as shown here): https://docs.stripe.com/elements/appearance-api?platform=web#rules

#

Changing the .Input class

#

Then update your elements instance

jolly sonnet Apr 5, 2024, 7:52 PM

#

Having a separate appearance config that targets .input class with :disabled pseudo class is possible. But if the input doesn't even get the :disabled pseudo class, I believe the appearance config change will also not change anything, right?

#

How can I give input in the Stripe iframe the disabled pseudoclass?

spiral sky Apr 5, 2024, 7:56 PM

#

Let me ask a colleague

spiral sky Apr 5, 2024, 8:17 PM

#

They suggested the same thing I did with calling elements.update(), passing in the new appearance config

#

My colleague created 2 different appearance configs changing the color like so:

  theme: 'stripe',
  colorPrimary: 'black',
  colorBackground: 'black',
  colorText: 'black',
  colorTextSecondary: 'black',
  colorTextPlaceholder: 'black',
  rules: {
      '.Label': {
        color: 'black'
      },
      '.Input': {
        color: 'black'
      }
  }
}

const readonly = {
  theme: 'stripe',
  colorPrimary: 'grey',
  colorBackground: 'grey',
  colorText: 'grey',
  colorTextSecondary: 'grey',
  colorTextPlaceholder: 'grey',
  rules: {
      '.Label': {
        color: 'grey'
      },
      '.Input': {
        color: 'grey'
      }
  }
}```

#

And on submit they updated the payment element to be readonly

#

Then they updated the elements instance to use the readonly appearance config as well

#bg_code