Stripe Elements Given Code Don't Show The Custom Payment Form

I have simply copied and pasted the 3 codes that Stripe gives in its elements page : https://stripe.com/docs/elements The html in an html file, The CSS in the css file, connected t

Solution 1:

Yes, you are missing quite a lot of things. If you go to https://stripe.com/docs/elements, you will notice that this whole bunch of CSS exists to style that particular iframe which contains the demo:

<stylemedia="screen">body, html {
  height: 100%;
  background-color: #f7f8f9;
  color: #6b7c93;
}

*, label {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  font-variant: normal;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

button {
  border: none;
  border-radius: 4px;
  outline: none;
  text-decoration: none;
  color: #fff;
  background: #32325d;
  white-space: nowrap;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 014px;
  box-shadow: 04px6pxrgba(50, 50, 93, .11), 01px3pxrgba(0, 0, 0, .08);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-decoration: none;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
  float: left;
  margin-left: 12px;
  margin-top: 31px;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 07px14pxrgba(50, 50, 93, .10), 03px6pxrgba(0, 0, 0, .08);
  background-color: #43458b;
}

form {
  padding: 30px;
  height: 120px;
}

label {
  font-weight: 500;
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
}

#card-errors {
  height: 20px;
  padding: 4px0;
  color: #fa755a;
}

.form-row {
  width: 70%;
  float: left;
}

.token {
  color: #32325d;
  font-family: 'Source Code Pro', monospace;
  font-weight: 500;
}

.wrapper {
  width: 90%;
  margin: 0 auto;
  height: 100%;
}

#stripe-token-handler {
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  padding: 20px30px;
  border-radius: 004px4px;
  box-sizing: border-box;
  box-shadow: 050px100pxrgba(50, 50, 93, 0.1),
    015px35pxrgba(50, 50, 93, 0.15),
    05px15pxrgba(0, 0, 0, 0.1);
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  transform: translateY(0);
  opacity: 1;
  background-color: white;
}

#stripe-token-handler.is-hidden {
  opacity: 0;
  transform: translateY(-80px);
}

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */.StripeElement {
  background-color: white;
  padding: 8px12px;
  border-radius: 4px;
  border: 1px solid transparent;
  box-shadow: 01px3px0#e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 01px3px0#cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5!important;
}
</style>

You can find it in the Chrome dev tools when you inspect that particular element.

Solution 2:

Check out the code below. You still have to add stripe element though.

var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

// Create an instance of Elementsvar elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.// (Note that this demo uses a wider set of styles than the guide below.)var style = {
  base: {
    color: '#32325d',
    lineHeight: '24px',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Create an instance of the card Elementvar card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

// Handle form submissionvar form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the user if there was an errorvar errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your serverstripeTokenHandler(result.token);
    }
  });
});

body, html {
  height: 100%;
  background-color: #f7f8f9;
  color: #6b7c93;
}

*, label {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  font-variant: normal;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

button {
  border: none;
  border-radius: 4px;
  outline: none;
  text-decoration: none;
  color: #fff;
  background: #32325d;
  white-space: nowrap;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 014px;
  box-shadow: 04px6pxrgba(50, 50, 93, .11), 01px3pxrgba(0, 0, 0, .08);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-decoration: none;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
  float: left;
  margin-left: 12px;
  margin-top: 31px;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 07px14pxrgba(50, 50, 93, .10), 03px6pxrgba(0, 0, 0, .08);
  background-color: #43458b;
}

form {
  padding: 30px;
  height: 120px;
}

label {
  font-weight: 500;
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
}

#card-errors {
  height: 20px;
  padding: 4px0;
  color: #fa755a;
}

.form-row {
  width: 70%;
  float: left;
}

.token {
  color: #32325d;
  font-family: 'Source Code Pro', monospace;
  font-weight: 500;
}

.wrapper {
  width: 90%;
  margin: 0 auto;
  height: 100%;
}

#stripe-token-handler {
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  padding: 20px30px;
  border-radius: 004px4px;
  box-sizing: border-box;
  box-shadow: 050px100pxrgba(50, 50, 93, 0.1),
    015px35pxrgba(50, 50, 93, 0.15),
    05px15pxrgba(0, 0, 0, 0.1);
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  transform: translateY(0);
  opacity: 1;
  background-color: white;
}

#stripe-token-handler.is-hidden {
  opacity: 0;
  transform: translateY(-80px);
}

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */.StripeElement {
  background-color: white;
  padding: 8px12px;
  border-radius: 4px;
  border: 1px solid transparent;
  box-shadow: 01px3px0#e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 01px3px0#cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5!important;
}

.ElementsApp, .ElementsApp.InputElement {
  color: #32325d;line-height: 24px;font-family: "Helvetica Neue", Helvetica, sans-serif;font-size: 16px;height: 24px;-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ElementsApp:not(.is-autofilled) .InputElement:-webkit-autofill {
  color: #32325d;
  -webkit-text-fill-color: #32325d;
}
.ElementsApp.InputElement + .Input-placeholder--ie {
  opacity: 1;color: #aab7c4;
}
.ElementsApp.InputElement::-webkit-input-placeholder {
  opacity: 1;color: #aab7c4;
}
.ElementsApp.InputElement::-moz-placeholder {
  opacity: 1;color: #aab7c4;
}
.ElementsApp.InputElement:-ms-input-placeholder {
  opacity: 1;color: #aab7c4;
}
.ElementsApp.InputElement::placeholder {
  opacity: 1;color: #aab7c4;
}
.ElementsApp.InputElement.is-invalid {
  color: #fa755a;
}
.ElementsApp:not(.is-autofilled) .InputElement.is-invalid:-webkit-autofill {
  color: #fa755a;
  -webkit-text-fill-color: #fa755a;
}
.ElementsApp.is-invalid.Icon-fill--invalid {
  fill: #fa755a;
}

<scriptsrc="//js.stripe.com/v3/"></script><formaction="/charge"method="post"id="payment-form"><divclass="form-row"><labelfor="card-element">
      Credit or debit card
    </label><divid="card-element"><!-- a Stripe Element will be inserted here. --></div><!-- Used to display form errors --><divid="card-errors"role="alert"></div></div><button>Submit Payment</button></form>