How to customize credit card form in Stripe?

Question

I am configuring the payment gateway using Stripe, I have a basic structure you can see that you can add styles in the javascript code but not something that structures the HTML form content of the following 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');

});

<script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<form action="charge.php" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- a Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display form errors -->
    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

Note: StackOverflow does not run does not show the results, you can see the results of the code in https://jsfiddle.net/k16mk5z1/

Its result is the following:

How can I customize the design of the form as follows:

There is a documentation giving references but I can not understand them well.

Notes:

As of version 3 of stripe, this new version generates the content of the card form by means of its javascript plugin

previously in version 2 there was an HTML structure of the form.

Ywain Ywain · Accepted Answer · 2017-11-03T14:09:11

You can use separate fields with Elements, e.g.: http://jsfiddle.net/ywain/whj357u9/

If you want to also collect the cardholder's name, you'll need to use a regular <input> field, and provide its contents in the second parameter when calling createToken(): http://jsfiddle.net/ywain/eckhnz19/

EDIT: If you want the separate card field to show the card brand icon, you'll need to reimplement that feature yourself. It is relatively easy to do so using the change event. Here's an example: http://jsfiddle.net/ywain/L96q8uj5/

How to customize credit card form in Stripe?

1 Answers