The custom forms is not showing properly.
The output is in the link.
.0.0.1
Please help me out.
I have simply copied and pasted the 3 codes that Stripe gives in its elements page.
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
base.html
{% load staticfiles %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/starter-template.css' %}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
</head>
<body>
{% block content %}
{% endblock%}
{% block default %}
{% endblock%}
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% static 'js/slim.min.js' %}" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="{% static 'js/popper.min.js' %}"> </script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
{% block script %}
{% endblock %}
</body>
</html>
main.css
h1{
color: red;
}
.row{
margin-right: 0;
margin-left: 0;
}
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;
}
checkout.html
{% extends 'base.html' %}
{% block script %}
<script src="//js.stripe/v3/"></script>
<script>
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);
}
});
});
</script>
{% endblock %}
{% block content %}
<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>
{% endblock %}
The custom forms is not showing properly.
The output is in the link.
https://screenshots.firefox./Esrmcoq8LUIzgVWB/127.0.0.1
Please help me out.
I have simply copied and pasted the 3 codes that Stripe gives in its elements page.
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
base.html
{% load staticfiles %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/starter-template.css' %}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
</head>
<body>
{% block content %}
{% endblock%}
{% block default %}
{% endblock%}
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% static 'js/slim.min.js' %}" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="{% static 'js/popper.min.js' %}"> </script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
{% block script %}
{% endblock %}
</body>
</html>
main.css
h1{
color: red;
}
.row{
margin-right: 0;
margin-left: 0;
}
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;
}
checkout.html
{% extends 'base.html' %}
{% block script %}
<script src="//js.stripe./v3/"></script>
<script>
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);
}
});
});
</script>
{% endblock %}
{% block content %}
<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>
{% endblock %}
- Are any errors showing if you Inspect the page? – HenryM Commented May 10, 2018 at 7:10
- I am getting two warnings. – Utkarsh Commented May 10, 2018 at 9:16
- The warning are : – Utkarsh Commented May 10, 2018 at 9:17
- You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS. – Utkarsh Commented May 10, 2018 at 9:17
- 1 he use of the style property lineHeight is discouraged, because it can lead to visual inconsistencies among various browsers. Consider using a padding on the Element’s container instead. c @ controller-fbf06e5045244423fb4833c7e87a9c32.js:1 – Utkarsh Commented May 10, 2018 at 9:17
2 Answers
Reset to default 5In your checkout.html,
Instead of
<div class="form-row">
use this,
<div>
This is because there is a css class with the name "form-row" which is conflicting with the existing one.
The code that creates the instance of your card Element and mount it to your #card-element DOM element should be called when your form/element has loaded:
https://stripe./docs/stripe-js/elements/quickstart#create-form
When the form above has loaded, create an instance of an Element and mount it to the Element container created above:
Your code is called before the element has finished loading so I think that's the issue.
Consider moving your <script> block at the end of the document or execute your JS in an onload event handler.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744332397a4568949.html
评论列表（0条）