Stripe.js - невозможно изменить цвет фона или высоту ввода кредитной картой

#javascript #css #vue.js #stripe-payments

#javascript #css #vue.js #stripe-платежи

Вопрос:

У меня возникла проблема с оформлением ввода кредитной карты Stripe в Vue.js приложение. Я хотел бы изменить цвет фона на #f1f1f1 и высоту на 60 пикселей, но я не могу сделать это ни с помощью базовых стилей, ни с помощью css. Что я делаю не так? В идеале я хотел бы настроить таргетинг на это с помощью css. Вот мой код:

 loadStripe() {
      card = elements.create("card", {
        style: {
          base: {
            iconColor: '#2A2A2A',
            color: '#2A2A2A',
            fontWeight: 300,
            fontFamily: 'Lato, Open Sans, Segoe UI, sans-serif',
            fontSize: '19px',
            // height: '60px',
            // background: '#f1f1f1',
            '::placeholder': {
              color: '#2A2A2A',
              fontSize: '19px',
            },
          },
        }
      });

Заранее благодарю!

1. Не похоже, что вы можете изменить эти свойства ~ stripe.com/docs/stripe-js/reference#elements-create . Вы пробовали CSS?

2. Да, я получаю сообщение об ошибке в консоли, в котором говорится, что вы не можете изменить их в базовых стилях… Я пробовал CSS, но это не сработало, кажется, что он нецелевой. Я попытался изменить высоту / bg color в инструментах разработки, и это сработало, но когда я вставил это в свой фактический код, это не применяется..

3. Я не знаю элементы, которые создает stripe, поэтому, если бы вы могли определить, где в их CSS установлены height и background , добавьте эти селекторы CSS к вашему вопросу

4. Неважно, я придумал хакерское решение, которое заключается в том, чтобы поместить вокруг него контейнер и оформить его … поскольку у него прозрачный фон, похоже, что я оформил сам ввод

5. Не стесняйтесь добавлять свое решение в качестве ответа ниже. Это может помочь другим

Ответ №1:

Вы можете изменить цвет фона, как показано ниже,

 style: {
  base: {
    backgroundColor: 'red',
  }
}

Ответ №2:

Согласно документации:https://stripe.com/docs/js/appendix/style используется метод «backgroundColor». Но в той же документации пока рекомендуется внести некоторые коррективы непосредственно в CSS контейнера элементов. И особенно для «фона» и «высоты» для меня лучше работало прямое изменение CSS. Рабочий пример:

 <template>
   ...
   <div id="card-element"></div>
   ...
</template>
<script>
...
    let adjustments = {
      hidePostalCode: true,
      style: {
        base: {
          // backgroundColor: "#cbf5f8",
          fontWeight: "400",
          fontFamily: "Avenir, Helvetica, Arial, sans-serif",
          fontSize: "16px",
          fontSmoothing: "antialiased",
          ":-webkit-autofill": {
            color: "#fce883",
          },
        },
        invalid: {
          iconColor: "#FFC7EE",
          color: "#FFC7EE",
        },
      },
    };
    card = elements.create("card", adjustments); 
...
</script>
<style>
#card-element {
  border: 1px solid currentColor;
  border-radius: 4px;
  height: 50px;
  background: #cbf5f8;
  margin-bottom: 20px;
  padding-top: 10px;
}
</style>

Ответ №3:

Как описано в официальной документации:https://stripe.com/docs/stripe-js/reference#elements-create , нет поддержки для добавления цвета фона для элемента ввода.

Но вы можете использовать некоторый взлом родительского элемента, который у вас есть в вашем HTML-коде, чтобы он выглядел как ввод, и оформить его так, как вы хотите.