Change Card Design Stripe

You can change card-element to any customized design

by laravelsagmetic

HTML

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

<body>
<form method="post" action="/" id="signup-form">
<div class="input-group d-flex">
                  <label class="form-label w-50">Card number</label>
                  <div id="cc-number"></div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="input-group">
                      <label class="form-label">MM/AA</label>
                      <div id="cc-expiry"></div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="input-group">
                      <label class="form-label">CVV</label>
                      <div id="cc-cvc"></div>
                    </div>
                  </div>
                </div>
                 <button type="button" class="btn cta w-100 lawkit-btn " >submit</button>
  </form>
</body>

CSS

.form-control {
  width: 100%;
  border: 1px solid #E8E8E8;
  border-radius: 5px !important;
  padding: 18px 20px;
  font-size: 14px;
}

JavaScript

var stripe = Stripe('pk_test_51N5MbaSIRfv8P9JxGuCtqVMrF5jXs2UPsT4TiUjMxnvgrHLv74N6rPwBXEt2RawZKm8nZSNjb8E5JpjW9fiJ3Wqt00m4MB5eWg');

var elements = stripe.elements();
var style = {
  base: {
    border: '1px solid #E8E8E8',
    iconColor: '#c4f0ff',
    color: '#31325F',
    fontWeight: 400,
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSize: '16px',
    fontSmoothing: 'antialiased',

    '::placeholder': {
      color: '#CFD7E0',
    },
    ':-webkit-autofill': {
      color: '#fce883',
    },
    ':focus': {
      color: '#31325F',
    },
  },
  invalid: {
    iconColor: '#FFC7EE',
    color: '#FFC7EE',
  },
};

var cardNumber = elements.create('cardNumber', {
  style: style,
  classes: {
    base: 'form-control w-full',
    complete: 'is-valid',
    empty: 'is-empty',
    invalid: 'is-invalid',
  },
});

var cardExpiry = elements.create('cardExpiry', {
  style: style,
  classes: {
    base: 'form-control ',
    complete: 'is-valid',
    empty: 'is-empty',
    invalid: 'is-invalid',
  },
});

var cardCvc = elements.create('cardCvc', {
  style: style,
  classes: {
    base: 'form-control',
    complete: 'is-valid',
    empty: 'is-empty',
    invalid: 'is-invalid',
  },
});

cardNumber.mount('#cc-number');
cardExpiry.mount('#cc-expiry');
cardCvc.mount('#cc-cvc');

// Card mount done here

var form = document.getElementById('signup-form');
var btn = document.querySelector('.lawkit-btn');
btn.addEventListener('click', function() {
  console.log('try to submit form ');
  stripe.createPaymentMethod({
    type: 'card',
    card: cardNumber,
    billing_details: {
      name: 'tryname',
    },
  }).then(function(result) {
    if (result.error) {
      // Display error.message 
      console.log(result.error.message);
    } else {
      stripe.createToken(cardNumber).then(function(res) {
        if (res.error) {
          btn.removeClass("disabled").removeAttr('disabled').html('Crear cuenta');
          console.log(result.error.message);
        }...