Stripe Elements given code don't show the custom payment form
Question
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 to the html and the js in a js file, connected to the html
The result is disappointing and not showing at all what's in their "result" section.
I can only see the text : Credit or debit card and the button Submit Payment, with no styling at all,
Am I missing something ? Obviously yes :p
<!DOCTYPE html>
<html>
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/png" href="icone.png" />
<link rel="stylesheet" type="text/css" href="stripeCSS.css">
<script src="https://js.stripe.com/v3/"></script>
<script src="stripejs.js"></script>
</head>
<body>
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
</div>
<!-- Used to display Element errors -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
</body>
</html>
The css
.StripeElement {
background-color: white;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
the js
// Create a Stripe client
var stripe = Stripe('pk_test_xxxxxxxxxxxxxx');
// Create an instance of Elements
var 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 Element
var 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 submission
var 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 error
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server
stripeTokenHandler(result.token);
}
});
});
2 answers
solution1
4 2017-10-23 18:08:11
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:
<style media="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: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(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: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(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: 4px 0;
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: 20px 30px;
border-radius: 0 0 4px 4px;
box-sizing: border-box;
box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
0 15px 35px rgba(50, 50, 93, 0.15),
0 5px 15px rgba(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: 8px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #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.
solution2
1 ACCPTED 2017-10-23 18:11:06
Check out the code below. You still have to add stripe element though.
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh'); // Create an instance of Elements var 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 Element var 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 submission var 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 error var errorElement = document.getElementById('card-errors'); errorElement.textContent = result.error.message; } else { // Send the token to your server stripeTokenHandler(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: 0 14px; box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(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: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(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: 4px 0; 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: 20px 30px; border-radius: 0 0 4px 4px; box-sizing: border-box; box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(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: 8px 12px; border-radius: 4px; border: 1px solid transparent; box-shadow: 0 1px 3px 0 #e6ebf1; -webkit-transition: box-shadow 150ms ease; transition: box-shadow 150ms ease; } .StripeElement--focus { box-shadow: 0 1px 3px 0 #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; }
<script src="//js.stripe.com/v3/"></script> <form action="/charge" 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Stripe Custom Payment Form Implementation
Stripe Payment Request Button doesn't show in desktop
Laravel stripe payment form isn't handled just posted
Don't show array elements
Stripe Payment Form not Displaying in React
Stripe payment won't work
Stripe js: don't let empty form be sent
SVG elements don't show up
Stripe Payment element show saved card
Stripe Elements won't load my custom font
Related Tags