Question 43521 in Html Question posted in
Some basic documentation can be found here.

How can I style stripe credit card fields? – Html

I’ve been integrating stripe using this html coden bootstrap 4.

<div class="form-control" id="card-element"></div>

which gives me the following output

enter image description here

However, I want to have this design:

enter image description here

The JavaScript part is as usual:

<script src="https://js.stripe.com/v3/"></script>

<script>
.......
.......
      stripe = Stripe(publishableKey);
      var elements = stripe.elements();
      var style = {
        base: {
          color: "#32325d",
          fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
          fontSmoothing: "antialiased",
          fontSize: "16px",
          "::placeholder": {
            color: "#aab7c4"
          }
        },
        invalid: {
          color: "#fa755a",
          iconColor: "#fa755a"
        }
      };
      var card = elements.create("card", {hidePostalCode: true, style: style });
      card.mount("#card-element");
.......
.......
</script>

How can I obtain the second design in which each field is separated?

Tags:

2

Answers


  1. 0

    Stripe card is an additional code that will be added to page by javascript. Its not correct to manipulate rendered attributes after they rendered but you can force change them by global css.
    for preventing the effect on other elements you can put a class name above the place the card will render and start your css selector by that class name.

    Login or Signup to reply.
  2. 0

    Card Elements supports splitting into different fields. See Stripe Elements Examples page, click on "View Source on Github". For example they use individual cardNumber, cardExpiry, and cardCvc Elements with a custom web font.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search