我正在尝试创建使用条带支付的非常简单的示例。 这是我的PHP文件
// Create a Stripe client
var stripe = Stripe('pk_test_XSHE4IYLLy9qCPe7lW7pK4ZE');
// 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);
}
});
});
.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;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://js.stripe.com/v3/"></script>
<title>test</title>
</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">
<!-- a Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors -->
<div id="card-errors"></div>
</div>
<button>Submit Payment</button>
</form>
</body>
</html>
我按照Stripe
中的示例进行操作这是我从javascript控制台获得的错误
Uncaught Error: The selector you specified (#card-element) applies to no DOM elements that are currently on the page.
Make sure the element exists on the page before calling mount().
at new t (js.stripe.com/:1)
at t.value (js.stripe.com/:1)
根据错误,我认为条带js找不到#card-element。但它就在那里。
这可能是一个转储问题:D但这是我第一次使用条纹,所以如果有人可以帮助我,这将是很好的。非常感谢。
答案 0 :(得分:13)
不要在头部添加脚本,而是在关闭身体之前添加脚本。
<html lang= "en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</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">
<!-- a Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors -->
<div id="card-errors"></div>
</div>
<button>Submit Payment</button>
</form>
<script src="https://js.stripe.com/v3/"></script>
</body>
</html>
将脚本置于底部可确保在执行脚本之前呈现DOM,以便做到这一点!
答案 1 :(得分:6)
将您的脚本放在html之后,
<form></form>
//after your stripe form put stripe script
<script></script>
如下所示
<style type="text/css">
* {
font-family: "Helvetica Neue", Helvetica;
font-size: 15px;
font-variant: normal;
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
background: #E6EBF1;
align-items: center;
min-height: 100%;
display: flex;
width: 100%;
}
form {
width: 480px;
margin: 20px auto;
}
.group {
background: white;
box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
0 3px 6px 0 rgba(0,0,0,0.08);
border-radius: 4px;
margin-bottom: 20px;
}
label {
position: relative;
color: #8898AA;
font-weight: 300;
height: 40px;
line-height: 40px;
margin-left: 20px;
display: block;
}
.group label:not(:last-child) {
border-bottom: 1px solid #F0F5FA;
}
label > span {
width: 20%;
text-align: right;
float: left;
}
.field {
background: transparent;
font-weight: 300;
border: 0;
color: #31325F;
outline: none;
padding-right: 10px;
padding-left: 10px;
cursor: text;
width: 70%;
height: 40px;
float: right;
}
.field::-webkit-input-placeholder { color: #CFD7E0; }
.field::-moz-placeholder { color: #CFD7E0; }
.field:-ms-input-placeholder { color: #CFD7E0; }
button {
float: left;
display: block;
background: #666EE8;
color: white;
box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
0 3px 6px 0 rgba(0,0,0,0.08);
border-radius: 4px;
border: 0;
margin-top: 20px;
font-size: 15px;
font-weight: 400;
width: 100%;
height: 40px;
line-height: 38px;
outline: none;
}
button:focus {
background: #555ABF;
}
button:active {
background: #43458B;
}
.outcome {
float: left;
width: 100%;
padding-top: 8px;
min-height: 24px;
text-align: center;
}
.success, .error {
display: none;
font-size: 13px;
}
.success.visible, .error.visible {
display: inline;
}
.error {
color: #E4584C;
}
.success {
color: #666EE8;
}
.success .token {
font-weight: 500;
font-size: 13px;
}
</style>
<form action="subscription.php" method="post">
<div class="group">
<label>
<span>Name</span>
<input name="cardholder-name" class="field" placeholder="Jane Doe" />
</label>
<label>
<span>Phone</span>
<input class="field" placeholder="(123) 456-7890" type="tel" />
</label>
</div>
<div class="group">
<label>
<span>Card</span>
<div id="card-element" class="field"></div>
</label>
</div>
<button type="submit">Pay $25</button>
<div class="outcome">
<div class="error" role="alert"></div>
<div class="success">
Success! Your Stripe token is <span class="token"></span>
</div>
</div>
</form>
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
var stripe = Stripe('YOUR_PUBLIC_KEY');
var elements = stripe.elements();
var card = elements.create('card', {
style: {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 300,
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
},
},
}
});
card.mount('#card-element');
function setOutcome(result) {
var successElement = document.querySelector('.success');
var errorElement = document.querySelector('.error');
successElement.classList.remove('visible');
errorElement.classList.remove('visible');
if (result.token) {
// Use the token to create a charge or a customer
// https://stripe.com/docs/charges
successElement.querySelector('.token').textContent = result.token.id;
successElement.classList.add('visible');
} else if (result.error) {
errorElement.textContent = result.error.message;
errorElement.classList.add('visible');
}
}
card.on('change', function(event) {
setOutcome(event);
});
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
var form = document.querySelector('form');
var extraDetails = {
name: form.querySelector('input[name=cardholder-name]').value,
};
stripe.createToken(card, extraDetails).then(setOutcome);
});
</script>
答案 2 :(得分:4)
对于遇到同样问题的其他人 - 条纹论文中的代码段不完整。因此,上面建议的修复实际上可能是确保正确操作顺序所必需的,但除非您定义了stripeTokenHandler方法,否则整个过程都不会起作用。
Stripe的文档将方法(在页面下方)定义为:
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
答案 3 :(得分:0)
Stripe.js在iFrame中呈现信用卡号,有效期和CVC的输入。您无法使用JavaScript创建或使用它们。但是,您可以根据需要设置容器的样式,这将使您与网站的UI(Bootstrap,MDC-Web或其他)非常接近。
如果您的元素未显示,请尝试以下操作开始。
<div class="stripe-custom-element">
<label for="stripe-card">Card Number</label>
<div class="" id="stripe-card"></div>
</div>
<div class="stripe-custom-element">
<label for="stripe-exp">Expiration</label>
<div class="" id="stripe-exp"></div>
</div>
<div class="stripe-custom-element">
<label for="stripe-cvc">CVC</label>
<div class="" id="stripe-cvc"></div>
</div>
var cardNumberElement = doc.getElementById("stripe-card");
var cardExpiryElement = doc.getElementById("stripe-exp");
var cardCvcElement = doc.getElementById("stripe-cvc");
var cardNumber = elements.create('cardNumber', {});
var cardExpiry = elements.create('cardExpiry', {});
var cardCvc = elements.create('cardCvc', {});
cardNumber.mount(cardNumberElement);
cardExpiry.mount(cardExpiryElement);
cardCvc.mount(cardCvcElement);
registerElements([cardNumber, cardExpiry, cardCvc]);
答案 4 :(得分:0)
我可能迟到了,但这对我有用,请确保在条带脚本下方添加charge.js 脚本,并且在结束正文标记之前添加它们
Image.asset()