javascript - Issue with Stripe elements.create focus's class

Question

Here is what I tried :

-1. HTML

    <form role="form">

        <div class="text-danger" id="errors"></div>

            <div class="form-group">
                <label for="cardholder-name">Nom complet</label>
                <input type="text" id="cardholder-name" name="cardholder-name" placeholder="Jason Doe" required class="form-control">
            </div>

            <div class="form-group">
                <label for="card-element">Informations de la carte</label>
                <div id="card-element"></div>
            </div>

-2 JS

    let card = elements.create('card', {
        classes: {
            base: "form-control",
            focus: "#a9c9eb",
        },
    });

And here's what I get (issue = red arrow, what I want it to be like = green arrow):

Thank for your time.

---------------- Correction i used ----------------

I used this :

<style>
    .StripeElement--focus {
        border-color: #80BDFF;
        background-color: #fff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    .StripeElement--invalid {
        border-color: #dc3545;
        background-color: #fff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }
    #card-element.form-control {
      display:block;
    }

</style>

And just corrected this :

let card = elements.create('card');

标签： javascriptcssstripe-payments

Answer 1

The Style object for Stripe Elements doesn't provide a way to add a border rule for the inner elements. Instead you should just add your CSS rules to the wrapping div, card-element.