Jak dostosować formularz karty kredytowej w Stripe?

Konfiguruję bramkę płatności za pomocą Stripe , mam podstawową strukturę widać, że można dodawać style w kodzie javascript ale nie coś, co strukturyzuje HTML form treść następującego kodu:

$(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>

Uwaga: StackOverflow nie działa nie wyświetla wyników, wyniki kodu można zobaczyć w https://jsfiddle.net/k16mk5z1/

Jego wynikiem jest po:

Jak mogę dostosować projekt formularza w następujący sposób:

Jest dokumentacja zawierająca odniesienia, ale nie mogę ich dobrze zrozumieć .

Uwagi:

Od wersji 3 stripe, ta nowa wersja generuje zawartość formularza karty za pomocą wtyczki javascript

Poprzednio w wersji 2 istniała struktura HTML formularza.