title: How to customize credit card form in Stripe?
body: <p>I am configuring the payment gateway using <strong>Stripe</strong>, I have a basic structure you can see that you can add styles in the <code>javascript</code> code but not something that structures the <code>HTML</code> <code>form</code> content of the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  var stripe = Stripe('pk_test_lf3erqZAzfBDiiNp1wfFkxgv');
  var elements = stripe.elements();
  
  var style = {
    base: {
      color: '#303238',
      fontSize: '16px',
      fontFamily: '"Open Sans", sans-serif',
      fontSmoothing: 'antialiased',
      '::placeholder': {
        color: '#CFD7DF',
      },
    },
    invalid: {
      color: '#e5424d',
      ':focus': {
        color: '#303238',
      },
    },
  };
  var card = elements.create('card', {style: style});
  card.mount('#card-element');
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-2.0.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://js.stripe.com/v3/"&gt;&lt;/script&gt;
  &lt;form action="charge.php" method="post" id="payment-form"&gt;
    &lt;div class="form-row"&gt;
      &lt;label for="card-element"&gt;
        Credit or debit card
      &lt;/label&gt;
      &lt;div id="card-element"&gt;
        &lt;!-- a Stripe Element will be inserted here. --&gt;
      &lt;/div&gt;
  
      &lt;!-- Used to display form errors --&gt;
      &lt;div id="card-errors" role="alert"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;button&gt;Submit Payment&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p><strong>Note:</strong> StackOverflow does not run does not show the results, you can see the results of the code in <a href="https://jsfiddle.net/k16mk5z1/" rel="noreferrer">https://jsfiddle.net/k16mk5z1/</a></p>
  </blockquote>
  
  <p>Its result is the following:</p>
  
  <p><a href="https://i.stack.imgur.com/wO8aS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wO8aS.png" alt="introducir la descripción de la imagen aquí"></a></p>
  
  <p><strong>How can I customize the design of the form as follows:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/tbyzb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tbyzb.png" alt="introducir la descripción de la imagen aquí"></a></p>
  
  <p>There is a documentation giving <a href="https://stripe.com/docs/stripe-js/reference#element-options" rel="noreferrer">references but I can not understand them well</a>.</p>
  
  <p><strong>Notes:</strong></p>
  
  <p>As of version 3 of stripe, this new version generates the content of the card form by means of its javascript plugin</p>
  
  <p>previously in version 2 there was an HTML structure of the form.</p>