Tengo que cambiar el color de la entrada de la raya para el modo oscuro. Pero no pude encontrar una opción para esto. ¿Hay alguna manera? El siguiente ejemplo explica mi caso.

var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();

var card = elements.create('card', {
  style: {
    base: {
      iconColor: '#666EE8',
      color: 'green', // I want to make this yellow in dark mode
      lineHeight: '40px',
      fontWeight: 300,
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSize: '15px',

      '::placeholder': {
        color: '#CFD7E0',
      },
    },
  }
});
card.mount('#card-element');

document.querySelector(".toggle-dark-mode").onclick = function(){
  document.body.classList.toggle("dark-mode");
}
* {
  font-family: "Helvetica Neue", Helvetica;
  font-size: 15px;
  font-variant: normal;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body {
  background: #E6EBF1;
  align-items: center;
  min-height: 100%;
  display: flex;
  width: 100%;
}

form {
  width: 480px;
  margin: 20px auto;
}

.group {
  background: white;
  border-radius: 4px;
  margin-bottom: 20px;
}

label {
  position: relative;
  color: #8898AA;
  font-weight: 300;
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  display: block;
}

.group label:not(:last-child) {
  border-bottom: 1px solid #F0F5FA;
}

label>span {
  width: 20%;
  text-align: right;
  float: left;
}

.field {
  background: transparent;
  font-weight: 300;
  border: 0;
  color: #31325F;
  outline: none;
  padding-right: 10px;
  padding-left: 10px;
  cursor: text;
  width: 70%;
  height: 40px;
  float: right;
}

.field::-webkit-input-placeholder {
  color: #CFD7E0;
}

.field::-moz-placeholder {
  color: #CFD7E0;
}

.field:-ms-input-placeholder {
  color: #CFD7E0;
}

.btn {
  float: left;
  display: block;
  background: #666EE8;
  color: white;
  border-radius: 4px;
  border: 0;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 400;
  width: 100%;
  height: 40px;
  line-height: 38px;
  outline: none;
}

.btn:focus {
  background: #555ABF;
}

.btn:active {
  background: #43458B;
}

.outcome {
  float: left;
  width: 100%;
  padding-top: 8px;
  min-height: 24px;
  text-align: center;
}

.success,
.error {
  display: none;
  font-size: 13px;
}

.success.visible,
.error.visible {
  display: inline;
}

.error {
  color: #E4584C;
}

.success {
  color: #666EE8;
}

.success .token {
  font-weight: 500;
  font-size: 13px;
}

.toggle-dark-mode {
  position:fixed;
  left:20px;
  top:20px;
}

.dark-mode {
  background: #444;
}

.dark-mode .group {
  background: #666;
}
<script src="https://js.stripe.com/v3/"></script>
<button class="toggle-dark-mode">Toggle Dark Mode</button>
<form>
  <div class="group">
    <label>
      <span>Name</span>
      <input name="cardholder-name" class="field" placeholder="Jane Doe" />
    </label>
    <label>
      <span>Phone</span>
      <input class="field" placeholder="(123) 456-7890" type="tel" />
    </label>
  </div>
  <div class="group">
    <label>
      <span>Card</span>
      <div id="card-element" class="field"></div>
    </label>
  </div>
  <button class="btn" type="submit">Pay $25</button>
  <div class="outcome">
    <div class="error"></div>
    <div class="success">
      Success! Your Stripe token is <span class="token"></span>
    </div>
  </div>
</form>
0
dgknca 27 oct. 2020 a las 23:33

1 respuesta

La mejor respuesta

Siempre que se haga clic en el botón "Alternar modo oscuro", puede actualizar el estilo del elemento de la tarjeta usando cardElement.update();.

Documentación aquí: https://stripe.com/docs/js/element / other_methods / update? type = card

1
karbi 27 oct. 2020 a las 21:03