Элементы Stripe и Bootstrap 4.1 css конфликты - PullRequest
Новая
       22

Элементы Stripe и Bootstrap 4.1 css конфликты

0 голосов
/ 02 декабря 2018

Как видно из заголовка, между Bootstrap 4.1 и элементами Stripe api возникают конфликты css.Я копался в попытках найти подтверждение этому и возможному решению, но безрезультатно.

Ниже приведен исходный код, воссоздающий эту проблему, а также несколько скриптов для живых примеров.Кто-нибудь видел это раньше / знает решение?

Fiddle без включения начальной загрузки 4.1

Fiddle WITH bootstrap 4.1 

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://js.stripe.com/v3/"></script>

    <!-- When below three lines are included, stripe elements are incorrectly rendered -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


    <script>
        $(document).ready(function(){

            var stripe = Stripe($('#spk').val());
            var elements = stripe.elements();

            var style = {
                base: {
                    // Add your base input styles here. For example:
                    fontSize: '16px',
                    lineHeight: '24px'
                }
            };

            var card = elements.create('card', {style: style});
            card.mount('#card-element');
            card.addEventListener('change', function(event) {
                var displayError = document.getElementById('card-errors');
                if (event.error) {
                    displayError.textContent = event.error.message;
                } else {
                    displayError.textContent = '';
                }
            });

            var form = document.getElementById('paymentMethodForm');
            form.addEventListener('submit', function(event) {
                event.preventDefault();
                stripe.createToken(card).then(function(result) {
                    if (result.error) {
                        var errorElement = document.getElementById('card-errors');
                        errorElement.textContent = result.error.message;
                    } else {
                        stripeTokenHandler(result.token);
                    }
                });
            });

            function stripeTokenHandler(token) {
                var form = document.getElementById('paymentMethodForm');
                var hiddenInput = document.createElement('input');
                hiddenInput.setAttribute('type', 'hidden');
                hiddenInput.setAttribute('name', 'stripeToken');
                hiddenInput.setAttribute('value', token.id);
                form.appendChild(hiddenInput);
                form.submit();
            }

        });
    </script>

</head>
<body>

<div style="width:400px;">
    <!-- sample test key from stripe website -->
    <input type="hidden" id="spk" value="pk_test_TYooMQauvdEDq54NiTphI7jx"/>
    <form action="/" method="POST" id="paymentMethodForm" class="d-block">
        <div class="form-row">
            <label for="card-element">Credit or debit card</label>
            <div id="card-element" style="">
            </div>
            <div class="alert-danger text-center" id="card-errors" role="alert"></div>
        </div>
        <div class="text-center">
            <br/>
            <button class="btn btn-primary">Add Payment Method</button>
        </div>
    </form>
</div>


</body>
</html>

Ответы [ 2 ]

0 голосов
/ 14 августа 2019

Не используйте класс form-row, так как Bootstrap разрабатывает его иначе, чем ожидает Stripe.Назовите это как-нибудь иначе.Если вы измените стиль, как предполагает facechomp, у вас, скорее всего, будут другие проблемы, когда Bootstrap ожидает display: flex.

0 голосов
/ 02 декабря 2018

Этот CSS исправит это: 

.form-row {
    display: inherit;
}

Bootstrap имеет значение display: flex.

Проверьте это fiddle .

...