Stripe Elements - добавление эффекта заполнителя к входу - PullRequest
Новая
       14

Stripe Elements - добавление эффекта заполнителя к входу

0 голосов
/ 02 мая 2019

Если мне нужно добавить больше деталей, дайте мне знать ...

Как сделать эффект ниже с элементом полосы ? : 

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  top: 8px;
  bottom: 10px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
}
<div>
  <input type="text" class="inputText" required/>
  <span class="floating-label">Your email address</span>
</div>

Desipte исследование Я не могу найти что-нибудь о том, как осуществить это. Разве полоса не позволяет вам сделать это?

Насколько я понимаю, API-интерфейс чередования получает iFrame со входом, и его нельзя изменить с помощью JS.

Соответствующий код полосы:

Номер карты Пожалуйста, введите действительную кредитную карту 
        <div class="str-element-wrapper">
            <div class="cvc-tooltip-trigger"></div>
            <div class="cvc-tooltip">
              <span style="font-weight: bold;">Where is your Security Code?</span>
              <span>Your credit card’s Security Code 
                  is a 3- or 4-digit number located 
                  on its front or back.</span>
            </div>
            <div id="card-cvc-element" class="field"></div>
            <label class="signup-form-input-label" for="name">CVC (Security Code)</label>
            <span class="signup-form-input__error">Please enter a valid CVC</span>
        </div>
        <div class="str-element-wrapper">
          <div id="card-expiry-element" class="field"></div>
          <label class="signup-form-input-label" for="name">Expiration (MM / YY)</label>
          <span class="signup-form-input__error">Please enter a valid expiration</span>
        </div>

JS: 

// Create a Stripe client.
        var stripe = Stripe("(my stripe key here)");

        // Create an instance of Elements.
        var elements = stripe.elements();

        // Custom styling can be passed to options when creating an Element.
        // (Note that this demo uses a wider set of styles than the guide below.)
        var style = {
          base: {
            color: "#32325d",
            fontFamily: '"Raleway", Raleway, sans-serif',
            fontSmoothing: "antialiased",
            fontSize: "16px",
            "::placeholder": {
              color: "#292c2e"
            }
          },
          invalid: {
            color: "#fa755a",
            iconColor: "#fa755a"
          }
        };

        var cardNumberElement = elements.create('cardNumber', {
          style: style,
          placeholder: '',
        });
        cardNumberElement.mount('#card-number-element');

        var cardCvcElement = elements.create('cardCvc', {
          style: style,
          placeholder: '',
        });
        cardCvcElement.mount('#card-cvc-element');

        var cardExpiryElement = elements.create('cardExpiry', {
          style: style,
          placeholder: '',
        });
        cardExpiryElement.mount('#card-expiry-element');

Я пытался: 

$(".StripeElement").focus(function() {
        $(this).siblings().addClass("signup-form-input-label--focused")
    });
    $(".StripeElement").focusout(function() {
        if ($(this).val() !== "") {
            // keep state
        } else {
            $(this).siblings().removeClass("signup-form-input-label--focused");
        }
    });

Затем добавил CSS: 

.signup-form-input-label--focused {
        @media (max-width: $mobile-bp) {
            left: 4%;
        }
        top: 20%;
        left: 11%;
        font-size: 12px;
        color: #6d7474;
    }

Что делает этикетку меньше.

Но все это безнадежное дело (я думаю, но не знаю), потому что входы вводятся через iFrame.

Могу я это сделать или нет?

...